Theme Editor

Tune a React and Tailwind v4 theme live with a floating visual editor.
Development only, and it exports your theme as CSS or JSON tokens.

Install

Theme Editor adds an inspector to a running React app, for designers and developers who want to tune a visual system on the real product instead of in a mockup.

• Adjust color, type, surfaces, shape, states, elevation and motion while the app runs.
• Generate whole themes or accent families, with undo and a compare-to-original view.
• Export the result as reusable CSS or JSON tokens.

How it works

Theme Editor ships as a Codex skill. In a React and Tailwind v4 project, the skill reads your real CSS variables, copies in the editor, and connects only the controls your components actually use, through a small adapter that keeps your own token names. The editor renders only in development and saves its state in the browser. What it includes and how the skill installs are in docs/how-it-works.md.

Install

curl -fsSL https://raw.githubusercontent.com/madebysan/theme-editor/main/install.sh | bash

It installs to ~/.agents/skills/theme-editor (set THEME_EDITOR_SKILLS_DIR for another folder). Start a new Codex task and invoke $theme-editor in your project. Product principles are in DESIGN.md.

---

MIT

Made by santiagoalonso.com