The interface

The window is in four parts: a title bar across the top, an icon rail with its panel on the left, the canvas in the middle, and the Style and Settings tabs on the right.

Title bar

Piece	What it does
Project name	The folder you opened
Page switcher	Jumps between pages; shows a back chip while you are inside a component
Status dot	Dev server state — green when it is serving
Reload	Re-renders the canvas from the server
URL field	The address the canvas is showing. Type a route into it to go there
Entry picker	On a dynamic route, which entry the canvas is rendered against
Open in browser	Opens the same URL in your normal browser
Preview	Steps into the running site so you can click through it. Esc comes back
Branch chip	Branch, dirty state, commit, push, switch, publish

Left rail

Six panels, one icon each. Clicking the icon of the panel already open collapses it, which gives the canvas the whole window.

Panel	Key	What is in it
Pages	P	Every page in src/pages, with folders
Navigator	Z	The open page’s tree
Components	⇧A	Everything in src/components and src/layouts
Assets	J	Files under public/ and src/
CMS	⌥C	Content collections and their entries
Variables	—	CSS custom properties from your stylesheets

Canvas

The canvas is the project’s own dev server in a frame. Above it sit the breadcrumb for the current selection and the breakpoint buttons; the frame itself can be dragged to any width from its edges. See the canvas.

Right panel

Two tabs over the same selection:

• Style (S) — the visual CSS editor. Layout, size, spacing, typography, backgrounds, borders and effects, with classes, states and the cascade. See styling.
• Settings (D) — the selected component’s props, generated from its Props interface, plus its tag, class, attributes, comment and slot. See props and settings.

The right panel appears when the open page is editable. A page whose markup Stacki does not model visually opens in the code editor instead — see editing code.