CoCreateJS

Learn how to convert your html into a dynamic realtime application.

Collaborative Elements

Simply define a array, object and key. If the array contains the object and the object contains the key. Viola! The value is fetched in the input. Like wise, typing in the input will save the value. If the array did not exist previously it will be created. If the object is left empty, typing in the input will create a new object. 

<input array="contacts" object="" key="name">

The attributes array, object and key are at the center of the CoCreate universe, we take a data first aproach. By defining these 3 attributes you can save and fetch data from any input, textarea, select and thier various types. All other elements like h1, h2, span, etc will only fetch if the contenteditable attribute is applied. 

<h1 array="contacts" object="" key="name" contenteditable></h1>

CoCreateJS by default is collaborative. To turn collaboration off for an element, apply attribute realtime="false"

Input

Textarea

Contenteditable

Add attribute contenteditbale to any html and element and use it as an input. CoCreateJS also converts contenteditable elements to collaborative rich text editors or a website builder. 

<h1 type="text" array="contacts" object="" key="name"></h1>

Radio

Checkbox

Select

Form

The form tag is used for grouping elements and applying attributes dynamically to it's childeren. Attributtes added to a form tag will only be applied to the child elements if the child elements attribute does not currently contain a value.

Actions

The actions attribute is used to trigger one or more actions in the order they were applied. Actions are chainable and require success of the first to trigger the next. Many of the CoCreate's components have actions, you will find the actions defined in the respective components documentation. Here we will be introduing the basics as it relates to form and saving. 

<button actions="save"> </button>

Applying and clicking this action will save the value of the elements in a form to their respective array, object and key. If a element does not have a object defined a object will be generated and applied to all other elements with the same array defined and do not have a object. Existing object are never overwriten.

CRUD Attributes

  • array string required

    Defines a array name where your documents will be stored. sql equivalent is a table.

  • object string required

    Defines the object by id where your data will be stored. if left empty one will be generated. sql equvalient is a row

  • key string required

    Defines the key in the object containing the value. sql equvalient is a column

  • contenteditable boolean optional

    htmltags can be editable and display will collaborators cursors.

  • realtime boolean optional

    Save data onChange, if false a btn required to save. If attribute is empty or not used Default's to true.

  • read boolean optional

    Fetch value on page load or when updated. If attribute is empty or not used Default's to true.

  • save boolean optional

    Save data onChange/submitBtn. If attribute is empty or not used Default's to true.

  • update boolean optional

    If false the element will not listen to updates from others. Using a btn will also not save. If attribute is empty or not used Default's to true.

  • listen boolean optional

    If false the element will not listen to updates from others. Using a btn will also not save. If attribute is empty or not used Default's to true.

  • crud boolean optional

    If false the data you insert onChange will not store in DB. The data will only be retained by CRDT. If attribute is empty or not used Default's to true.

  • crdt boolean optional

    If false all data will be stored directly in db and CRDT will track changes. If attribute is empty or not used Default's to true.

  • cursors boolean optional

    Show collaborators cursor positions. If attribute is empty or not used Default's to true.

  • broadcast string optional

    Broadcast messages and changes to other collaborators in the same namespace and room. If attribute is empty or not used default's to true.

  • broadcast-sender string optional

    Broadcast messages and changes to self. If attribute is empty or not used default's to true.

  • broadcast-browser string optional

    Broadcast messages and changes locally to all open windows, tabs and iframes in current browser. If attribute is empty or not used default's to true.

  • namespace string optional

    Define a unique namespace where messages and changes are sent and received

  • room string optional

    Define a unique room where messages and changes are sent and received

  • value-prefix string optional

    Adds a prefix to value before saving

  • value-suffix string optional

    Adds a suffix to value before saving

Previous Topic

Getting started

Next Topic

Fetch a list and render the data using a template