Skip to main content

Live Preview

The preview panel on the right side of the app renders a real site using your current tokens. Change a value and the site restyles, with no reload and no export step.

What it loads​

The panel loads whatever site is set as your project's Preview URL. New projects start pointed at radium.style, a component library already wired to Bezel, so there's something real to look at from the first token you change.

You can point it at your own app instead: a deployed staging site or your local dev server. See Preview URL.

Moving around inside the preview​

The preview is a real site, so you navigate it the way you'd navigate that site. With the default Radium Storybook that means using Storybook's own sidebar inside the panel:

  • Pages — full-page examples like Auth, Dashboard, and Marketing. Best for judging a change in context, where spacing and hierarchy actually show
  • Components — every component on its own, from Accordion through Tooltip. Best for checking one thing closely

Which you want depends on the change. Reviewing a color ramp or border radius? A page shows you how it reads in a real layout. Tuning one component's tokens? Go straight to it in the components list.

Pointing the panel at your own app instead means navigating your app's own routes.

How your edits get there​

Bezel doesn't rebuild the site. It generates CSS custom properties from your tokens and posts them into the preview frame, where they're applied over the site's own styles. Edits are batched briefly so dragging a slider doesn't fire hundreds of updates.

For this to work on your own app, the app has to listen for those updates using @bezel-labs/crystal. Without it the preview still loads your site; it just shows it as deployed, without live token changes.

Themes​

The preview follows whichever context is active in the Context section of the side nav. Switch the Theme selector to dark and the preview re-renders in that theme, so you can check both without leaving the editor.

Showing and hiding it​

The preview toggle in the app header hides the panel and gives the center panel the full width, which helps when you're doing bulk work in the token table.

Next: Preview URL to point it at your own app, or Using Live Preview for the day-to-day workflow.