How it works
Your running app is the editor.
ThemeLab is a local command-line tool. It sits in front of the dev server you already run and gives you a visual editing layer on top of your real app — every change you confirm is written straight back into your source files. No prompts to write, no files to hunt through, and no AI in the loop unless you ask for it.
The core idea
Most ways of changing a UI ask you to leave the thing you are looking at: switch to the editor, find the right file, find the right line, make the edit, switch back, wait for reload. ThemeLab collapses that loop. Because it proxies your dev server and injects an overlay, the page in your browser is your app — but now every element is selectable and editable. What you see is literally what you are editing.
Nothing about your project changes to make this work. There is no plugin to add to your bundler, no provider to wrap your app in, and no build step. ThemeLab reads the React tree at runtime to map pixels back to components, and writes edits back as ordinary code changes you can review in git like any other diff.
The loop, step by step
Run it next to your dev server
Start your React app as usual, then run themelab in a second terminal from the same project root. It opens a local reverse proxy in front of your dev server and injects a small overlay into the page — your app's source is never modified, and the overlay lives in its own Shadow DOM so its styles can't leak into (or inherit from) your UI. Auto-detection finds your dev port; pass it explicitly if needed.
Click to select any element
Hover and click an element on your running app. ThemeLab walks the React Fiber tree (via getOwnerStack on React 19, with a fiber-walk fallback on React 18) to resolve exactly which component rendered it — its name, the source file, and the line number. You can also move through the hierarchy — parent, child, siblings — from the keyboard or the sidebar.
Edit visually
Change Tailwind classes from grouped controls — Layout, Spacing, Size, Typography, Background, and Border — including DevTools-style flex alignment, a text-case toggle, and radius/width/color/style. Pick colors from the full Tailwind v4 palette or bind a property to a theme variable. Edit your shadcn/Tailwind theme tokens (the CSS variables in :root and .dark) with live preview and a light/dark toggle. Double-click text to rewrite it inline; copy, paste, duplicate, delete, and reorder siblings.
Confirm — changes write to source
Stage as many edits as you like, then hit Confirm. Each change is applied by a deterministic jscodeshift AST transform that edits your actual source files in place — not a screenshot, not a diff to copy. The browser updates immediately. Reordering an item rendered by a .map() reorders the matching entry in the underlying data array, not the JSX.
Deterministic by default
Every edit ThemeLab applies is a precise, rule-based transform of your code — the same input always produces the same output. That means changes are predictable and reviewable: a class added here, a token updated there, a node moved in a list. There is no model guessing what you meant and no risk of an edit quietly rewriting code you did not touch.
AI assist — optional, and only a locator
A few cases are genuinely ambiguous in source: an element rendered by a .map(), a reused component instance, conditional or state-dependent rendering, or a component that outputs a different host tag than its name suggests (a Link that renders an a). For those, you can turn on an AI locator. It reads your source to find the exact node to edit — and then hands control back. The change itself is still applied by the same deterministic AST transform. The AI only locates; it never writes your code.
It is off by default and runs only when you configure an ANTHROPIC_API_KEY. When an edit would affect more than the selected element — a .map() template or a shared component — it asks you to confirm first, and it caches what it finds so repeated tweaks stay instant. If it truly cannot find the element, it tells you why rather than guessing.
It talks to your coding agent too
While ThemeLab is running it also exposes a small MCP server on localhost, so a coding agent like Claude Code or Cursor can read what you are doing in the overlay. Click a component in the browser and your agent knows the exact file and line — no more “which Button did you mean?”. It can ask for the current selection, the resolved theme tokens, the Tailwind token map, or where a component lives in the source.
What you need
- Node.js 20+ and a React project (18+)
- A running development server
- Next.js, Vite, or Create React App
- Tailwind CSS is recommended for the property editor; text and structural edits work without it.