Code to Image

Turn any code snippet into a beautiful, syntax-highlighted code screenshot with a window frame and gradient background, then export it as PNG or SVG or copy it to your clipboard. Free, no signup, and your code is never uploaded — everything runs in your browser.

debounce.ts

// Debounce: run fn only after calls stop for `wait` ms
export function debounce<T extends (...args: never[]) => void>(
  fn: T,
  wait = 200,
): (...args: Parameters<T>) => void {
  let timer: ReturnType<typeof setTimeout> | undefined;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), wait);
  };
}
 
const onResize = debounce(() => console.log(window.innerWidth), 150);
window.addEventListener("resize", onResize);

Code — 14 lines

Tab inserts two spaces. Press Esc, then Tab, to move focus out of the editor.

How to turn code into an image

Paste your code. Paste a snippet into the code editor. The language is detected automatically, or you can pick one of 30 languages from the list.
Choose a theme and background. Pick a syntax theme such as One Dark Pro, Dracula or GitHub Light, then a gradient, a solid color or a transparent background.
Style the frame. Toggle the window dots, set a file name, adjust padding, corner radius and font size, add line numbers, and highlight line ranges like 3-5.
Export the image. Download a PNG at 1x, 2x or 4x, save an SVG, copy the image straight to your clipboard, or copy a share link that contains the code.

Tips for code screenshots people actually read

Keep it short. 10–25 lines fit a social card or slide without shrinking the text. Cut imports and boilerplate; show only the idea.
Mind the width. Lines longer than about 70 characters force a wide, short image that becomes tiny in a feed. Wrap long calls by hand.
Point at the change. Highlight the 2–3 lines that matter; dimming the rest guides the eye far better than an arrow.
Match the destination. Dark themes pop on social media; light themes such as GitHub Light read better in printed docs and bright slides.
Export at 2x. Phones and laptops have high-density screens, so a 1x image looks soft once it is scaled.

PNG, SVG or clipboard: which export to use

PNG works everywhere — X/Twitter, LinkedIn, Slack, Notion, Keynote, PowerPoint and blog posts — and supports the transparent background. Copy image puts the same PNG on your clipboard, so you can paste it straight into a chat or document without saving a file. SVG scales without blurring and opens in any web browser, but it embeds HTML inside the SVG, so design tools such as Figma or Illustrator may not import it faithfully; use a 4x PNG there instead.

Images are a poor way to share code people need to run, because the text can't be copied and screen readers can't read it. When you post a code image, put the code itself in a gist, repository or alt text too — or send the share link, which reopens the snippet here as editable text.

Related tools

Frequently Asked Questions

How do I make an image of my code?↓

Paste your code into the editor, choose a theme and background, then click Download PNG. The preview updates as you type, and what you see is exactly what gets exported.

Is this a free alternative to Carbon?↓

Yes. Like Carbon, it turns a code snippet into a styled screenshot with a window frame and background. It is free with no signup, renders entirely in your browser, exports PNG at 1x, 2x or 4x or SVG, copies the image to your clipboard, and makes share links that keep the code in the URL. It is an independent tool and is not affiliated with Carbon.

Is my code uploaded anywhere?↓

No. Syntax highlighting and image rendering run entirely in your browser. Your code is never sent to a server. Share links also keep the code inside the link itself, after the # sign, which browsers do not send to servers.

What resolution should I export at?↓

2x is the best default: it stays sharp on Retina and high-DPI screens and in slides, while keeping the file small. Use 1x for the smallest file, and 4x for print or when the image will be zoomed or cropped.

Can I export with a transparent background?↓

Yes. Choose the checkered Transparent swatch and download a PNG. The area around the code window will be transparent, so the image sits cleanly on any slide or web page. Set padding to 0 to remove the margin entirely.

Why doesn't Copy image work in my browser?↓

Copying images needs the Clipboard API with image support, which current Chrome, Edge, Safari and Firefox provide on secure pages. Some older browsers and in-app browsers block it. If copying fails, use Download PNG instead.

How do I highlight specific lines?↓

Type line numbers or ranges into Highlight lines, for example 3-5, 9. Those lines get a subtle background and accent bar, and the other lines are dimmed so readers' eyes go straight to the important part.

Last updated: November 15, 2026