The canvas
Selecting on the page, breakpoints, drilling into components, and preview mode.
The canvas shows the page as the dev server renders it. It is the real site, not an approximation: your CSS, your scripts, your fonts.
Selecting
- Click anything to select it. The Navigator opens and scrolls to the node.
- Double-click a component to open it — the canvas dims everything outside that component and you edit its own file. Esc backs out one level.
- Clicking chrome the layout renders itself — a header or footer outside the
page’s
<slot>— selects the layout, because that markup belongs to it.
The breadcrumb above the canvas shows the path to the selection; clicking a crumb selects that ancestor.
Breakpoints
| Button | Key | Width |
|---|---|---|
| Desktop | 1 | Fills the canvas |
| Tablet | 2 | 768px |
| Phone | 3 | 375px |
| Canvas | 4 | Every breakpoint side by side |
Drag the frame’s side or bottom handle to set any width by hand. The highlighted button is the breakpoint the page is actually laying out in — squeeze the window with Tablet selected and the highlight moves to Phone, because that is what the page is getting.
Which breakpoint is active also decides where the style panel writes. See breakpoints.
Edits patch, they do not reload
Astro cannot hot-swap a server-rendered component, so an edit would normally mean reloading the document — restarting animations, rewinding video, dropping scroll position and closing anything the page had open.
Stacki catches that reload and turns it into a patch: the server’s previous rendering is diffed against the new one and only the difference is applied. Work the page’s own scripts have done appears in neither rendering, so it survives untouched. Anything that cannot be lined up falls back to a reload.
Preview mode
The preview button in the title bar steps into the running site: links work, scripts run, and no editor chrome is drawn over it. Esc exits, and the editor follows you to whichever page you navigated to.
For a page with a dynamic route, the canvas renders one entry — the picker in the title bar chooses which. You are always editing the template; the entry only changes the data it is rendered against.