Code to image

How it works

The snippet is rendered directly onto an HTML canvas: the canvas width is sized by measuring the widest line of code with the 2D context's measureText(), a rounded rectangle is drawn for the card background, three colored dots fake macOS-style window controls, and each line of code is drawn as plain text at a fixed line height — there's no real syntax highlighting, so keywords aren't colored differently from the rest. Downloading calls the canvas's toBlob() method to export the whole thing as a PNG.

FAQ

Why isn't my code syntax-highlighted with colors?

This tool deliberately skips per-token syntax highlighting — parsing dozens of languages correctly enough to color them right is failure-prone, so it renders clean monochrome text instead of getting keywords or strings wrong.

Why does the image get wider with longer lines of code?

The canvas measures your longest line with measureText() before drawing anything, then sizes the whole image to fit it — there's no line wrapping, so a single very long line will produce a very wide image.