Stop prompting for padding.
Layout Live turns your real running app into a canvas. Click an element, scrub its spacing, swap a colour for a design token, and the change is written straight back to your source as a Tailwind class. No cloud sandbox, no AI tokens spent, just your dev server hot-reloading real edits.
Free alpha · macOS (Apple Silicon & Intel) · Intel Mac build
Click to select
Point Live at your local dev server and click any element in the running app. An overlay highlights it and the properties panel fills with that element's real classes, and selection survives hot-reload.
Scrub, don't prompt
Drag padding, margin, gap, font size, weight and radius. Every drag is an exact value that snaps to your design tokens, with a live compliance score. No 10-second AI round-trip for a 4px nudge.
Edits write to source
Every change is an AST edit to your actual Tailwind classes, not an overlay or a runtime patch. Your own dev server hot-reloads it, and the diff is real, committable code.
Hand off to AI
When a tweak needs real logic, hand the selected element and your recent edits to Claude Code (or any agent) via the Layout MCP server. The agent picks up exactly what you changed.
Three steps to your first edit.
You'll need Node installed for the CLI step. Works with any React + Vite or Next project using Tailwind.
Download & install
Grab the Mac app above, open the .dmg, and drag Layout Live to your Applications folder. It’s signed and notarised by Apple, so it just opens, with no security warnings.
Wire up your project
In any React + Vite or Next project with Tailwind, run the one-line setup. It adds the Live plugin (so clicks map to source) and, optionally, a design-system kit.
npx @layoutdesign/context install --liveOpen it on your app
Start your dev server, then launch Live bound to it with one command, no URL to type. Click an element and start scrubbing.
npm run dev
npx @layoutdesign/context liveNew here? Follow the Gallery → Live walkthrough or read the full docs.
You're testing the alpha. Tell us everything.
Layout Live updates itself automatically as we ship fixes. If something won't edit, looks off, or you have an idea, the fastest way to reach us is Discord. Layout only touches your local project files and a periodic update check. Nothing else leaves your machine.