Workspace Overview
The workspace keeps structure, visual editing and code in one screen, so most tasks never need a context switch.
Header
The header holds project-level actions in three zones.
Left zone
The arrow goes back to Projects. Next to it are the project name and, for everyone except guests, a gear that opens Project settings. In Preview mode the arrow exits Preview and a page selector moves between routes.
Center zone
Breakpoint buttons for auto, desktop, tablet and
phone change the viewport, and its current dimensions show next to them.
Right zone
It shows who is online, collaborators (for the owner) and versions, then Undo and Redo, the Agent/Design/Code toggle, Preview, Publish, and your account menu at the far right.
Working columns
Left column, structure and files
Pages / Components, Elements and Files live here. They manage routes, hierarchy and project assets.
Center, the canvas
Select elements on the page and reorder them with drag and drop. Breadcrumbs move you through nested structures.
Right column, edit panels
The right column changes with the mode. Design shows Element and Styles, Code shows HTML and CSS, and Agent shows the conversation with Lediv Agent. The element selected on the canvas drives what these panels show.
Modes and behavior
- Design/Code swaps the right-side panels and keeps the same page context.
- Preview shows the rendered page without the editing layout.
- Esc exits Preview.
Practical flow
Pick the page and adjust structure on the left, select and arrange elements on the canvas, refine details on the right, check the result in Preview, then publish.