Skip to main content
PocketToolz

Code to Image

Turn a code snippet into a shareable image, with syntax highlighting and themes.

DeveloperRuns in your browserFree, no signup

About the Code to Image

The image is painted directly onto a canvas rather than rendered from styled HTML, which is what makes the output pixel-exact and reliable. The usual approach — drawing HTML into an SVG foreignObject and rasterising it — is at the mercy of which fonts the browser happens to have and produces different results on different machines.

Syntax highlighting runs locally over the pasted code. Language, theme, padding, window chrome and background are all adjustable, and the preview is the actual canvas, so what you see is exactly what downloads.

For a code screenshot that will be read on a phone, keep lines under about 60 characters and the font size up. The most common mistake is pasting a wide block at a small size, which produces an image that is technically legible and practically useless in a timeline.

How it works

  1. Paste your snippet and pick its language — highlighting updates as you type.

  2. Choose a theme, a backdrop gradient and whether to show line numbers and window chrome.

  3. Download a PNG at up to 3× for a crisp result on high-DPI screens and slide decks.

Frequently asked questions

What image format does it produce?
PNG, which is lossless and keeps text edges crisp. JPEG would put compression halos around every character — it is designed for photographs, and code is line art.
Why not just take a screenshot?
A screenshot captures whatever your editor looks like at whatever your window size is, including the parts you did not want. This produces a consistent image at a resolution you choose, with padding and background already right for sharing.
What size should code images be for social media?
Keep lines under about 60 characters and use a larger font than feels necessary. Timeline images are viewed small on phones, and a wide block at a small size becomes unreadable.
Which languages are supported?
The common ones — JavaScript, TypeScript, Python, Go, Rust, Java, C, C++, HTML, CSS, JSON, SQL, shell and several more. If a language is not listed, plain text still renders with correct spacing.
Is my code uploaded to generate the image?
No. Highlighting and rendering both happen on a canvas in your browser, so proprietary snippets are never transmitted.

Privacy

Everything happens locally. Your files are read by your own browser, processed on your device, and never uploaded — closing the tab is all it takes to erase them.

Related Developer tools