Skip to main content

Using Live Preview

Picking what to look at​

On the default Radium Storybook, use the sidebar inside the preview to choose what's on screen. Which one to reach for depends on what you're checking:

  • Reviewing a color palette? A Page like Auth or Dashboard shows the colors working together in a real layout
  • Checking font choices and readability? A page with real body copy beats an isolated component
  • Tuning one component's tokens? Open it directly under Components

Editing and watching it update​

The editor and preview sit side by side, so you get feedback without switching context. It's most useful in the Design guides. Drag the spacing slider and watch the gaps between components move, or change a font and see it load in place.

If a token is mid-edit and temporarily invalid, the preview keeps showing the last good state rather than blanking out.

Checking different widths​

The device tabs in the preview header resize the frame to common breakpoints: desktop, tablet, and mobile. Because it's your real site in an iframe, its own responsive rules apply, so this is a genuine check rather than a mockup.

Fullscreen expands the preview over the whole editor, which is where the widest sizes are worth looking at.

Checking a theme​

The preview uses whichever context is active in the Context section of the side nav. To check your dark theme, switch the Theme selector to it and the preview updates right away. Switch back to compare.

This is the fastest way to catch a token you meant to override in dark mode but never did: if something doesn't change when you switch, it's inheriting from $root.

When the preview doesn't update​

A few things worth checking, in order:

  1. Is the Preview URL reachable? If it's a local dev server, make sure it's still running. See Preview URL.
  2. Is the receiver running? Your own app only accepts live updates if it runs the @bezel-labs/crystal receiver, and only in development if you guarded it that way.
  3. Do the variable names match? The panel pushes CSS built with the default naming. If your build sets a custom nameExtension, the pushed variables won't match the ones your site uses.