Preview URL

The Preview URL is the site the preview panel loads. Every project has one, set when you create the project and changeable any time.

Changing it

Click the globe icon in the preview panel header, enter a URL, and save. The panel reloads immediately.

The URL has to be a valid http or https address. http://localhost:5173 is fine, since the preview runs in your browser and can reach your own machine.

What to point it at

The default. New projects start at https://radium.style, a component library already wired to Bezel. Good for evaluating tokens against real components before you have a site of your own.

Your deployed site. A staging URL works well for reviewing tokens against the real thing.

Your dev server. The tightest loop: run your app locally, point the preview at it, and see token changes land in your actual components.

Getting live updates

Pointing the panel at your site makes it render. Making it respond to token edits takes one more step. Your app needs to run the receiver from @bezel-labs/crystal, which listens for the CSS Bezel posts in and applies it.

The Quick Start has the setup, including the guard that keeps it out of production builds.

Without the receiver, the preview still works. You just see the site as it's built, not as you're editing it.