Live UI Editor

Edit your UI visually — right inside VS Code.
Click to select, drag to move, inspect styles, and apply changes to source code instantly.

Join the Discord
_{Get help, share wins, and drop ideas/feedback.}

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

_{Click any element → edit styles, text, or layout → changes apply to your source code}

🧩 Works With

✨ Features

@ui-wizard redesign this page as a modern SaaS landing page
@ui-wizard give it a dark theme with glassmorphic cards
@ui-wizard restyle the entire layout as a portfolio

🧭 Two Editing Modes

Live UI Editor supports two ways of working:

1) Static HTML mode (no dev server)

• Open an .html file and edit it visually.
• Best for simple sites, prototypes, or when you don’t have a dev server.

2) App Mode (dev server)

• Connects to a local dev server (Vite/Next/etc.) and lets you edit your real running app UI.
• Changes are staged as Pending and you choose when to Apply to Code.

The extension’s Welcome / Quick Start screen helps you choose the right mode.

🚀 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"
3. In the Welcome screen, choose:

• Static HTML / No dev server, or
• App Mode (dev server)

4. Start editing — click, drag, resize, or double-click text

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

Need help, want to share wins, or have ideas/feedback? Join the Discord: https://discord.gg/QHnHhCjWDQ

🧠 First-Time Setup (Idiot-Proof)

Most people should run Live UI: Open and follow the Welcome screen.

App Mode needs a running dev server it can iframe.

1) Start / connect to your dev server

Run "Live UI: Open" (or "Live UI: Open (App Mode)") and the extension will:

• Try to auto-detect a running dev server on common ports.
• If none is found, it offers:
  • Start dev server (recommended) (in the integrated terminal)
  • Use existing URL (paste your dev server URL)
  • External window (starts dev server detached on Windows)

Notes:

• App Mode forces your dev server to bind to 127.0.0.1 (for consistent iframe/CSP behavior).
• Vite is started with --host 127.0.0.1 --port <port> --strictPort.
• Next.js is started with --hostname 127.0.0.1 --port <port>.
• If you paste a non-local URL, App Mode will require a safety confirmation.
• App Mode will refuse to apply edits to files outside your workspace/app root.

If your app also needs a separate backend/API server (for navigation, auth, data, etc.), use the Start Backend button in the App Mode sidebar.

• It can run a detected script like dev:api / dev:backend / server, or you can enter a custom command.
• It remembers your choice per app root for one-click starts.

2) Use Edit vs Browse mode

• Edit mode: hover highlight, click selects, drag/resize, double-click text.
• Browse mode: normal app interaction.

If UI Wizard says there is no selection, make sure you’re in Edit and click an element.

2.5) UI Wizard (Chat)

Live UI Editor includes a Chat participant named UI Wizard (ui-wizard) that can edit the currently selected element using plain language.

How to use it:

1. In App Mode, make sure you’re in Edit and click an element (so it becomes the current selection).
2. Open VS Code Chat (View → Chat).
3. Type @ui-wizard and describe the change.

Examples:

• @ui-wizard width 240
• @ui-wizard height 48
• @ui-wizard move right 20
• @ui-wizard x 40 y 12

It also supports:

• Style suggestions with preview/apply (suggest, preview, apply, undo)
• Bulk apply to groups (apply 1 to all buttons)
• Structural edits (add a header, wrap this in a box)
• Image helpers (use an image as the background)

Help:

• @ui-wizard commands
• @ui-wizard commands for layout
• @ui-wizard commands for bulk
• @ui-wizard commands for structure
• @ui-wizard commands for images

Page redesign (no element selection needed):

• @ui-wizard redesign this page as a modern marketing site
• @ui-wizard give this a dark theme
• @ui-wizard restyle the entire layout as a blog

CSS streams into the viewport in real-time. After reviewing, say apply to save or cancel to revert.

3) Fix “Identity: Unmapped” (highly recommended)

If the sidebar shows Identity: Unmapped, selection is working, but the editor can’t map that element back to source code.

Click Enable Stable IDs.

What it changes in your app:

• Writes live-ui-editor.babel-plugin.js into your app root (dev-only Babel plugin).
• Vite:
  • Patches vite.config.* to ensure @vitejs/plugin-react is used.
  • Adds the Babel plugin to the React plugin config.
  • Installs @vitejs/plugin-react if it’s missing.
• Next.js:
  • Adds/patches .babelrc (or babel.config.js) to include next/babel + the plugin.
  • Important: this can make Next dev use Babel instead of SWC.

Then restart your dev server.

4) Pick how styles are written (Auto/Tailwind/CSS/Inline)

Use the Style Target dropdown in the App Mode sidebar:

• Auto: chooses the best available adapter and shows the reason.
• Tailwind: writes Tailwind utility tokens into className (when className is a simple string).
• CSS file: adds a stable class and upserts a .lui-xxxx { ... } rule into a chosen CSS file.
• Inline: writes style={...} in JSX/HTML (can override responsive CSS; the extension will warn you).

5) (Optional) Tauri apps in App Mode

If your app is Tauri-targeted (has src-tauri/tauri.conf.json), App Mode can auto-enable Tauri Shim.

• The shim is a browser stub so the app can load and you can navigate UI.
• Native features won’t fully work (it’s intentionally a compatibility layer, not a full Tauri runtime).

You can toggle it via the Tauri Shim checkbox in the App Mode sidebar.

🎮 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 dev server through VS Code (App Mode runs your real app)
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

For full beginner-friendly help (including the Welcome screen flow, Static HTML mode, App Mode, UI Wizard, and troubleshooting), see HELP.md.

Editing Modes

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

Layout Apply

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

• Layout: Off (default): preview only (won't save to code)
• Layout: Safe: drag saves as margin adjustments (more responsive-friendly)
• Layout: Full: drag/resize writes width, height, transform to source

Control it via the Layout mode dropdown in the App Mode sidebar.

Stable IDs (Recommended)

For reliable element targeting, enable Stable IDs:

1. Click Enable Stable IDs in the sidebar
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 Detection

The extension auto-detects your framework from package.json:

🐛 Troubleshooting

For fastest help (and to share ideas/wins): https://discord.gg/QHnHhCjWDQ

🤝 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

Maintainers

• Release checklist: see RELEASING.md
• Version history: see CHANGELOG.md

📄 License

MIT License — see LICENSE for details.

🔗 Links

• Marketplace: VS Code Marketplace
• Discord: https://discord.gg/QHnHhCjWDQ
• Repository: GitHub
• Issues: Report a bug
• Discussions: Ask questions

If Live UI Editor saves you time, consider leaving a ⭐ on GitHub and a review on the Marketplace.
It helps others find the extension and keeps development going.

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