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
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…