Design mode

Design is the visual canvas, the view for shaping structure and style. Switch to it with Design in the View control on the pane's context bar, 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. Design opens with the whole set already framed to fit the pane, and you can pan and zoom from there. The zoom pod floats at the canvas's bottom-right, and the fit you leave a document on is the one it comes back to. 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:

• Outline panel : the page's structure as a tree. Select one element or a whole range, rename, reorder, and act on them together.

• Insert palette : add HTML elements and your components by click or drag.

• Content tab : attributes, link targets, component props, and page settings for the selection.

• Style inspector : visual CSS controls for the selection, under a Target Line that states exactly what an edit will change.

• 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.

• Project Styles : 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 in The canvas : selection, drag and drop, and the context menu

• Make it interactive in Logic

• The underlying style format is documented in Styling