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.
Reorder by hand
Move any element up or down with the floating toolbar, Alt+arrow keys, or just drag it: a grip handle and drop indicator show exactly where it will land. Works in plain HTML and React, and every move is a surgical, undoable edit to your source.
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.
Fix drift in one click
The compliance panel lists every off-system value on the page with the nearest token suggested for each. Click Fix to swap it in, or Ask AI for the awkward ones, and watch the score climb as the page comes back on-system.
Your design system, in-app
The Design tab puts your tokens, components and guidelines inside Live. Edit a token and the page updates instantly, with light and dark modes handled separately. No rebuild, no switching to the Studio.
Ask the AI and watch it come back
Pin a request to any element and hand it to Claude Code, Cursor or any MCP agent with full context and a screenshot attached. The pin sits amber while pending, turns blue while the agent works, and goes green when it reports back with a resolution note.
One queue for the whole team
Connect your org and requests sync to a shared cloud queue. Teammates see them in their own Live and can adopt them, the Live Requests page in the Studio dashboard tracks the lot, and a webhook posts each new request to Slack or Discord.
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.