repaint-plugin

Run npx repaint-plugin in your project to connect the Repaint Chrome Extension to your source files.

Visual changes you make in the browser get written back to your actual code — with Tailwind class mapping, TypeScript validation, atomic writes, and auto-backups.

Quick start

# From your project root (where package.json is)
npx repaint-plugin

That's it. Your browser opens, the app loads, and every element has a source stamp. Make a visual change in the Repaint extension — the file updates and HMR fires instantly.

What it does

Repaint Extension (browser)
  ↓  visual change (color, spacing, font...)
repaint-plugin (localhost:7778)
  ↓  maps CSS → Tailwind class
  ↓  finds the right line in your source file
  ↓  validates TypeScript (no broken builds)
  ↓  atomic write (backup first)
Your source file updated
  ↓  Vite / CRA / Next.js HMR fires
Browser updates instantly

Supported frameworks

| Framework | Detected by | Dev port | |-----------|-------------|----------| | React + Vite | vite.config.* + react | 5173 | | Create React App | react-scripts | 3000 | | Next.js | next | 3000 | | Vue + Vite | vite.config.* + vue | 5173 | | Angular | @angular/core + angular.json | 4200 |

Options

npx repaint-plugin --port 7778       # change proxy port (default: 7777)
npx repaint-plugin --verbose         # show all debug output

How it works

1. Detects your framework from package.json
2. Starts your dev server (or proxies one already running)
3. Proxy on port 7777 — intercepts responses and stamps every JSX/Vue/HTML element with data-rp-src="filePath:line"
4. API server on port 7778 — accepts write requests from the Repaint extension
5. On each write: backup → Tailwind map → AST edit → TypeScript validate → atomic file swap → HMR

Safety

• Backup before every write — stored in .repaint/backups/, last 10 versions per file
• TypeScript validation — change is never written if it would break your build
• Atomic writes — temp file → rename, no partial writes
• Git check on startup — warns you if there's no git repo
• Revert endpoint — POST localhost:7778/api/revert to restore any backup

What gets gitignored

On first run, .repaint/ and .repaint.json are added to your .gitignore automatically.

Production safety

Stamps (data-rp-src) are injected at the proxy layer only — they are never written to your source files. npm run build goes to your real dev server, not the proxy. Production builds are completely clean.

Requirements

• Node.js 18+
• Repaint Chrome Extension
• A supported framework project

License

MIT

repaint-plugin