MakerBox

Code to Image

Turn a code snippet into a beautiful, shareable PNG — syntax highlighting, themes and an optional macOS window frame. Free, 100% in your browser.

function greet(name) {
  // A friendly hello
  const msg = `Hello, ${name}!`;
  return msg;
}

greet("world");

🔒 Everything runs in your browser — your code is never uploaded.

Turn code into a picture worth sharing

Paste a snippet, pick a language and a theme, and get a polished image with real syntax highlighting, a rounded card and an optional macOS window frame — ready to drop into a blog post, slide, README or social media. Adjust the padding and font size, add a filename in the title bar, then download the PNG at 1×, 2× or 3× — it opens on 2× — or copy the image straight to your clipboard.

Why an image instead of pasting code?

Twitter/X, LinkedIn, Instagram and most slide decks mangle or strip code formatting. A styled image keeps the indentation, colors and layout exactly as you intended, so your snippet looks intentional instead of a wall of monospaced text.

Everything runs in your browser — the code you paste is never uploaded, which makes it safe for proprietary or unreleased work.

Frequently asked questions

Which languages are supported?

Sixteen are highlighted with Prism — JavaScript, TypeScript, JSX, TSX, Python, CSS, HTML, JSON, Bash, Java, Go, Rust, PHP, Ruby, SQL and YAML — plus a plain-text option for anything else.

Can I copy the image directly?

Yes — on supported browsers a “Copy image” button puts the PNG on your clipboard so you can paste it straight into a post or chat. You can also download it as a file.

Is my code uploaded anywhere?

No. Highlighting and image rendering happen entirely in your browser, so your code never leaves your device.

What resolution is the PNG?

You choose: 1×, 2× or 3× pixel density. It opens on 2×, which keeps text sharp on retina displays; 3× is for a screenshot that will fill a slide, and 1× when file size matters more than sharpness.

Is there a light theme?

Yes — six of the fifteen: GitHub Light, VS Code Light, Xcode Light, IntelliJ Light, Atom One Light and Solarized Light. The theme picker groups them under Light, with the nine dark ones (Dracula, One Dark, Nord, Monokai, GitHub Dark, Tokyo Night, Night Owl, Midnight and Sunset) under Dark.

Can I get a square image for Instagram, or a 16:9 one for a slide?

Yes. The Frame picker offers Wide (16:9), Compact (4:3) and Square (1:1) alongside “Fit the code”, which is the default. A frame is a minimum rather than a crop: a snippet wider or taller than the frame pushes it out instead of being cut off the picture.

Can I use my own picture as the background?

Yes. Choose “Picture” under Background and pick an image from your device — it is read in the browser and drawn behind the card, never uploaded. Pictures up to 8 MB are accepted, and anything larger than 2400px is redrawn smaller so the export stays quick.