code → image

Code screenshots for X and LinkedIn.

Code reads better in a post as an image. Pick the lines that matter, choose a theme, and copy or export it in 16:9, 1:1 or 4:5.

Open the editor

66 themes
Files of any size
Up to 4× export

useDebounce.ts

// Wait until the user stops typing
export function useDebounce<T>(value: T, delay = 300) {
  const [settled, setSettled] = useState(value)
  useEffect(() => {
    const id = setTimeout(() => setSettled(value), delay)
    return () => clearTimeout(id)
  }, [value, delay])
  return settled // 'settled'
}

Theme: GitHub Dark

how it works

Three steps, about ten seconds.

01
Bring your code
Paste it, type it, or open a file from your computer. The language is picked up from the file name.
02
Make it yours
Choose a theme, font, window and background. Wrap long lines so the image stays a sensible shape.
03
Share it
Export a PNG, JPG or SVG, or copy the image straight into your post or chat.

big files

Open the whole file. Show only what matters.

A file with thousands of lines opens instantly and scrolls smoothly. Click a line number, shift-click another, and only those lines go into the image.

Real line numbers. The image can show 214–226, just like your editor.
Highlight lines. Point at the change you want people to notice.
Neat wrapping. Long lines fold under their own indent instead of stretching the image.

themes

66 themes. Twelve you won’t find anywhere else.

Every VS Code favourite, from Dracula to Tokyo Night, plus a set of Snippy originals made for screenshots.

const theme = 'ember'
export default {
  size: 14, // dark
}

EmberORIGINAL

const theme = 'midnight'
export default {
  size: 14, // dark
}

Midnight MintORIGINAL

const theme = 'neon'
export default {
  size: 14, // dark
}

Neon BloomORIGINAL

const theme = 'blueprint'
export default {
  size: 14, // dark
}

BlueprintORIGINAL

const theme = 'graphite'
export default {
  size: 14, // dark
}

GraphiteORIGINAL

const theme = 'dusk'
export default {
  size: 14, // dark
}

DuskORIGINAL

const theme = 'phosphor'
export default {
  size: 14, // dark
}

PhosphorORIGINAL

const theme = 'andromeeda'
export default {
  size: 14, // dark
}

Andromeeda

const theme = 'aurora'
export default {
  size: 14, // dark
}

Aurora X

const theme = 'ayu'
export default {
  size: 14, // dark
}

Ayu Dark

const theme = 'catppuccin'
export default {
  size: 14, // dark
}

Catppuccin Frappé

const theme = 'catppuccin'
export default {
  size: 14, // dark
}

Catppuccin Macchiato

const theme = 'catppuccin'
export default {
  size: 14, // dark
}

Catppuccin Mocha

const theme = 'dark'
export default {
  size: 14, // dark
}

Dark Plus

const theme = 'ember'
export default {
  size: 14, // dark
}

EmberORIGINAL

const theme = 'midnight'
export default {
  size: 14, // dark
}

Midnight MintORIGINAL

const theme = 'neon'
export default {
  size: 14, // dark
}

Neon BloomORIGINAL

const theme = 'blueprint'
export default {
  size: 14, // dark
}

BlueprintORIGINAL

const theme = 'graphite'
export default {
  size: 14, // dark
}

GraphiteORIGINAL

const theme = 'dusk'
export default {
  size: 14, // dark
}

DuskORIGINAL

const theme = 'phosphor'
export default {
  size: 14, // dark
}

PhosphorORIGINAL

const theme = 'andromeeda'
export default {
  size: 14, // dark
}

Andromeeda

const theme = 'aurora'
export default {
  size: 14, // dark
}

Aurora X

const theme = 'ayu'
export default {
  size: 14, // dark
}

Ayu Dark

const theme = 'catppuccin'
export default {
  size: 14, // dark
}

Catppuccin Frappé

const theme = 'catppuccin'
export default {
  size: 14, // dark
}

Catppuccin Macchiato

const theme = 'catppuccin'
export default {
  size: 14, // dark
}

Catppuccin Mocha

const theme = 'dark'
export default {
  size: 14, // dark
}

