Handlebars Templates

Handlebars is the default templating engine for Handoff's static and server-rendered integration paths. It allows you to build components using standard HTML while injecting dynamic data from Figma via a simple, readable syntax.

For a full reference on the base Handlebars syntax, visit the official Handlebars documentation.

Simple Example: Button

A basic button component demonstrating property binding and conditional class names.

example.handlebars
handlebars
1<button class="btn {{properties.size}} {{properties.variant}}">
2  {{properties.label}}
3</button>

In this example, size, variant, and label are variables mapped from Figma via the component's config.json.

---

Complex Example: Feature Card

A more advanced example demonstrating loops, conditionals, and nesting.

example.handlebars
handlebars
1<div class="card card-{{properties.theme}}">
2  {{#if properties.image}}
3    <img src="{{properties.image.src}}" alt="{{properties.image.alt}}" />
4  {{/if}}
5  
6  <div class="card-body">
7    <h3>{{properties.title}}</h3>
8    <p>{{properties.description}}</p>
9    
10    {{#if (eq properties.showAction true)}}
11      <a href="{{properties.link}}" class="btn btn-primary">Learn More</a>
12    {{/if}}
13    
14    <ul class="feature-list">
15      {{#each properties.features}}
16        <li>{{this}}</li>
17      {{/each}}
18    </ul>
19  </div>
20</div>

---

Custom Handoff Helpers

Handoff provides several custom helpers to make it easier to work with design system data and property validation.

eq (Equality)

Used to compare two values, typically within an #if block.

example.handlebars
handlebars
1{{#if (eq properties.variant 'primary')}}
2  <!-- Render primary styles -->
3{{/if}}

#field (Property Binding)

The #field helper wraps a part of your template to enable inspection and direct editing within the Handoff documentation site. It marks a piece of content as being tied to a specific Figma property.

example.handlebars
handlebars
1{{#field 'label'}}
2  <span>{{properties.label}}</span>
3{{/field}}

Conditionals (#if / #unless)

Standard Handlebars logic for toggling parts of your template based on property values.

example.handlebars
handlebars
1{{#unless properties.disabled}}
2  <button>Click Me</button>
3{{/unless}}

Loops (#each)

Iterate over arrays of data, such as lists of features, menu items, or nested token sets.

example.handlebars
handlebars
1<ul>
2  {{#each properties.items}}
3    <li>{{this.name}}: {{this.value}}</li>
4  {{/each}}
5</ul>