Visual Editor Pro

Edit React, Next.js, or Vite apps visually with changes saved to source files.

Quick Start

1. Install the Chrome Extension

Load the extension from extension/ folder:

1. Open chrome://extensions
2. Enable "Developer mode"
3. Click "Load unpacked" and select the extension folder

2. Start the API Server

# In your project folder
cd my-nextjs-app
npx visual-editor-pro

3. Start Editing

1. Open your app in Chrome (any URL - localhost, staging, production)
2. Click the purple ✏️ button
3. Click any element to select it
4. Edit styles or code in the panel

That's it! No proxy, no code changes, works with any dev server.

How It Works

• Chrome Extension injects the editor UI into any webpage
• API Server reads/writes your local source files
• Your Dev Server runs normally on its own port
• HMR picks up changes automatically

Features

• Click to select any element
• Drag to move elements around
• Resize handles for width/height
• Edit any CSS property in the sidebar
• Undo/Redo with Ctrl+Z / Ctrl+Y
• Changes saved directly to your source files

How It Works

1. The editor injects a floating UI into your app
2. When you make changes, they're sent to the dev server
3. AST manipulation updates your actual source files
4. Your framework's HMR reloads with the changes

License

MIT