Code to Image
Turn a code snippet into a clean, syntax-highlighted PNG for posts, slides, and docs.
🔒 The image is generated in your browser. Your code is never sent to a server.
How it works & options
Paste a snippet and choose its language — JavaScript, TypeScript, Python, JSON, CSS, HTML, or Plain — and the studio renders it live onto an HTML canvas styled like a macOS window: three traffic-light dots, a rounded card, a soft drop shadow, and a subtle gradient backdrop. A built-in highlighter colors keywords, strings, numbers, line comments, and function calls, so the result reads far better than a flat paste. Switch between a dark or light theme, toggle line numbers on or off, and set the window title (for example, index.ts) to label the file. The canvas auto-sizes to your longest line and line count, then exports as a PNG. Resolution defaults to 2x; 3x and 4x plus a transparent background are Pro options.
When to use it
Reach for it whenever raw code won't survive the medium. Platforms like X, LinkedIn, Instagram, and most chat apps have no code formatting, so a pasted function loses its indentation and wraps into noise — an image keeps every space and bracket exactly where you put it. It's ideal for blog posts and tutorials, conference slides, release notes, and README or documentation figures, where a framed, consistent snippet looks more polished than a raw screenshot cropped from your editor. Because you control the theme and title, a series of examples stays visually uniform across a whole article or deck. The 2x default already looks sharp on high-density displays; 3x and 4x keep text crisp when a slide is projected onto a large screen.
Private, high-resolution output
Every image is drawn locally in your browser on an HTML canvas — your code is never uploaded or sent to a server, which makes the tool safe for proprietary, unreleased, or client work. The export is a lossless PNG, so edges stay clean and text stays legible when the picture is zoomed or blown up on a projector; the higher 3x/4x scales (Pro) give you extra headroom for print or large displays. A transparent-background option (Pro) drops the code card straight onto any slide, banner, or colored backdrop without a rectangle around it. Free exports include a small watermark; upgrading removes it and unlocks the higher resolutions. Nothing is stored between sessions — refresh the page and your snippet is gone.
Frequently asked questions
Which languages get syntax highlighting?
JavaScript, TypeScript, Python, JSON, CSS, and HTML are highlighted — keywords, strings, numbers, comments, and function names are colored automatically. Choose Plain to render any other language exactly as typed, without coloring.
What resolution and format is the export?
It saves a lossless PNG that auto-sizes to your code. The default 2x looks crisp on high-density screens; 3x and 4x, plus a transparent background for dropping the snippet onto slides, are Pro options. Free exports carry a small watermark.
Is my code uploaded?
No. The image is rendered entirely in your browser on an HTML canvas, so your code never leaves your device — safe for private or unreleased work, and nothing is kept after you refresh.