## CoCreateJS

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

## Collaborative Elements

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

    <input collection="contacts" document_id="" name="name">

The attributes collection, document_id and name 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 collection="contacts" document_id="" name="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" collection="contacts" document_id="" name="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 collection, document_id and name. If a element does not have a document_id defined a document_id will be generated and applied to all other elements with the same collection defined and do not have a document_id. Existing document_id are never overwriten.

## CRUD Attributes

- #### collection string required

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

- #### document_id string required

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

- #### name string required

  Defines the name in the document 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