Hover Preview: A must have VsCode Extension for Webdevelopers 🔥

So we have all been there, We see someone else's code like this and panic, because we don't understand what it does at the first glance.

But now with hover preview you can get a quick sneak peak to how it would look like when you hover over the snippets or HTML elements.

Download Hover preview

You can get Hover preview on VsCode marketplace

Please note that its still in development and released under beta release

Why Hover preview?

I built this for couple of reasons.

Reading someone else's code is not fun, a quick preview of what section does would make it much more easier to understand.
If you are a beginner or learning a new CSS library or framework it can become hard to understand what's going on, so a visual cue would be much helpful.
Lesser toggling between browser and vscode.

Limitations

Currently works only for Html files, not for component based libraries or frameworks
Cannot preview animations (eg: css animations).
No interactions: you cannot interact with the preview.

Roadmap

Hover preview is still work in progress and will soon come with more configurations and support. You can check out the hover preview roadmap

Source code and links

VsCode marketplace

PaulleDemon / Hover-Preview

Preview on hover

Hover preview 🚀 - VsCode extension [BETA]

This is a simple vscode extension used for previewing your html elements while hovering Currently made for html files only.

Note

This is still in beta, currently this extension will create a temp file in your working directory to render the html (called .hoverpreview.temp.html), we'll soon change that. Please refer to roadmap

You must wait for the extension to completely load to preview

What is Hover preview?

We have all come across front-end codes that we don't understand because of lack of visual cues. Like the one shown below

Now it can become overwhelming at first glance if you have no prior experience in the CSS library or framework used in the code. So to make it easier Hover Preview provides you with a quick preview of what it the element would look like in the browser.

Why use Hover preview?

Less…

View on GitHub