How It Works

Turns a snippet of code into a colorized PNG you can share on social media or drop into a slide. Syntax highlighting runs through a hand-written tokenizer, and the image itself is drawn directly in the browser with the Canvas 2D API — the code never leaves the page.

Supported languages

JavaScript, TypeScript, JSON, Python, Go, PHP, SQL, and bash — a regex-based tokenizer parses and colors keywords, strings, numbers, comments, and function calls for these eight languages. This is not the full grammar-based highlighting Shiki gives the site’s own code blocks; it’s a narrower lexical approach, and it can occasionally misclassify a token. Language is auto-detected, but can also be picked by hand from the list.

Appearance options

Theme — a light and a dark palette, derived from Shiki’s vitesse-light and vitesse-dark.
Scale — 1x, 2x, or 3x; the pixel density is baked into the image’s backing store for a crisp export on retina screens.
Padding and window chrome — a three-dot title bar with a language label, or a bare code block.

The preview redraws with the current text on every change, including Turkish characters (ş ğ İ ı ö ü ç), which keeps them rendering correctly instead of silently falling back to a substitute font.

Output

“Download PNG” saves the file as code-image.png. Where the browser supports it, “Copy to clipboard” writes the image directly to the clipboard; where it doesn’t, that button is hidden entirely.

Privacy

This tool runs entirely in your browser and makes no network requests. The code you type is never sent to a server; rendering, from tokenizer to output font, stays in the page’s own memory.