code-to-image generator

How to use the code-to-image generator

  1. Paste or type your code in the editor — syntax highlighting applies automatically based on detected language (30+ languages supported).
  2. Pick a theme — VS Code Dark, GitHub Light, Dracula, Nord, Monokai, One Dark — or enable system match to follow the viewer's OS preference.
  3. Customize the window frame: macOS traffic lights, Windows title bar, Linux GNOME, or none. Add a filename, path, or language label.
  4. Adjust background: solid color, gradient, or transparent. Choose padding and rounded-corner radius.
  5. Export as PNG (for social media, Slack, blog posts), SVG (for scalable print), or copy as base64 data URL.

When to use it

A code screenshot tool produces cleaner, brand-consistent images than a desktop screenshot of your editor. The rendered output uses vector text (crisper at any zoom level), controls padding and background, and strips noise like cursor artifacts and unrelated editor panels. Use a real screenshot tool for debugging situations where the actual editor state matters. Alternative: Carbon (carbon.now.sh) started this category and still has the richest theme library, but lacks SVG export and Tailwind color presets.

Example

// A typical React component — rendered with macOS chrome and VS Code Dark theme
export function Button({ children, variant = 'primary' }) {
  const className = variant === 'primary'
    ? 'bg-blue-600 hover:bg-blue-700 text-white'
    : 'bg-gray-100 hover:bg-gray-200 text-gray-900';
  return <button className={className}>{children}</button>;
}

Frequently asked questions

Which languages support syntax highlighting?
30+ including JavaScript, TypeScript, JSX, TSX, Python, Go, Rust, Java, Kotlin, Swift, C/C++, C#, Ruby, PHP, SQL, HTML, CSS, YAML, JSON, Markdown, Bash, and Dockerfile.
Can I export at high DPI for Twitter/X?
Yes — toggle 2× or 3× export DPI. Twitter's image pipeline recompresses aggressively, so export at 2× to preserve text sharpness.
Does it work offline?
The tool runs client-side after the first load. Refresh once while online, then you can generate screenshots offline indefinitely.
Is there an API?
Not currently. Pull requests welcome.
Can I share a permalink to a specific code snippet?
Yes — the URL encodes the full state (code, theme, chrome style), so sharing the URL reproduces the exact screenshot.

Related generators

Last updated: 2026-04-23