Code to Image
Render code snippets as beautiful syntax-highlighted PNG images with themes, line numbers, and window chrome.
What Is a Code to Image Converter?
A code-to-image converter renders a syntax-highlighted code snippet as a beautiful PNG image, ready to share on social media, in documentation, or in presentations. It applies real syntax highlighting, a window chrome with traffic-light buttons, and configurable themes and font sizes — all inside your browser with no server upload needed.
How to Use
- Paste or type your code in the editor
- Select a color theme and adjust font size and padding
- Toggle line numbers on or off
- Click Download PNG to save the image
- All rendering happens in-browser — no data is uploaded
Features
- 5 themes: One Dark, GitHub Dark, Dracula, Solarized Dark, GitHub Light
- Syntax highlighting for JavaScript, Python, Go, Rust, and more
- macOS-style window chrome with traffic-light dots
- Configurable font size (10–24px) and padding (16–64px)
- Optional line numbers
- Export as PNG
FAQ
What languages are supported for syntax highlighting?
The built-in tokenizer recognizes keywords and builtins for JavaScript/TypeScript, Python, Go, and Rust. It also handles string literals, numbers, single-line comments (// and #), and operators for any C-like language.
What resolution is the exported PNG?
The PNG is exported at 2× pixel density (device pixel ratio ×2) for crisp display on retina / HiDPI screens. The actual pixel dimensions depend on the code length and your font size and padding settings.
Why does the font look different from the preview?
The canvas uses JetBrains Mono, Fira Code, or Cascadia Code if available on your system, falling back to Menlo, Monaco, and Consolas. For the most consistent results, install a programming font before exporting.