Template Variables
Create dynamic, reusable components with Handlebars template variables.
What Are Template Variables?
Template variables let you create one component design that can display different content. Instead of hardcoding text like “Pro Plan $99”, you can use variables like {{planName}} and {{price}} that get filled in with actual data.
Basic Syntax
Patchwork uses Handlebars syntax for template variables:
<div class="pricing-card">
<h2>{{planName}}</h2>
<div class="price">${{price}}/month</div>
<p>{{description}}</p>
</div>Using Template Defaults
When creating a component, you can set default values for your template variables. These defaults are used when rendering the component:
In the Component Builder:
- Add Handlebars variables to your HTML
- Set default values in the component settings
- The component will render with these defaults
Example defaults:
{
"planName": "Professional",
"price": "99",
"description": "Perfect for growing teams"
}Variable Types
Simple Variables
The most basic type - just a single value:
<h1>{{headline}}</h1>
<p>{{description}}</p>
<span>{{price}}</span>Conditionals
Show or hide content based on a variable:
{{#if isPremium}}
<span class="badge">Premium Member</span>
{{/if}} {{#unless isDisabled}}
<button>Click Me</button>
{{/unless}}Arrays & Lists
Loop through a list of items:
<ul class="features">
{{#each features}}
<li>{{this}}</li>
{{/each}}
</ul>Nested Properties
Access nested object properties:
<div class="user-card">
<h3>{{user.name}}</h3>
<p>{{user.email}}</p>
<span>{{user.role}}</span>
</div>Common Patterns
Pricing Card
<div class="pricing-card">
<h2>{{plan}}</h2>
<div class="price">${{price}}<span class="period">/{{period}}</span></div>
<ul class="features">
{{#each features}}
<li>✓ {{this}}</li>
{{/each}}
</ul>
{{#if hasDiscount}}
<div class="discount">Save {{discount}}%</div>
{{/if}}
<button>{{ctaText}}</button>
</div>Profile Card
<div class="profile">
<img src="{{avatarUrl}}" alt="{{name}}" />
<h3>{{name}}</h3>
<p class="title">{{title}} at {{company}}</p>
{{#if bio}}
<p class="bio">{{bio}}</p>
{{/if}}
<div class="contact">
<a href="mailto:{{email}}">{{email}}</a>
</div>
</div>Best Practices
1. Use Descriptive Names
<!-- Good -->
{{productName}} {{userEmail}} {{subscriptionStartDate}}
<!-- Bad -->
{{name}} {{val}} {{x}}2. Provide Defaults
Always set default values in your component settings so it renders correctly in preview:
{
"productName": "Sample Product",
"price": "99",
"inStock": true
}3. Handle Missing Data
Use conditionals to handle missing variables gracefully:
{{#if userName}}
<p>Hello, {{userName}}!</p>
{{else}}
<p>Hello, Guest!</p>
{{/if}}4. Document Your Variables
Add comments in your HTML to document what variables are needed:
<!--
Template Variables:
- planName (string): Name of the pricing plan
- price (number): Monthly price in USD
- features (array): List of feature strings
- ctaText (string): Call-to-action button text
-->
<div class="pricing-card">
<h2>{{planName}}</h2>
<!-- ... -->
</div>Security Note
Handlebars automatically escapes HTML by default. This prevents XSS attacks:
<!-- Safe - HTML is escaped -->
<p>{{userInput}}</p>
<!-- Dangerous - use only for trusted content -->
<div>{{{trustedHtmlContent}}}</div>Never use triple braces {{{...}}} with user-provided content!