Documentation

How to install Stacki, what every panel does, and how to build, style, and ship an Astro site without leaving the canvas.

Stacki is a desktop app that edits the Astro project you already have. It runs the project's own dev server, renders it on a canvas, and writes every change back as ordinary .astro source.

If you have never opened it before, start with Introduction. Otherwise, everything is below, or press ⌘K and search for it.

Getting started

IntroductionWhat Stacki is, what it edits, and what it deliberately leaves alone.Install StackiDownload a build for macOS or Windows, or run it from source, and what your machine needs first.Quick startOpen a project, make your first edit on the canvas, and see it land in the file.

The interface

The interfaceA tour of the window, its title bar, left rail, canvas and the two right-hand tabs.The canvasSelecting on the page, breakpoints, drilling into components, and preview mode.PagesCreating, moving, renaming and deleting the pages and folders behind every route.ComponentsThe palette of everything in src/components and src/layouts, and how to get one onto the page.AssetsBrowsing, uploading and organising the files under public/ and src/, and picking one for a prop.

Building pages

Inserting elementsComponents, HTML tags, loops, conditions, text, code, style and script blocks, from the ⌘E palette.Props and settingsTyped fields generated from each component's Props interface, plus tag, class, attributes and slots.Loops and conditionsRepeating markup over data and showing it conditionally, as nodes you can select.Binding to dataDropping real content into props, with the values shown beside the fields you can pick.Editing codeThe code fallback, the floating editor, and what happens to markup the visual model can't hold.

Styling

The style panelA visual CSS editor that writes into your stylesheets, its sections, sources and the cascade.Classes and statesWhat a rule applies to, hover and focus, and reading the cascade honestly.BreakpointsWhich media query an edit lands in, and how the breakpoint cascade is shown.VariablesYour CSS custom properties as editable tables, with themes as columns and live accessibility checks.

Content

Content collectionsBrowsing collections, editing entries against their schema, and the formats Stacki reads.Dynamic routesEditing a page that renders many entries, and choosing which one the canvas shows.

Shipping

Git and GitHubCommitting, pushing, switching branches with uncommitted work, and publishing a new repo from the branch chip.How editing worksThe model behind the canvas, what is parsed, what is written back, and why your diffs stay small.TroubleshootingThe preview will not start, the page opens as code, a click selects the wrong thing, and what to do.

Reference

Keyboard shortcutsEvery shortcut in Stacki, grouped by what it acts on.