Skip to main content
To enhance your productivity, we have native integration with TailwindCSS.
Let our AI Agent do the heavy lifting for you and create the HTML component with a simple text prompt. Check out our AI Generated Section to learn more about it.

​
Handlebars integration

We use handlebars as our templating engine, so you also have all the flexibility that handlebars delivers inside your html components.Here’s some examples:

​
Variables

You can differentiate between dynamic variables and static text in your templates. Here’s how it works: • Simple Variable: Enclose your text in double curly brackets: {{ }}. • HTML Variable: Enclose your text in triple curly brackets: {{{ }}} to include HTML tags.

​
Conditional Rendering

On handlebars, you can use if, else, unless syntax to conditionally render a block of code. If you want to only render a block when a variable is sent: 
{{#if variable_name}}
    // conditionally rendered html content here
{{/if}}
If you want to conditionally render with a fallback: 
{{#if variable_name}}
    // variable_name rendered html content here
{{else}}
    // fallback html content here
{{/if}}
You can also use the alternative to NOT render a block when a variable is sent: 
{{#unless variable_name}}
    // conditionally rendered html content here if variable not sent
{{/unless}}

​
Loops

On handlebars, you can either loop through arrays or objects. Heres how to loop through an array of strings: 
{{#each array_of_strings}}
    <p>{{this}}</p>
{{/each}}
Heres how to loop through an array of objects: 
{{#each array_of_objects as |object|}}
    <p>{{object.id}}</p>
    <p>{{object.name}}</p>
{{/each}}
Heres how to loop through an object: 
{{#each array_of_strings}}
    <p>{{this}}</p>
{{/each}}
Heres how to loop through an a nested array of objects: Array of Objects Example: 
[
    {
        "id": "item-id",
        "results": [
            {
                "id": "result-id",
                "name": "result-name"
            }
        ]
]
The syntax would be: 
{{#each nested_array_of_objects as |object|}}
    <p>{{object.id}}</p>
    {{#each object.results as |result|}}
    <ul>
        <li>{{result.id}} - {{result.name}}</li>
    </ul>
    {{/each}}
{{/each}}
To see more handlebars functions, you can check out their documentation here.

​
How to use Icons on your HTML component

We also have a native integation with Lucide Icons. You can use them on your HTML component with the following syntax: 
<i data-lucide="circle-check" class="w-5 h-5"></i>
You won’t be able to see the Icon on the preview canvas yet, but if you click on “Generate sample”, you’ll be able to see the icon.
If you didn’t find what you were looking for regarding the Page Component, feel free to contact us at [email protected]. We’ll get back to you as quickly as possible!