Configure a component

Use the workbench

Open your projects, choose a library, then create or open a component. Paste or upload source, edit its variable declarations, and save. Configure the saved revision using form fields or a JSON object, then copy or download the generated code.

Declare the inputs

Each named input declares its type and whether it is required. Defaults apply to omitted optional values. Supplied values keep their strict types. In the editor, the Variable declarations field contains the contents of the variables object below.

{
  "reference": "24B",
  "variables": {
    "label": {"type": "string", "required": true},
    "href": {"type": "string", "required": true},
    "variant": {
      "type": "string", "required": false,
      "default": "primary", "enum": ["primary", "secondary"]
    }
  }
}

Insert values into source

Choose the encoder for the insertion point. Here, html escapes text and quoted attribute values.

<a class="button button--{* html variant *}" href="{* html href *}">
  {* html label *}
</a>

Include a child

[+ include 24B label=action.label href=action.url +]

The child receives only those named values and its declared defaults. Quoted argument values are literals; unquoted paths read values from the current component.

Use a conditional branch

[+ if show_action +]
  [+ include 24B label="Read more" href="/docs" +]
[+ else +]
  More information coming soon.
[+ endif +]

A flag must be boolean. Only the selected branch generates output.

Repeat an array

[+ foreach sites as site +]
  <article>
    <h2>{* html site.name *}</h2>
    [+ include 24B label=site.link.label href=site.link.href +]
  </article>
[+ endforeach +]

Declare arrays with items and objects with properties. Every item is validated, nested defaults are applied, and the loop preserves input order.