HTML to Image

Turning markup into a picture solves a specific, recurring problem: you have something that is easy to describe in HTML and CSS — a social card, a quote graphic, a price table, a code snippet, a certificate — and you need it as a flat image, because the place it is going does not accept HTML. Link previews, chat apps, slide decks, marketplace listings and print all want an image.

Building each one by hand in a design tool is slow and hard to repeat. Describing it once in CSS and exporting variations by editing text is much faster, and the result is consistent every time.

The usual way to build this feature is a headless browser on a server. It works, but it hands anyone who can submit markup a request origin inside someone else's network: a single image tag pointed at an internal address can reach cloud metadata endpoints or services never meant to face the internet. Sandboxing that safely is real infrastructure work, and getting it slightly wrong is a serious vulnerability.

So none of that happens here. Your markup is wrapped in an SVG foreignObject and rasterised by your own browser onto a canvas. Three properties of an SVG used as an image make this safe: scripts cannot execute, no network request can be made from inside it, and the canvas stays readable so the result can still be exported. Your HTML never leaves the tab, and there is no server to attack.

There are two ways to convert HTML into pixels in a browser. One is to walk the DOM, read the computed styles, and paint each box onto a canvas by hand. That gives predictable output but re-implements a browser's layout engine, so it drifts on anything intricate — nested flexbox, grid, filters, transforms.

The other is to let the browser lay the content out itself, which is what foreignObject does. Modern CSS behaves the way it does on a real page, because it is the same engine doing the work. The trade-off is the network restriction described above, which is why embedding external assets matters. The live preview uses the same markup, so what you see is what you export.

The resolution multiplier changes how many device pixels the same CSS layout is rendered into. At 2× a 1200-pixel-wide card becomes a 2400-pixel image with an identical design — the browser rasterises the vector description at the higher size rather than enlarging a smaller bitmap, so text and edges stay genuinely sharp.

For format, PNG is the safe choice for text, flat colour and transparency. JPEG suits photographic content where transparency is irrelevant and size matters. WebP is generally smallest at equivalent quality and handles transparency too. Exports at 2× or 3× can be heavy, so it is worth running the result through an image compressor before publishing.

Anything that needs to run or be fetched. JavaScript is stripped and could not execute regardless. Images, web fonts and CSS background images referenced by URL have to be embedded as data URLs first — the tool offers to do that for images automatically. Iframes, videos and embedded objects cannot be captured. Anything requiring user interaction to appear, such as a hover state or an open dropdown, has to be written into the markup as its visible state.