Code to Image

about this tool

How the picture is made

Nothing leaves the tab. The code is tokenised by shiki, the highlighter behind VS Code, using its JavaScript regular-expression engine rather than the WebAssembly one, so there is no .wasm file to fetch and the grammar for the language you pick arrives on its own the first time it is needed. Eight editor themes are offered, each loaded on demand as well.

The layout is worked out once — every line, line number and token given a position — and drawn twice from that plan: as HTML for the preview on this page, and onto a canvas for the export. The export is rendered at twice the size you see, so a 600-pixel-wide preview becomes a 1200-pixel PNG that stays crisp on a high-density screen or when zoomed in a chat window. The typeface is the site's own monospace face, which is already on the page, so the picture looks the way the preview does.

The window

The title bar with three dots is the conventional frame for a code picture; switch it off for a plain block. Anything typed as the title appears in the bar, and a title that looks like a file name also picks the language, so deploy.sh or Dockerfile colours correctly without a second step. The picture sits on a plain backdrop that follows the theme, light or dark, with a hard offset shadow of the kind this site uses for its own boxes.

Line numbers are drawn in the theme's text colour at reduced opacity, in a gutter sized to the number of lines, so ten lines and a hundred both line up. Tabs are expanded to two spaces before highlighting, because a canvas has no tab stops.

Copying and saving

Download gives you a PNG named after the title, or code.png. Copy puts the same PNG on the clipboard where the browser permits a page to do that — current Chrome, Edge and Safari do; Firefox requires a preference to be set — and says so plainly when it cannot, rather than pretending it did.

Limits

This is for snippets. There is no wrapping: a long line makes a wide picture, and the size under the preview tells you what you would export. There is no SVG export, no custom fonts or colours beyond the themes offered, and no diff view or highlighted-line markers. The preview and the export are drawn from the same layout, but one is HTML and the other a canvas, so their anti-aliasing differs slightly; positions do not.

questions

How is the picture made without a server?

The code is tokenised in your browser by shiki, the same highlighter VS Code uses, and each token is drawn onto a canvas with the site’s own monospace typeface. The PNG you download is that canvas at twice the size you see, so it stays crisp when zoomed or on a high-density screen.

Why does the picture look slightly different from the preview?

The preview is HTML and the export is a canvas; both are drawn from the same layout, so positions match, but anti-aliasing differs a little between the two. If a font looks wrong in the export, the face had not finished loading — wait a moment and export again.

Can I copy the image instead of downloading it?

Yes, where the browser allows a page to write an image to the clipboard, which current Chrome, Edge and Safari do. Firefox permits it only when a setting is enabled, and the tool says so and offers the download instead.

Why did the language change when I typed a title?

A title that looks like a file name — app.tsx, deploy.sh, Dockerfile — tells the tool which grammar to use, so the colours are right without a second step. You can still pick a different language afterwards.

Is there a limit on the amount of code?

There is no hard limit, but a picture is for a snippet. Beyond about sixty lines or a hundred characters a line the image becomes large and hard to read where it is shared; the size read-out under the picture shows what you would export.