A canvas that patches
The preview is your project's own dev server. Edits are diffed into the rendered page instead of reloading it, so scroll position, open menus and running animations all survive the change.
Stacki 0.1.8 is out
Build Astro sites visually
A desktop visual builder for the Astro project you already have. Design on a live canvas and save clean .astro source you would have written by hand.
- Edits your real .astro files
- Runs your project's own dev server
- No account, no cloud, no lock-in
Navigator
BaseLayoutSectionContentWrapperEyebrowHeadingParagraphButtonWrapperButtonImg
Heading
StyleSettings
hero_heading
Layout
Displayflex
Directioncolumn
Gap24px
Padding48 32
Typography
Colorvar(--text)
Sizeclamp(3rem, 7vw, 5rem)
Features
Every part of the page, in one place
Stacki reads your project the way Astro does — components, props, slots, collections and stylesheets — and gives each one a surface you can work in.
Style, not stylesheet hunting
Layout, spacing, type, borders and effects — with classes, states and the cascade shown honestly.
Props read from your types
The settings panel is built from each component's Props interface. Unions become selects, booleans become switches.
Content collections, edited
Browse collections, edit entries against their schema, and follow references through to the entry they point at.
Your variables, as tables
Custom properties are read out of your stylesheets — one row per property, one column per theme, with live contrast checks.
Git without the terminal
Commit, push, switch branches carrying uncommitted work with you, and publish a new repository to GitHub.
Every breakpoint at once
Desktop, tablet and phone on one canvas, or drag the frame to any width you like.
Code, never taken away
Markup too complex for the visual model opens in the editor instead, still with live preview. Nothing is rewritten destructively.
Real source
It writes the file you would have
Pages are parsed into a model and written back as ordinary Astro. Your import style, your blank lines, your hand-wrapped prose — all kept, because a save that reformats the file is a save you can't review.
53/54
Real project files that round-trip byte for byte when nothing has been edited.
---
import Layout from "../layouts/BaseLayout.astro";
import Hero from "../components/Hero.astro";
import Card from "../components/Card.astro";
import { getCollection } from "astro:content";
const posts = await getCollection("blog");
---
<Layout title="Home">
<Hero heading="Ship it" variant="wide" />
{
posts.map((post) => (
<Card title={post.data.title} href={`/blog/${post.id}`} />
))
}
</Layout>How it works
From project to published, without leaving the app
- 01
Open your project
Point Stacki at any Astro project on your machine. It installs nothing, changes nothing, and starts the dev server for you.
- 02
Edit on the canvas
Click an element to select it. Style it, set its props, bind it to content. The preview patches in place as you type.
- 03
Commit and publish
Review the diff, commit, push, switch branches — or publish a brand-new repository to GitHub without opening a terminal.
Keyboard first
Built for people who don't reach for the mouse
Every panel has a key. Insert, duplicate, delete and undo work the same across CSS, content and assets, and breakpoints are a keystroke away.
Every shortcutShortcuts
- Insert element⌘E
- Style panelS
- Settings panelD
- NavigatorZ
- Components⇧A
- Breakpoints123