The Editor
Open a project and you get four regions: the side nav, the center panel, the AI assistant, and the preview. Here's what each one does.
The three tabs
At the top of the side nav are three tabs. They're the main thing to understand, because they change both the side nav and the center panel:
| Tab | Side nav shows | Center panel shows |
|---|---|---|
| Design | The Guides list of nine guided workflows | The guide you selected |
| Tokens | Your token group tree, plus the Context section | The token table for the open group |
| Code | The Files tree from your linked repo | A read-only file view |
New projects open in Tokens.
Design shows a lock unless your plan includes AI credits, since the guides generate tokens for you.
The Context section
Above the group tree in the Tokens tab is the Context section, holding the Theme selector. This is where you switch between themes and add new ones. Whichever context is active affects both the token table and the preview.
Every project starts with $root, shown as $root (default).
The center panel
The panel header carries the breadcrumbs for where you are, the sparkle icon that opens the AI assistant, and a fullscreen toggle that expands the panel over the whole editor.
The app header
Left to right:
- Version — the current version number, linking to your releases
- Publish — the paper plane, which opens the publish popover
- Download project — your tokens as a
design-tokens.jsonfile - Theme toggle — light or dark, for the Bezel UI itself
- Preview toggle — show or hide the preview panel
Publish and the version link only appear on plans that include version history.
The preview panel
On the right, rendering a real site with your current tokens. See Live Preview.