---
title: "Code Image Generator"
description: "Turn a code block into a shareable PNG. The code itself never leaves your browser; pick a theme, export scale, and window chrome."
url: https://sade.dev/en/tools/code-image/
lang: en
author: "Muhammet Şafak"
published: 2026-09-23
section: Tool
tags: ["code","image","sharing","canvas"]
---

# Code Image Generator

> Turn a code block into a shareable PNG. The code itself never leaves your browser; pick a theme, export scale, and window chrome.

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.