Design mode

Design is the visual canvas — the mode for shaping structure and style. Switch to it with the Design button in the mode switcher on the right side of the toolbar, and Studio renders the open page or component with the real runtime, exactly as it will render in production, while you edit it directly.

A canvas per breakpoint

Instead of one canvas you resize, Design shows a live panel for every breakpoint your project defines — phone, tablet, and desktop side by side, each labeled with its name and width. Your responsive rules evaluate for real in each panel, so a change that only applies on small screens shows up only in the small-screen panel. Click a panel's header to make that breakpoint the active one for styling, and pan and zoom the surface to fit — see The canvas for the controls.

Breakpoints themselves — where they come from and how overrides cascade — are covered in Breakpoints .

The panels around the canvas

Design mode is the canvas plus a set of panels, each with its own page:

• Layers panel — the page's structure as a tree: select, rename, reorder, and act on any element.

• Elements panel — insert HTML elements and your components by click or drag.

• Properties panel — attributes, link targets, component props, and page settings for the selection.

• Style inspector — visual CSS controls for the selection, section by section.

• Hover states and selectors — style :hover , :focus , and selectors of your own.

• Design tokens — name your colors, fonts, and sizes once and reuse them everywhere.

• Stylebook — set the default look of every heading, button, and link in one catalog.

• Working with components — turn a selection into a reusable component, wire props and slots.

• Repeaters — turn one element into a repeating, data-bound list.

Next

• Learn the shared canvas interactions — selection, drag and drop, the context menu — in The canvas

• Make it interactive in Script & logic

• The underlying style format is documented in Styling