HTML Design View
A Dreamweaver-style "Design View" for VS Code. Open any HTML file and see it rendered — click any text element to edit it inline. Changes sync back to the source file and join the undo stack.
Usage
- Open an
.html file in VS Code.
- Click the eye icon (👁) in the editor title bar, or run
HTML: Open Design View from the Command Palette (Ctrl+Shift+P).
- A preview panel opens to the right of your editor.
- Click any paragraph, heading, list item, table cell, etc. to edit it.
- When you're done editing an element, click elsewhere or press
Escape / Enter (for headings) to commit.
- The source HTML is updated and marked dirty — save with
Ctrl+S as usual.
Keyboard shortcuts (while editing an element)
| Key |
Action |
Escape |
Cancel — restore the original text |
Enter |
Commit (headings, td, th, a, label, span only) |
Ctrl+Z |
Undo the last committed edit (via VS Code's undo stack) |
Paste behaviour
Pasting from Microsoft Word or Google Docs inserts plain text only — all rich-text formatting (fonts, colours, mso-* styles, etc.) is stripped automatically.
Phase 2 features
- Live sync — Design View refreshes automatically (300 ms debounce) when you edit the source HTML in the code editor. Your own design-view edits are excluded so there's no circular refresh.
- Scroll preservation — after every live-sync refresh the view scrolls back to where you were.
- Edit success flash — after a change is confirmed in the source file the edited element briefly flashes green.
- Smart Word paste — pasting from Word or Google Docs keeps
<b>, <i>, <u>, <br> etc. and strips all mso-* styles, <o:p> tags, and conditional comments.
Phase 1 scope
The baseline MVP covers:
- Render HTML with correct relative asset paths (CSS, images, fonts)
- Click-to-edit on
p, h1–h6, span, li, td, th, a, label, blockquote, figcaption, dt, dd, and div elements that contain direct text
- Sync edits to source via
WorkspaceEdit (undoable)
- Plain-text paste
Not yet in Phase 1: live-sync when you edit the source code directly, hover highlighting polish, scroll-position preservation, and smart Word paste (keeping bold/italic).
Notes
- JavaScript in the previewed HTML will not run (blocked by CSP). Styles, images, and fonts load normally.
- The extension tags elements with
data-dv-idx attributes at preview time; these are stripped before any change is written back to the source file.
- Only one Design View panel is open at a time.
| |
