Layout

The Widget Builder uses three core technologies for creating widget layouts. Together, they let you build anything from a simple text display to a fully interactive, data-driven widget.

Technologies

Technology	Purpose	Learn more
HTML	Structure your widget's content using standard HTML elements	HTML Guide
Handlebars	Add dynamic content, conditionals, loops, and data binding	Handlebars Guide
Tailwind CSS	Style your widget with utility-first CSS classes	Tailwind CSS Guide

Layout Context

Your widget layout has access to several data objects -- settings, API response data, user information, page context, and custom variables. See the Layout Context reference for all available properties.

Quick Example

Here's a minimal widget layout combining all three technologies:

<div class="p-4 bg-white rounded-lg shadow">
  <h2 class="text-lg font-bold text-gray-800">
    {{t "greeting"}} {{user.firstName}}!
  </h2>

  {{#if data}}
    <ul class="mt-2 space-y-1">
      {{#each data}}
        <li class="text-sm text-gray-600">{{this.name}}</li>
      {{/each}}
    </ul>
  {{else}}
    <p class="text-sm text-gray-500">{{t "noData"}}</p>
  {{/if}}
</div>