Visually edit rendered static HTML files directly in VS Code with real-time preview, device frame switching, auto-save, and clean formatting-preserving save.
🎯 Why Use This Extension?
Visual Editing: Edit rendered text directly instead of hunting through messy, hard-to-read inline HTML code.
Save AI Tokens & Time: Quickly tweak minor text/typos in AI-generated CVs and documents without wasting tokens on AI re-prompts.
📦 Installation & Build
Run the following commands in your terminal to clone, package, and install the extension into VS Code:
git clone https://github.com/HaoNgo232/vscode-visual-html-editor.git
cd vscode-visual-html-editor
bun install
bun run package
code --install-extension visual-html-live-editor-0.0.3.vsix --force
✨ Features
Visual Text Editing: Click any text in the preview to edit directly, just like a word processor.
Clean File Saving: Keeps 100% of your original HTML structure, comments, and formatting intact when saving.
Auto-Save: Automatically saves your edits in the background as you type.
Device Preview: Switch between Desktop, Tablet, and Mobile views to test responsive layouts.
Instant PDF Export: Export your rendered HTML directly to a PDF document in one click.
Multi-File HTML Support: Open HTML files that reference other local HTML files (e.g., iframe-based presentations). Local CSS, JS, and images are loaded automatically.
Security: Path traversal protection ensures only files within your workspace can be accessed.
🚀 Quick Start
Open any .html file.
Right-click in the file/editor tab and select Visual HTML Editor: Open Visual Editor.