Dark Plus

const theme = 'ember'
export default {
  size: 14, // dark
}

EmberORIGINAL

const theme = 'midnight'
export default {
  size: 14, // dark
}

Midnight MintORIGINAL

const theme = 'neon'
export default {
  size: 14, // dark
}

Neon BloomORIGINAL

const theme = 'blueprint'
export default {
  size: 14, // dark
}

BlueprintORIGINAL

const theme = 'graphite'
export default {
  size: 14, // dark
}

GraphiteORIGINAL

const theme = 'dusk'
export default {
  size: 14, // dark
}

DuskORIGINAL

const theme = 'phosphor'
export default {
  size: 14, // dark
}

PhosphorORIGINAL

const theme = 'paper'
export default {
  size: 14, // light
}

PaperORIGINAL

const theme = 'sand'
export default {
  size: 14, // light
}

SandORIGINAL

const theme = 'matcha'
export default {
  size: 14, // light
}

MatchaORIGINAL

const theme = 'arctic'
export default {
  size: 14, // light
}

ArcticORIGINAL

const theme = 'candy'
export default {
  size: 14, // light
}

CandyORIGINAL

const theme = 'catppuccin'
export default {
  size: 14, // light
}

Catppuccin Latte

const theme = 'everforest'
export default {
  size: 14, // light
}

Everforest Light

const theme = 'ember'
export default {
  size: 14, // dark
}

EmberORIGINAL

const theme = 'midnight'
export default {
  size: 14, // dark
}

Midnight MintORIGINAL

const theme = 'neon'
export default {
  size: 14, // dark
}

Neon BloomORIGINAL

const theme = 'blueprint'
export default {
  size: 14, // dark
}

BlueprintORIGINAL

const theme = 'graphite'
export default {
  size: 14, // dark
}

GraphiteORIGINAL

const theme = 'dusk'
export default {
  size: 14, // dark
}

DuskORIGINAL

const theme = 'phosphor'
export default {
  size: 14, // dark
}

PhosphorORIGINAL

const theme = 'paper'
export default {
  size: 14, // light
}

PaperORIGINAL

const theme = 'sand'
export default {
  size: 14, // light
}

SandORIGINAL

const theme = 'matcha'
export default {
  size: 14, // light
}

MatchaORIGINAL

const theme = 'arctic'
export default {
  size: 14, // light
}

ArcticORIGINAL

const theme = 'candy'
export default {
  size: 14, // light
}

CandyORIGINAL

const theme = 'catppuccin'
export default {
  size: 14, // light
}

Catppuccin Latte

const theme = 'everforest'
export default {
  size: 14, // light
}

Everforest Light

customise

Every detail, your call.

Code

10 code fonts and ligatures
Size, line height, spacing
Tab width
Wrap at any width
Highlight and fade lines

Window

macOS, Windows, plain or none
Editable file title
Corner radius
Soft or deep shadow
Thin border

Canvas

16 gradients and mesh blends
Any solid colour
Transparent
Grain texture and padding
16:9, 1:1 and 4:5 sizes

Export

PNG, JPG or SVG
1× to 4× sharpness
Copy to clipboard
Named after your file
Remembers your settings

faq

Questions

What image size works best for a post?

From this page the editor starts at 16:9, a wide shape that suits the X timeline. For LinkedIn, 1:1 or 4:5 takes up more of the feed. Change it any time under Image size.

How do I keep long lines readable?

Turn on line wrapping: long lines fold under their own indent, so the image keeps a sensible shape. Or pick only the lines that matter and highlight the change.

Is my code uploaded anywhere?

No. Highlighting and image export both happen inside your browser. Nothing is sent to a server, so it is safe for private or work code.

Is it really free?

Yes. No sign-up, no limits, and no watermark unless you turn on the small credit yourself.

Ready when your code is.

Open the editor

Three steps, about ten seconds.

Bring your code

Make it yours

Share it

Open the whole file. Show only what matters.

66 themes. Twelve you won’t find anywhere else.

Every detail, your call.

Code

Window

Canvas

Export

Questions

Ready when your code is.