A Visual Studio Code extension that provides a real-time HTML preview with interactive editing capabilities, allowing for seamless two-way interaction between the code and the preview.
Features
1. Real-Time HTML Preview
Displays a live preview of your HTML document in a side panel
Updates automatically as you type or edit the code
No need to save or manually refresh
2. Inspect Element Mode
Click on any element in the preview to jump to the corresponding code in the editor
Highlights elements as you hover over them in the preview
Toggle on/off with the "Inspect Element" button in the preview panel
3. Focus Mode
When you place your cursor on an HTML element in the editor, the corresponding element is highlighted in the preview
The preview automatically scrolls to show the highlighted element
Toggle on/off with the "Focus Mode" button in the preview panel
4. Wrap & Format Quick Access
Easy butttons to format and toggle code wrapping
Installation
From VS Code Marketplace
Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for Email Editing Tools by Spotmar
Click Install
Usage
Open an HTML file in VS Code
Right-click in the editor and select "Show Live HTML Preview" from the context menu
A preview panel will open showing your HTML document
Use the toolbar buttons in the preview to toggle Inspect Element and Focus Mode
Inspect Element Mode
Toggle the "Inspect Element" button in the preview panel
Hover over elements in the preview to see them highlighted
Click on an element to jump to its code in the editor
Focus Mode
Toggle the "Focus Mode" button in the preview panel
Place your cursor on an HTML element in the editor
The corresponding element will be highlighted in the preview and scrolled into view
Check out Spotmar
The world's largest databasae of email examples and trends
