Fields
Build your block's Sidebar CMS using 12 field types.
A field is a content input. When you create a text field named Headline, it becomes the variable {{headline}} in your template. When someone fills in "Welcome to Our Site" in the CMS sidebar, {{headline}} renders that text. Each field type returns data in a specific format.
Field names are automatically converted to kebab-case variables.
"Hero Headline" becomes {{hero-headline}}.
Text
A single line text input.
<h1>{{headline}}</h1>
<a href="{{url}}">{{link-text}}</a>Returns: String
Textarea
A field for multiple lines of text. Can include linebreaks.
<p>{{description}}</p>
<p class="bio">{{author-bio}}</p>
<!-- Preserve line breaks with CSS -->
<p class="whitespace-pre-line">{{description}}</p>Returns: String with line breaks
WYSIWYG
A large text field with a toolbar at the top.
<!-- Wrong - HTML will be escaped as text -->
<div class="prose">{{content}}</div>
<!-- Right - HTML renders properly -->
<div class="prose">{{{content}}}</div>Returns: HTML markup
Options (Select)
A select menu. Add options directly or reference a data store so menus can share a set of options (Settings → Data Stores).
<!-- Using options to vary button style -->
<button class="btn-{{button-type}}">
{{button-text}}
</button>
<!-- Or with conditionals -->
{{#isEqual style "dark"}}
<div class="bg-gray-900 text-white">{{content}}</div>
{{else}}
<div class="bg-white text-gray-900">{{content}}</div>
{{/isEqual}}Returns: String (one of your predefined options)
Number
A text field limited to numbers.
<div class="grid grid-cols-{{columns}}">
<!-- ... -->
</div>
<p class="price">${{price}}</p>
<div class="rating">{{rating}} stars</div>Returns: String
Date
Publication dates, event dates, timestamps. Don't print it raw, use the formatDate helper.
<!-- Raw value prints the full ISO timestamp - nope -->
<time>{{published-date}}</time>
<!-- Use the formatDate helper -->
<time>{{formatDate published-date}}</time> <!-- Dec 14, 2024 -->
<time>{{formatDate published-date "long"}}</time> <!-- December 14, 2024 -->
<time>{{formatDate published-date "full"}}</time> <!-- Saturday, December 14, 2024 -->
<!-- Accessible: machine-readable datetime, human-readable display -->
<time datetime="{{published-date}}">
{{formatDate published-date "short"}}
</time>Returns: String
Image
An image picker and text field for alt text. Images are resized, recompressed and added to the media library on upload. Set the maximum dimensions of the image, more than anything this affects site speed. Images are compressed to WebP but you can adjust this.
<img src="{{hero-image}}" alt="{{hero-image.alt}}">
<div class="bg-cover" style="background-image: url('{{background-image}}')">
{{content}}
</div>
<!-- Inside an Items loop, use dot notation on this -->
{{#each gallery}}
<img src="{{this.photo}}" alt="{{this.photo.alt}}">
{{/each}}
<!-- Conditional image with fallback -->
{{#if featured-image}}
<img src="{{featured-image}}" alt="{{featured-image.alt}}">
{{else}}
<div>No image</div>
{{/if}}Returns: An object with full URL to a hosted image and alt text
Video
A file picker for videos. Videos are intended for background animation and flourishes, not actual content. Use YouTube or another service for that.
Enforced: MP4 only (H.264 recommended). Maximum file size of 5MB by default, raisable to 50MB per field. Don't let your editors upload a lot of long videos. It will cause poor site performance.
<!-- Looping video that autoplays, you need all of this -->
<video loop autoplay playsinline muted>
<source src="{{background-video}}" type="video/mp4">
</video>
Returns: Full URL to a hosted video
Items
Repeating content. You define sub-fields once (e.g. icon, headline, description), and editors add as many items as they want. This is the most powerful field type.
<!--
Inside the loop, context shifts.
The headline refers to the item's headline.
-->
<div class="grid grid-cols-3 gap-8">
{{#each features}}
<div>
{{icon icon size="32" color="text-brand"}}
<h3 class="heading-md">{{headline}}</h3>
<p class="body-sm">{{description}}</p>
</div>
{{/each}}
</div>Returns: Array of objects with properties
Group
Groups are for UI organization. They don't change how templates work. Without a group you'd have flat fields. Groups give you nesting, both in the UI and your template.
<!-- Access group properties with dot notation -->
<a href="{{button.url}}">{{button.label}}</a>
Returns: Object containing grouped fields
Link
The Link field gives editors a smart picker: they can search and select any page on the site, or type a raw address. It accepts internal pages, full URLs, anchors, and mailto.
<a href="{{cta-link}}" class="btn btn-primary">{{cta-text}}</a>
{{#if learn-more-link}}
<a href="{{learn-more-link}}">Learn more</a>
{{/if}}Returns: A URL string
Toggle
On/off choices. Show a badge, mark a post as featured, flip a layout variant.
{{#if featured}}
<span class="badge">Featured</span>
{{/if}}
{{#if dark-mode}}
<section class="bg-fg text-base">{{content}}</section>
{{else}}
<section class="bg-base text-fg">{{content}}</section>
{{/if}}Returns: Boolean