Code to Image Converter
Turn code snippets into beautiful shareable images.
async function greet(name) {
const greeting = `Hello, ${name}!`;
console.log(greeting);
return greeting;
}
greet("world");Code source
What is a Code to Image Converter?
A code-to-image converter turns a code snippet into a polished, syntax-highlighted screenshot ready for Twitter, LinkedIn, a blog hero, or a conference slide. The alternatives are uglier: a raw screenshot of your editor captures window chrome and colours that don't match a public audience; an actual screenshot of the browser lacks the dark-background-with-margin look that makes code snippets pop on social media.
Syntax highlighting. We use highlight.js, a mature, widely-tested library with support for 190+ languages. This tool exposes the nine most common (JavaScript, TypeScript, Python, Rust, Go, CSS, HTML, JSON, Bash), which covers nearly every snippet anyone posts on social media. Tokens are coloured in a dark theme tuned for readability on coloured backdrops.
Backdrop gradients are the visual secret sauce. The dark code card sits on a coloured gradient that fills the padding around it, which creates the iconic "Carbon"/Ray.so/Polacode look popularised by a generation of developer influencers. Five presets cover different moods: Midnight (corporate blue), Aurora (purple-cyan-pink), Sunset (warm orange-yellow), Ocean (blue-to-cyan), and Mono (soft off-white for a more neutral take).
Mac traffic-light buttons at the top of the card are purely decorative — they mimic the macOS window chrome and make the snippet read as a window rather than a code block. Toggle off if you prefer a cleaner look or are posting somewhere that doesn't lean Mac-aesthetic.
Rendering. The card is rendered with DOM + CSS (no Canvas). On download, html-to-image rasterises the element at 2× pixel density for retina-sharp PNGs. Output typically lands at 1000–2000 pixels wide depending on code length and padding.
Privacy note. Everything happens in your browser. The code you paste, the file title, and the exported PNG stay on your device. That matters when the snippet is under NDA, contains internal API endpoints, or references a private repo — pasting into a third-party tool would be a leak risk.
How to turn code into an image
- Paste your code into the source box.
- Pick a language so highlighting lights up correctly.
- Choose a backdrop — Midnight for corporate, Aurora for playful.
- Tweak padding and traffic lights to taste.
- Download PNG at 2× retina resolution.
Features
- 9 languages with syntax highlighting via highlight.js.
- 5 backdrop presets (Midnight, Aurora, Sunset, Ocean, Mono).
- Optional macOS traffic-light window chrome and custom file title.
- Adjustable padding (16–96px).
- Retina-ready PNG export (2× pixel density).
- Runs entirely in your browser — safe for private or NDA-bound code.
Frequently asked questions
- Which languages are supported?
- Nine of the most common: JavaScript, TypeScript, Python, Rust, Go, CSS, HTML, JSON, and Bash. highlight.js supports 190+ languages; we ship the most-used subset to keep the bundle small. If you need another language, let us know via the contact form.
- What's the output resolution?
- We render at 2× pixel density, so a snippet with a 1000px card + 48px padding renders at roughly 2100×1500 (varies with code length). Sharp on retina displays and in print.
- Can I export without the traffic lights?
- Yes — toggle 'Show Mac traffic lights' off in the sidebar for a cleaner look. Works well on non-Mac-aesthetic posts.
- How does this compare to Carbon or ray.so?
- Similar goal, different trade-offs. Carbon and ray.so are highly polished but run server-side (your code is uploaded). We run entirely in-browser which is safer for private code, at the cost of fewer theme options. Pick based on your privacy vs polish preference.
- Does the tool store my code?
- No. highlight.js and html-to-image run entirely in your browser. The source never uploads.