A tour of the builder

The canvas, the Navigator, the Design and Style tabs, Preview and Code view.

4 min readGuide 3 of 20

The canvas

The canvas renders your real Astro project. Click a block to select it. Selection stays in sync with the Navigator.

Navigator

The Navigator shows the structure of the page as a tree. Use it to select nested blocks that are hard to click on the canvas, and to reorder sections.

Design and Style tabs

Design: the content and layout of the selected block, such as text, links, images and arrangement.
Style: typography, spacing, color, borders and effects, per breakpoint.

Preview and Code view

Preview shows the page as visitors see it. Its page inspector holds the page's SEO settings. Code view opens the Monaco editor and a terminal, on plans that include code access.

See it in the productVisual editorSelect any block and shape it in Design and Style.