Stop prompting for padding.
Layout Live turns your real running app into a canvas. Click an element, scrub its spacing, swap a colour, change an icon, or switch to Tablet and Mobile to edit responsive breakpoints in isolation. Every change writes straight back to your source as a Tailwind class. No cloud sandbox, no AI tokens spent.
Free alpha · macOS (Apple Silicon & Intel) · Intel Mac build
Click to select
Point Live at your running dev server and click any element. An overlay highlights it and the properties panel fills with its real classes. Or navigate the full DOM tree in the Layers panel and select from there. Either way, selection survives hot-reload.
Scrub, don't prompt
Drag padding, margin, gap, font size, weight and radius. Every drag snaps to your design system scale with a live compliance score. Switch to Tablet or Mobile and edits write to isolated breakpoint classes, leaving Desktop untouched. No AI round-trip, no tokens spent.
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. The Edits tab logs every change with before/after values so you can revert any single tweak without touching the others.
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.