Quick start

Open a project

The start screen has two ways in:

• Open Existing Project… — pick any folder with an Astro project in it. Recent projects appear as cards underneath, each showing a picture of its home page.
• New Project… — pick an empty folder and answer the same questions npm create astro@latest asks. Stacki runs the real CLI, so you get a normal Astro project with nothing added to it.

Once a project opens, Stacki starts its dev server. The dot beside the URL in the title bar turns green when the server is up, and the canvas fills in.

Make an edit

1. Click something on the canvas. It is selected, and the Navigator on the left jumps to it in the tree.
2. Press S for the Style panel or D for Settings.
3. Change a value. The preview patches in place — no reload, no lost scroll position.

Edits are saved to disk automatically, about a third of a second after you stop typing. There is no save button and no separate “publish to preview” step: the file on disk is what the canvas is showing.

Add something

Press ⌘E to open the insert palette, type a few letters, and press Enter. Components from src/components, every HTML tag, and structural pieces like loops and conditions are all in the same list.

You can also drag a component out of the Components panel and drop it into the Navigator where you want it.

Commit it

The chip at the right of the title bar shows the current branch and whether the tree is dirty. Open it to write a commit message, commit, push, switch branches, or publish the project to a new GitHub repository.

Where to go next

• The interface — what every panel is for.
• Styling — the style panel, classes, states and breakpoints.
• Keyboard shortcuts — the whole list on one page.