The top bar holds undo/redo, element creators (in Studio), AI Tools, zoom, the timeline toggle, the Design/Preview switch, the Focus⇄Studio toggle, comments, and Publish.
Where: Top of the editor — Always visible
Key ideas
- Studio vs Focus: Studio shows element-creation tools and boolean ops; Focus shows a calm bar (history, zoom, mode, publish).
- AI Tools: Quick gens, Logo Studio, and the Image Editor.
- Publish: Publish to staging/production, connect a domain, export a ZIP, or download code.
Steps
- Use undo/redo and zoom on the left/right.
- In Studio, add shapes/text/media/interactive elements.
- Toggle Design/Preview and Focus/Studio.
- Open Publish to ship.
Always-available project controls
- Undo/redo history.
- Zoom and viewport navigation.
- Timeline open/close.
- Design/Preview/Content mode where available.
- Focus/Studio experience switch.
- Comments and unread review activity.
- Publish/export actions appropriate to website or video mode.
Studio creation controls
Studio exposes element creators and related direct-design actions. Focus keeps a calmer set of project and navigation controls while creation and editing remain available through the Insert panel, AI, and floating property bar.
Format-specific actions
The bar can also expose SVG import, Figma file import, PDF export, video render/presentation actions, and save status when those capabilities are relevant.
Tips
- Treat the top bar as project/navigation state and the sidebars as selection/content state.
- Check save status before leaving after a large or connection-sensitive edit.