Component Schema

Our components are defined by a simple JSON schema, meaning that it's both safe and simple to add additional components. If you want to create your own component, this is what you'll need:

Configuration

• name: An underscored name representing the component. If part of a framework you may want to namespace with a slash (e.g. bootstrap/button).
• label: A short, descriptive label that tells the user what this component is.
• css: An array of CSS URLs that your component depends upon. For some frameworks you can simply declare the framework name (e.g. bootstrap) and should to allow for custom theming etc.
• fields: The configuration fields for this component. These correspond to HTML form fields that can be filled in by the end user. Should be an array of Objects for which the options are:
  • type: The form field type. Can be any of text, select, textarea, and checkbox.
  • name: The input name (to be referred to in your template).
  • label: A human-readable label for this field.
  • default: The default value for the field.
  • options: (available for select type only) an array of arrays representing the labels and values for the select field. Example [ ["Label 1","value1"], ["Label 2","value2"] ]
• template: The Handlebars.js template that renders the component. This will be passed a JSON representation of the configuration values defined in fields.

Example

{
  "name": "my_component",
  "label": "MyComponent",
  
  "css": ["bootstrap"],

  "fields": [
    {"type":"text", "name":"field1", "label":"Field One", "default":"Value"},
    {"type":"textarea", "name":"field2", "label":"Long Field", "default":"Longer default value."},
    {"type":"text", "name":"field1", "label":"Field One", "default":"Value"},
    {"type":"select", "name":"field3", "options":[["None",""],["Label 1","value1"],["Label 2","value2"]], "default":"value2"}
    {"type":"checkbox", "label":"Field Four", "name":"field4", "default":true}
  ],

  "template":"<div class='my-component{{#if field4}} four{{/if}}'>{{field1}} {{field2}}</div>"
}