JSPM

repaint-plugin

0.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 25
  • Score
    100M100P100Q95041F
  • License MIT

Run npx repaint-plugin in your project — bridges the Repaint Chrome Extension to your source files for 100%-accurate visual-to-code diffs

Package Exports

  • repaint-plugin
  • repaint-plugin/src/startup.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (repaint-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

License

MIT

repaint-plugin