Live UI Editor

Visual React/Vite editing inside VS Code — drag, resize, rotate, and edit text with live source code updates.

Features • Quick Start • How It Works • Docs • Contributing

✨ Features

🚀 Quick Start

Installation

From VS Code Marketplace:

1. Open VS Code
2. Press Ctrl+Shift+X to open Extensions
3. Search for "Live UI Editor"
4. Click Install

Or install via command line:

code --install-extension TheImmersiveSaga.vscode-live-ui-editor

First Launch

1. Open your React/Vite project in VS Code
2. Press Ctrl+Shift+P → type "Live UI: Open (App Mode)"
3. Start editing — click, drag, resize, or double-click text

That's it! Your changes are staged and ready to apply.

🎮 Controls

🔧 How It Works

┌─────────────────────────────────────────────────────────────┐
│                         VS Code                              │
│  ┌─────────────────┐    ┌─────────────────────────────────┐ │
│  │   Your Source   │◄───│         Live UI Editor          │ │
│  │    Files        │    │  ┌───────────────────────────┐  │ │
│  │  (JSX/TSX)      │    │  │   Your Vite App (iframe)  │  │ │
│  └─────────────────┘    │  │                           │  │ │
│          │              │  │   [Visual editing here]   │  │ │
│          ▼              │  │                           │  │ │
│  ┌─────────────────┐    │  └───────────────────────────┘  │ │
│  │   AST Parser    │    │              │                   │ │
│  │   (ts-morph)    │    │              ▼                   │ │
│  └─────────────────┘    │     Pending edits staged         │ │
│                         │     Click "Apply to Code"        │ │
│                         └─────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

1. Proxy Server — Routes your Vite dev server through VS Code
2. Injected Script — Adds selection, dragging, and editing UI to your app
3. React Fiber Inspection — Maps DOM elements back to source code locations
4. AST Modification — Uses ts-morph to surgically edit your source files

📖 Documentation

Editing Modes

Toggle with the Switch to Browse/Edit button in the toolbar.

Layout Apply

By default, layout changes (drag/resize) are preview only.

• OFF (default): See visual changes, but they won't save to code
• ON: Drag/resize writes width, height, transform to source

Enable via the checkbox in the toolbar when you want to commit layout changes.

Stable IDs (Recommended)

For reliable element targeting, enable Stable IDs:

1. Click Enable Stable IDs in the toolbar
2. The extension injects data-lui attributes via a Babel plugin
3. Restart your dev server

This ensures elements are uniquely identifiable even after HMR updates.

i18n Support

The extension auto-detects {t('translation.key')} patterns:

• Text edits update your src/locales/*.json files
• The JSX source stays unchanged
• Supports nested keys like common.buttons.save

📋 Requirements

Framework Support

🐛 Troubleshooting

🤝 Contributing

Contributions are welcome! Here's how:

1. Fork the repository
2. Clone your fork: git clone https://github.com/YOUR_USERNAME/VSC-Live-UI-Editor.git
3. Install dependencies: npm install && cd webview-ui && npm install
4. Build: npm run build
5. Test in VS Code: Press F5 to launch Extension Development Host
6. Submit a pull request

Development Scripts

npm run build          # Build extension + webview
npm run watch:extension # Watch mode for extension
npm run build:webview   # Build webview UI only

📄 License

MIT License — see LICENSE for details.

🔗 Links

• Marketplace: VS Code Marketplace
• Repository: GitHub
• Issues: Report a bug
• Discussions: Ask questions

Made with ❤️ by ChaosTimTom
_{Visual editing for developers who want to see their changes instantly.}