vscode-web-visual-editor

Web Visual Editor

Edit HTML files visually in real-time.

✨ Features

• 🖼️ Visual Editing: Edit HTML elements visually within the WebView.
• ⏱️ Real-Time Preview: See changes reflected instantly as you edit. Edits in the source editor are reflected on every keystroke. Edits in the WebView are written back to the source instantly.
• 🧩 Integrated with Visual Studio Code: No additional processes and windows and well-integrated with VSCode theme.
• 🖱️ Element Selection: Select HTML elements with ease. Visual selections are synchronized with text selections on editor. Vice versa.
• ✂️ Copy, Cut and Paste: Copy or cut elements, paste text or HTML into selected element.
• 🗑️ Delete: Remove selected elements from the source.
• ↩️ Undo / Redo: All edits made via the WebView are undoable and redoable.
• 🔍 Zoom in and out: Zoom in and out the page.
• ↕️ Move Elements: Drag elements to rearrange their position.
• 🔗 Live resource updates: CSS, images, and other files referenced by relative path are tracked. The WebView refreshes automatically when any of them is saved.

📐 Specification

⚙️ Settings (settings.json)

webVisualEditor.enableMovingElements

Enable drag-to-move and keyboard nudge for positioned elements. Default: false.

webVisualEditor.allowScript

Allow <script> tags and on* event attributes to run inside the WebView. Default: false.

webVisualEditor.rootPath

Root directory for resolving root-relative paths (e.g. /styles/main.css). Specified as a path relative to the workspace root. Must be inside the workspace. Defaults to the workspace root.

webVisualEditor.globalScripts

List of scripts to inject into all HTML pages in the preview. Each entry is either a URL or a local path.

// settings.json
{
  "webVisualEditor.allowScript": true,
  "webVisualEditor.globalScripts": [
    "https://cdn.tailwindcss.com",  // CDN URL
    "/scripts/inject.js"             // root-relative path
  ]
}

[!TIP] Root-relative paths in globalScripts are resolved using rootPath. Local script files are tracked: saving them automatically refreshes the preview.

🖱️ Multi-selection

• Ctrl+Click adds or removes an element from the current selection.
• Selections made in the source editor (including multiple ranges) are also reflected in the WebView.

↕️ Movable element conditions (requires enableMovingElements)

An element is draggable when all of the following are true:

• position is not static or sticky
• left/right are not both set simultaneously (same for top/bottom)
• Any explicitly set position value uses px units — other units (%, em, rem, etc.) make the element non-movable

✂️ Copy / Cut / Paste

• Copy / Cut: copies the source text of the selected elements to the clipboard — the same range that is highlighted in the source editor. Cut also removes the elements from the source.
• Paste: inserts clipboard content just before the closing tag of the last selected element (or <body> if nothing is selected). If the clipboard contains valid HTML it is inserted as-is; plain text is HTML-escaped first. The inserted range is then reformatted by VSCode’s HTML formatter.

🔀 Alternatives

This extension is similar to microsoft/vscode-livepreview and it differs in the following points:

• The ability to synchronize code selection with visual selection in the preview.
• Since Web Visual Editor has minimal functionality, the codebase is very small, making future expansions easy.
• It is designed to reflect changes made in the preview back to the code, so enhancing the editing capabilities within the preview may be beneficial in the future. For example, you can copy, cut, paste and delete elements within preview at this moment.

📜 License

MIT License

💛 Sponsor

Empower my motivation brewing and accelerate development by buying me a coffee!