Launched August 13, 2024
Hover Preview
Preview you html on hover
FreeCode1,845 impressions#11 of its week
Live preview, but on hover
Hover Preview is a VS Code extension that shows rendered HTML previews when you hover over tags.
- for
- Web developers working in VS Code who want quick visual feedback for HTML.
- pricing
- paid
- license
- AGPL-3.0
- latestV1.0.3 beta2 years ago
works withVisual Studio CodeHTML
Key features
4 features of Hover Preview
- Hover preview — Render the full HTML page in a tooltip when you hover over any tag.
- Element preview — Hover over a specific element to see only that part rendered.
- Configurable size — Set the preview tooltip width and height via settings.
- Temporary file rendering — Creates a .hoverpreview.temp.html file in the workspace to render the preview.
Use cases
- Quickly see how a new CSS class affects an element without leaving VS Code.
- Learn unfamiliar CSS frameworks by hovering over example markup.
- Debug layout issues by comparing the rendered preview with the source.
- Teach junior developers by providing instant visual feedback on their HTML.
Hover Preview vs alternatives
 Hover Preview |  Automock |  zippystarter |  Tail Lens for Tailwind |  Saas UI | |
|---|---|---|---|---|---|
| Best for | Hover-based HTML rendering in the editor | Simplified TypeScript unit tests | Quick blog/portfolio scaffolding | Tailwind CSS visual editing | React UI components for startups |
| Pricing | Paid | Free | One time fee | One time fee | Free |
| DevHunt upvotes | 2 | 148 | 111 | 47 | 54 |
| Launched | Aug 2024 | Jan 2023 | Jan 2023 | Nov 2025 | Jan 2023 |
- Hover Preview vs Automock: Automock focuses on unit test generation, not HTML preview.
- Hover Preview vs zippystarter: zippystarter creates full starter sites, while Hover Preview only previews HTML snippets.
- Hover Preview vs Tail Lens for Tailwind: Tail Lens provides an in-browser Tailwind editor, not VS Code hover previews.
- Hover Preview vs Saas UI: Saas UI is a React component library, unrelated to HTML hover rendering.
Hover Preview FAQ
Does Hover Preview work with files other than HTML?+
No, it currently only supports HTML files.
Can I interact with the preview (e.g., click links or play animations)?+
Interaction is not supported; animations also do not play in the preview.
Where does the extension store the temporary preview file?+
It creates a .hoverpreview.temp.html file in your working directory.
Is there a free version of Hover Preview?+
The extension is free to install; optional one-time licenses add priority support and other benefits.
Summarized by DevHunt from marketplace.visualstudio.com · Sep 28, 2026. Details may change; check the official site.
