Code to Image

Turn a code snippet into a clean, shareable screenshot in a few clicks.

Free
No sign-up
Runs in your browser

Updated Oct 2026

Code

function fibonacci(n) {
  if (n <= 1) return n;

  let prev = 0, curr = 1;
  for (let i = 2; i <= n; i++) {
    [prev, curr] = [curr, prev + curr];
  }

  return curr;
}

// Generate first 10 Fibonacci numbers
const result = Array.from(
  { length: 10 },
  (_, i) => fibonacci(i)
);

console.log(result);
// [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

File Name

Language

Code Theme

Theme

Background

Padding

Radius

Window

Shadow

Lines

Font

Size

Watermark

Scale

app.js

1function fibonacci(n) {
2  if (n <= 1) return n;
3
4  let prev = 0, curr = 1;
5  for (let i = 2; i <= n; i++) {
6    [prev, curr] = [curr, prev + curr];
7  }
8
9  return curr;
10}
11
12// Generate first 10 Fibonacci numbers
13const result = Array.from(
14  { length: 10 },
15  (_, i) => fibonacci(i)
16);
17
18console.log(result);
19// [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

19 lines341 charsPNG 2x

What is it?

A code to image tool turns a code snippet into a styled screenshot for posts, slides or docs. This one highlights 29 languages, offers 14 themes, 11 gradient backgrounds plus transparent, and macOS or Windows window frames, then exports PNG at 1x, 2x or 3x, SVG, or copies the image to your clipboard, all inside your browser.

How to use

Type or paste your code into the Code box; the preview updates as you type.
Choose a Language, then a Code Theme (Dark or Light) and a Theme.
Adjust Background, Padding, Radius, Window, Shadow, Lines and Font.
Set the File Name shown in the title bar and an optional Watermark.
Pick a Scale, then press Export PNG, Export SVG or Copy Image.

Frequently asked questions

Is my code uploaded anywhere?

No. Highlighting and image rendering happen in your browser with the html-to-image library, and the tool makes no network requests with your code. Close the tab and nothing is kept.

How do I make a high-resolution code screenshot?

Set Scale to 2x or 3x before pressing Export PNG. At 3x each CSS pixel becomes nine image pixels, which stays sharp on retina screens and in slides.

Should I export PNG or SVG?

Use PNG for social posts, chat and slides, since every app can show it. The SVG wraps HTML in a foreignObject, so it renders well in browsers but may not open correctly in design tools like Figma or Illustrator.

Can I get a transparent background?

Yes. Pick the transparent swatch under Background, and the exported PNG keeps an alpha channel around the code window.

Will the exported image use the font I picked?

Yes. JetBrains Mono, Fira Code, Source Code Pro and IBM Plex Mono are served with the page and embedded into the PNG or SVG when you export, so the image looks the same on any device. System Mono uses your device's own monospace font, so it can differ between computers.

Why didn't Copy Image put anything on my clipboard?

Copying images needs the browser's Clipboard API, which some browsers block. When the copy fails, the tool tells you and downloads code-snippet.png instead.

Why share code as an image instead of text?

An image keeps highlighting, font and layout identical on every platform, which suits social posts and slides. For docs or bug reports where people need to copy the code, share text too.

Features

29 languages: Prism-based highlighting for JavaScript, TypeScript, JSX, TSX, Python, Rust, Go, SQL, YAML, Dockerfile, Zig and more.
14 themes: 10 dark themes, including One Dark, Dracula, Nord and Night Owl, and 4 light ones: One Light, GitHub, Material Light and Coldark Light.
Backgrounds: 11 gradient presets plus a transparent option, with padding from 0 to 80px.
Window frame: macOS traffic lights, Windows title-bar controls, or no frame, with corner radius from 0 to 24px and an optional drop shadow.
Typography: JetBrains Mono, Fira Code, Source Code Pro and IBM Plex Mono are bundled with the page, plus your system monospace font, at 12–20px with line numbers on or off.
Export: PNG at 1x, 2x or 3x pixel density, or a PNG copied straight to the clipboard at the same Scale. SVG is exported at its natural size.
Title and watermark: Set the file name shown in the title bar (up to 100 characters) and a watermark of up to 50 characters.

1function fibonacci(n) { 2 if (n <= 1) return n; 3 4 let prev = 0, curr = 1; 5 for (let i = 2; i <= n; i++) { 6 [prev, curr] = [curr, prev + curr]; 7 } 8 9 return curr; 10} 11 12// Generate first 10 Fibonacci numbers 13const result = Array.from( 14 { length: 10 }, 15 (_, i) => fibonacci(i) 16); 17 18console.log(result); 19// [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

What is it?

How to use

Type or paste your code into the Code box; the preview updates as you type.

Choose a Language, then a Code Theme (Dark or Light) and a Theme.

Adjust Background, Padding, Radius, Window, Shadow, Lines and Font.

Set the File Name shown in the title bar and an optional Watermark.

Pick a Scale, then press Export PNG, Export SVG or Copy Image.

Frequently asked questions

Is my code uploaded anywhere?

No. Highlighting and image rendering happen in your browser with the html-to-image library, and the tool makes no network requests with your code. Close the tab and nothing is kept.

How do I make a high-resolution code screenshot?

Set Scale to 2x or 3x before pressing Export PNG. At 3x each CSS pixel becomes nine image pixels, which stays sharp on retina screens and in slides.

Should I export PNG or SVG?

Can I get a transparent background?

Yes. Pick the transparent swatch under Background, and the exported PNG keeps an alpha channel around the code window.

Will the exported image use the font I picked?

Why didn't Copy Image put anything on my clipboard?

Copying images needs the browser's Clipboard API, which some browsers block. When the copy fails, the tool tells you and downloads code-snippet.png instead.

Why share code as an image instead of text?

An image keeps highlighting, font and layout identical on every platform, which suits social posts and slides. For docs or bug reports where people need to copy the code, share text too.

Features

29 languages

Prism-based highlighting for JavaScript, TypeScript, JSX, TSX, Python, Rust, Go, SQL, YAML, Dockerfile, Zig and more.

14 themes

10 dark themes, including One Dark, Dracula, Nord and Night Owl, and 4 light ones: One Light, GitHub, Material Light and Coldark Light.

Backgrounds

11 gradient presets plus a transparent option, with padding from 0 to 80px.

Window frame

macOS traffic lights, Windows title-bar controls, or no frame, with corner radius from 0 to 24px and an optional drop shadow.

Typography

JetBrains Mono, Fira Code, Source Code Pro and IBM Plex Mono are bundled with the page, plus your system monospace font, at 12–20px with line numbers on or off.

Export

PNG at 1x, 2x or 3x pixel density, or a PNG copied straight to the clipboard at the same Scale. SVG is exported at its natural size.

Title and watermark

Set the file name shown in the title bar (up to 100 characters) and a watermark of up to 50 characters.