Skip to main content

Live Preview

The preview panel lives on the right side of the app. It renders actual UI using your current project's tokens, so changes you make in the editor show up here immediately.

What it shows​

The preview renders UI templates: forms, marketing layouts, dashboards, blog pages. Your active tokens drive the colors, type, spacing, and everything else. It's a quick way to check whether your decisions hold up in a real interface before you export anything.

Templates​

A dropdown in the preview panel's top bar lets you switch between:

  • Components — buttons, forms, cards, the usual UI building blocks
  • Marketing — section-based layouts
  • Dashboard — data-heavy with tables and charts
  • Blog — long-form reading layout

Different templates stress-test different parts of your token system, so it's worth checking more than one.

Themes in the preview​

The preview always uses whichever context is active in the sidebar. Switch to dark in the CONTEXT section and the preview updates immediately. That makes it easy to spot issues with your dark theme without any extra steps.