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

🎯 Click to Code Click any element in your running app and instantly jump to its source location in your editor.	🖱️ Drag & Resize Move and resize elements visually. You can control how layout changes are persisted: Layout: Off — drag/resize is preview-only (won't be written to code) Layout: Safe — drag moves are saved as margin adjustments (responsive-friendly) Layout: Full — drag/resize is saved as width/height/transform
✏️ Inline Text Editing Double-click to edit text inline. App Mode: supports i18n-aware updates for common `t('key')` patterns when translation files are present. Static HTML mode: edits plain HTML text.	🗑️ Element CRUD Insert, duplicate, wrap, and delete elements with toolbar buttons or keyboard shortcuts (`Ctrl+D`, `Ctrl+G`, `Delete`). Multi-select with `Ctrl+Shift+Click` for bulk operations. Fully undoable.
🔄 Live Preview See changes instantly in the embedded browser. Toggle between Edit and Browse modes.	📦 Safe Staging All changes are previewed before saving. Apply or discard pending edits with one click.
🎛️ Universal Style Targets Apply style edits in a way that matches your project: Auto (recommended): prefers Tailwind when detected, otherwise writes a CSS class rule. Inline: escape hatch when you need it (with warnings for layout-risky changes).	📱 Responsive Bar Switch the preview viewport between six breakpoints (Mobile S/M/L, Tablet, Laptop, Desktop) to test responsive layouts.
🔍 Inspector + CSS Cascade View and edit every computed CSS property inline. The Cascade panel shows which rules apply, their specificity, and what's overridden.	🌳 Element Tree + Diff Preview Browse and search the full DOM tree. Open the diff panel to see a before/after comparison of every HTML change.
🎨 Page Redesign (Figma-like) Ask `@ui-wizard` to redesign an entire page — no element selection needed. Describe the look you want in plain language and watch CSS stream into the live viewport in real-time. Review the result, then approve to bake it into your source file or reject to revert. `@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:

Open VS Code
Press Ctrl+Shift+X to open Extensions
Search for "Live UI Editor"
Click Install

Or install via command line:

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

First Launch

Open your React/Vite project in VS Code
Press Ctrl+Shift+P → type "Live UI: Open"
In the Welcome screen, choose:

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

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:

In App Mode, make sure you’re in Edit and click an element (so it becomes the current selection).
Open VS Code Chat (View → Chat).
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

Action	Shortcut
Select element	`Click`
Jump to source	`Ctrl+Click`
Multi-select toggle	`Ctrl+Shift+Click`
Select all siblings	`Ctrl+A`
Select leaf element	`Alt+Click`
Select group	`Shift+Click`
Move element	`Drag` selection
Resize element	`Drag` corner handle
Nudge 1 px / 10 px	Arrow keys / `Shift+Arrow`
Edit text	`Double-click`
Duplicate element	`Ctrl+D`
Wrap in container	`Ctrl+G`
Delete element	`Delete` / `Backspace`
Undo / Redo	`Ctrl+Z` / `Ctrl+Shift+Z`
Deselect	`Escape`
Apply changes	Click Apply to Code
Discard changes	Click Discard

🔧 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"        │ │
│                         └─────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

Proxy Server — Routes your dev server through VS Code (App Mode runs your real app)
Injected Script — Adds selection, dragging, and editing UI to your app
React Fiber Inspection — Maps DOM elements back to source code locations
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

Mode	Description
Edit	Visual editing enabled — click to select, drag to move
Browse	Normal app interaction — click events pass through

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:

Click Enable Stable IDs in the sidebar
The extension injects data-lui attributes via a Babel plugin
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

Requirement	Version
VS Code	1.85.0+
Node.js	18+

Framework Detection

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

Framework	Status
Vite + React	✅ Full support
Vite + React + TS	✅ Full support
Next.js	✅ Supported (App & Pages router)
Create React App	⚠️ Limited (no proxy)
Astro	✅ Detected
SvelteKit	✅ Detected
Angular	✅ Detected
Vue CLI	✅ Detected
Nuxt	✅ Detected
Gatsby	✅ Detected
Remix	✅ Detected
Static HTML	✅ Full support (no framework needed)

🐛 Troubleshooting

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

Buttons not responding in App Mode

Reload the VS Code window (Ctrl+Shift+P → "Reload Window") and restart App Mode.

Changes applied to wrong element

Enable Stable IDs for reliable targeting. Without them, elements are matched by heuristics which can fail after HMR updates.

Identity says “Unmapped”

Click Enable Stable IDs and restart your dev server. Without Stable IDs (or React debug source), App Mode can’t reliably map DOM → source.

Tauri app says “not running in Tauri environment”

Enable Tauri Shim in the App Mode toolbar. This stubs the minimal Tauri surface needed for many Tauri-targeted web UIs to load in a browser.

Dev server won't start

Ensure your package.json has a dev script
Check that port 5173 is available
Try starting the server manually first, then use App Mode

i18n text edit failed

Translation files must be in src/locales/*.json
The translation key must exist in the JSON file
Check Output panel: View → Output → Live UI Editor

🤝 Contributing

Contributions are welcome! Here's how:

Fork the repository
Clone your fork: git clone https://github.com/YOUR_USERNAME/VSC-Live-UI-Editor.git
Install dependencies: npm install && cd webview-ui && npm install
Build: npm run build
Test in VS Code: Press F5 to launch Extension Development Host
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.}

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
.vscode		.vscode
docs		docs
images		images
samples		samples
src		src
test		test
tools/vite-plugin-live-ui-editor		tools/vite-plugin-live-ui-editor
webview-ui		webview-ui
.gitignore		.gitignore
.vscodeignore		.vscodeignore
AUTO_DETECT_AND_SETUP_PLAN.md		AUTO_DETECT_AND_SETUP_PLAN.md
CHANGELOG.md		CHANGELOG.md
HELP.md		HELP.md
LICENSE		LICENSE
LIVE_UI_EDITOR_V2_PLAN.md		LIVE_UI_EDITOR_V2_PLAN.md
README.md		README.md
RELEASING.md		RELEASING.md
TRACKING_REBUILD_ROADMAP.md		TRACKING_REBUILD_ROADMAP.md
VSCode Live UI Editor — Master Proj.md		VSCode Live UI Editor — Master Proj.md
esbuild.extension.mjs		esbuild.extension.mjs
package-lock.json		package-lock.json
package.json		package.json
sample-ui.html		sample-ui.html
test-output.html		test-output.html
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts

Folders and files

Latest commit

History

Repository files navigation

Live UI Editor

🧩 Works With

✨ Features

🎯 Click to Code

🖱️ Drag & Resize

✏️ Inline Text Editing

🗑️ Element CRUD

🔄 Live Preview

📦 Safe Staging

🎛️ Universal Style Targets

📱 Responsive Bar

🔍 Inspector + CSS Cascade

🌳 Element Tree + Diff Preview

🎨 Page Redesign (Figma-like)

🧭 Two Editing Modes

1) Static HTML mode (no dev server)

2) App Mode (dev server)

🚀 Quick Start

Installation

First Launch

🧠 First-Time Setup (Idiot-Proof)

1) Start / connect to your dev server

2) Use Edit vs Browse mode

2.5) UI Wizard (Chat)

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

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

5) (Optional) Tauri apps in App Mode

🎮 Controls

🔧 How It Works

📖 Documentation

Editing Modes

Layout Apply

Stable IDs (Recommended)

i18n Support

📋 Requirements

Framework Detection

🐛 Troubleshooting

🤝 Contributing

Development Scripts

Maintainers

📄 License

🔗 Links

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages