Code to Image
A snippet as a PNG for the places that will not take a code block — drawn in the tab, nothing uploaded
Tabs become two spaces, because a canvas has no tab stops. Lines longer than the wrap width break with a hanging indent rather than running off the edge.
Use a real code block where one fits. An image cannot be copied, searched, or read aloud, and it does not reflow on a phone. This is for the places that genuinely will not take one — slides, social cards, release notes in tools with no code formatting. Where you do post it, give it alt text saying what the code does rather than transcribing it.
Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
The three dots and a title bar. Reads as a screenshot rather than a graphic, which is either exactly what you want or exactly what you do not.
Also the download filename. A path here tells the reader where the snippet lives, which is the one thing a screenshot of code usually leaves out.
Only worth it when the surrounding text refers to a line. Otherwise they are a column of noise the reader has to look past.
Lifts the card off the backdrop. Turn it off with a transparent backdrop, or the shadow lands on nothing and shows up as a grey smear wherever the image is placed.
A gradient derived from Midnight — the card and its ground stay one thing.
The margin around the card. Generous is right for a social card, where the crop is out of your hands; tight is right when you are placing it yourself.
Set it for where the image will be read. A snippet on a slide wants 18–22px; one inline in a release note is fine at 14.
Where a long line breaks, in characters. Under about 60 the wrapping starts doing more damage to legibility than the long line did.
Inside the card, around the text. This is also the left offset of the window dots, so the two stay aligned.
Zero reads as a document, sixteen as an app window. Nothing in between reads as either.
Keep this snippet style. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
- Meta & OG BuilderThe tags that get you indexed and the card your link turns into, with length counters and a search-result preview. Emits Next.js Metadata, not stray meta tags.
- PlaceholdersPlaceholder images and initial avatars as SVG data URIs. No third-party request, works offline, and the avatar colour is derived from the name so it is stable everywhere.
- Favicon GeneratorA letter or emoji into an SVG icon plus every PNG size that still matters. Rasterized in your browser from the same SVG — nothing is uploaded.