You can include an atomic component like so:

<script>
component("button", { "text": "Click me" });
</script>

And it will render both the HTML markup and the code to produce it, taken straight from the components/button.mustache source.

Click me

<button class="c-btn c-btn--medium">Click me</button>

To add additional information, pass parameters to the component call:

<script>
component("button", { "type": "warning", "text": "Help" });
</script>

This would render:

Help

<button class="c-btn c-btn--warning c-btn--medium">Help</button>

More complex components (molecules) which combine atoms, will be pre-rendered from passed-through atoms array. The atoms can be an array of simple objects with "component-name": "options-object".

<script>
component("button-group", { "atoms": [
  { "button": { "text": "Back", "size": "medium", "icon-before": "chevron-left" } },
  { "button": { "text": "Help", "size": "medium" } },
  { "button": { "text": "Next", "size": "medium", "icon-after": "chevron-right" } }
]})
</script>

Alternatively, the atoms array can be an object with a "component" key and an "options" key. This can be useful if you need to pass through several different types of component:

<script>
component("button-group", { atoms: [
    {
        "component": "button",
        "options": { "text": "Back", "size": "medium", "icon-before": "chevron-left" }
    },
    {
        "component": "button",
        "options": { "text": "Help", "size": "medium" }
    },
    {
        "component": "button",
        "options": { "text": "Next", "size": "medium", "icon-after": "chevron-right" }
    }
]});
</script>

Both these examples would render the same code:

<div class="c-btn-group"><button class="c-btn c-btn--medium"><i class="c-icon c-icon--chevron-left c-icon--before"></i>Back</button><button class="c-btn c-btn--medium">Help</button><button class="c-btn c-btn--medium">Next<i class="c-icon c-icon--chevron-right c-icon--after"></i></button></div>