Elements and HTML

Three synchronized views edit structure and markup. Elements shows the hierarchy, Element edits the selected node visually, and HTML edits the markup directly in Code mode.

All three work on one context at a time, the component that contains the selected element, or the current page when nothing is selected. The Elements panel header shows the active context.

Use Elements for structure work

Most layout work starts in Elements. The tree and the canvas stay in sync, so selecting or reordering in one shows in the other right away.

Add nodes from Add element, which lists built-in groups and your project components.
Move nodes with drag and drop in the tree or on the canvas.
Copy, paste and delete from the context menu or with shortcuts.

Switch to HTML for precise markup edits

For code-level control, switch to Code mode and use the HTML panel. It suits fine-grained markup changes, attribute cleanup and dense structures. Edits in HTML update Element and the canvas immediately, and edits in Element update the HTML.

Styling is covered in Styles and CSS.

Working with component nodes

Double-click a component instance in the Elements tree to open that component and edit its inside.

Next steps

Styles and CSS Apply visual styles and refine CSS source. Expressions Bind dynamic values into text and attributes. Pages and Components Define routes and reusable blocks in one model.