Studio tour
The Studio is the main editor view. Here’s what each area does.
Topbar
Section titled “Topbar”The bar across the top contains:
| Element | What it does |
|---|---|
| Project menu | New site, make a copy, rename, delete; Export Project / Import Project |
| Edit menu | Undo / Redo / Clear canvas |
| View menu | Preview, View Code, dark mode, replay animations, outline, fullscreen |
| Settings menu | Opens a dropdown to jump to any settings tab (SEO, fonts, AI, deployment, …) |
| Deploy menu | Deploy to the configured provider, open Deployment settings, or export ZIP |
| Site title | Editable — click the pencil icon to rename |
| Device selector | Switch canvas between desktop, tablet, and mobile views |
| Dark mode toggle | Preview the site in dark mode |
| Zoom controls | Zoom in / out on the canvas |
Left sidebar
Section titled “Left sidebar”| Tab | What it does |
|---|---|
| Components | Drag individual elements (buttons, images, icons, …) onto the canvas |
| Blocks | Drag-and-drop block library (layout, typography, media, …) |
| Layers | Hierarchical view of all components on the current page |
| Pages | Add, rename, reorder, and delete pages |
| Assets | Browse and manage uploaded images and fonts |
| Symbols | Reusable elements shared across pages |
Canvas
Section titled “Canvas”The central editing area. Click to select a component, drag to reposition it, double-click to edit text inline.
The bottom edge of the canvas shows the canvas breadcrumb for the current selection. Use it to see the selected element’s path, jump to a parent element, or open hidden ancestors when the path is too long.
→ Layers and canvas breadcrumb guide
Right sidebar
Section titled “Right sidebar”| Tab | What it does |
|---|---|
| Design | CSS properties for the selected component (layout, spacing, typography, …) |
| Settings | Component-specific settings (link href, image src, animation, …) |
| AI Builder | AI chat panel — describe changes and let AI edit the page for you |
Theme panel
Section titled “Theme panel”The Theme section inside Settings contains the global design tokens — colors, typography scale, dark mode, animation defaults, and advanced theme overrides. Changes here affect the entire site.