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="test" 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. Apply contenteditable attribute, and the data you input will now save.

<h1 collection="test" document_id="" name="name" contenteditable></h1>

CoCreateJS by default is collabrotive. 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 collabrative rich text editors or a website builder.

<h1 type="text" collection="test" document_id="" name="name"></h1>

Radio

Checkbox

Select

Now that you have the form tag in place lets add some new inputs or update your current inputs connecting them to the CoCreateJS.

<select collection="" document_id="" name="name"></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 attribute is not already defined with a value. If realtime="false" is applied, the form will require a button and action to trigger save

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

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. For more information on the full caabilities of actions vitsit the actions documentation page

<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.

  • 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