Workspace Overview
The workspace keeps structure, visual editing, and code controls connected in one screen. Once each area is clear, most tasks can be completed without switching context.
Header
The header is the control bar for project-level actions. It is split into three zones.
Left zone
The logo menu includes quick actions like going back to Projects and Undo/Redo. In regular edit mode, this area shows the current project name and edit action. In Preview mode, it switches to a page selector for route navigation.
Center zone
This area controls viewport inspection. Breakpoint buttons are available for
auto, desktop, tablet, and phone, with
current viewport dimensions shown next to them.
Right zone
This side includes account access from the user button, the Design/Code toggle, Preview, and Publish. It is the fastest way to move between editing, checking, and output tasks.
Working columns
Left: Structure and files
The left column is the structural source of truth. It includes Pages / Components, Elements, and Files. Routes, hierarchy, and project assets are managed here.
Center: Canvas and context
The center is where layout work happens directly on the page. Elements can be selected and reordered with drag and drop, while breadcrumbs help move across nested structures quickly.
Right: Edit depth
The right column changes by mode. In Design, it shows Element and Styles. In Code, it shows HTML and CSS. Selected elements on canvas drive what appears in these panels.
Modes and behavior
Mode changes are consistent and predictable:
- Design/Code swaps the right-side panel set while keeping the same page context.
- Preview switches to a cleaner rendered view and hides the normal editing layout.
Escexits Preview and returns to the standard workspace.
Practical flow
A common editing cycle is to choose page context and adjust structure in the left column, select elements and reorganize them on the canvas, refine details in the right column, check in Preview, and then move to Publish. This keeps structure, design, and output decisions aligned throughout the same session.