Why turn code into an image?
Plain-text code pastes badly on platforms built around images — Twitter/X, LinkedIn, Instagram, and most chat apps either strip formatting or render a wall of unstyled monospace text that's hard to read at a glance. A code screenshot with syntax-appropriate theming, rounded window chrome, and line numbers reads instantly as "code" and stays readable at thumbnail size, which is why it's become the standard way to share snippets on social platforms.
This tool renders your pasted code onto an HTML canvas — macOS-style window dots, a themed background, line numbers, and a small watermark — entirely in your browser, then lets you export it as a PNG.
When to use it
Use it for sharing a snippet on social media or in a blog post header image, for a slide in a technical talk where a plain code block would look inconsistent with the rest of the deck, or for a quick before/after comparison image when explaining a fix. It's not a replacement for a real code block in documentation or a README — those should stay as selectable, copyable text — reserve image export for contexts where only an image will do.
Four built-in themes (dark, light, monokai, github) cover the common aesthetic choices; font size and padding are adjustable so the output fits square social posts or wider blog headers.
Example
Paste a short function like the fibonacci example pre-filled in the tool, pick the "monokai" theme, click Preview to render it to the canvas below, then Download PNG to save a ready-to-post image — line-numbered, with rounded corners and window dots, sized automatically to fit the longest line in your snippet.
How to use the Code to Image tool
- 1
Paste your code
Drop a function, class, or snippet into the code panel.
- 2
Pick a theme and size
Choose from dark, light, monokai, or github, and adjust font size to taste.
- 3
Click Preview
The canvas renders your code with line numbers, window chrome, and a watermark.
- 4
Download the PNG
Save the rendered image, ready to paste into a social post, slide, or blog header.
Frequently asked questions
Is my code uploaded anywhere?
No — rendering happens entirely on an HTML canvas in your browser, and the PNG is generated and downloaded client-side. Nothing is sent to a server.
Does it apply real syntax highlighting?
No — the current rendering uses a single text color per theme rather than tokenizing keywords, strings, and comments separately. It's a styled code card, not a full syntax-highlighted screenshot like you'd get from an editor's "copy as image" feature.
Can I share the exact snippet and settings with someone else?
Yes — use "Copy link to this result" to get a permalink that restores your code, theme, and sizing so a teammate opens the tool with the same snippet already loaded and can re-render or tweak it.
Why is the image wider than I expected?
Canvas width is computed from your longest line at the chosen font size, so very long lines (unwrapped) produce a wide image. Break long lines manually in the input if you want a narrower, more square output for platforms like Instagram.
Related Export Tools
Markdown Preview with Split Pane and Shareable Link
Render Markdown as a shareable preview page
JSON Visual Tree
Visualize JSON data as an interactive tree
Text to File
Download text as .txt, .md, or .json files
OG Image Generator
Generate Open Graph images using Satori in Next.js
HTML to Video Converter
Convert HTML with CSS animations into a downloadable MP4 video — rendered frame-by-frame entirely in your browser.
Get the next tool before you need it
One email a week: new and trending developer tools, fresh comparisons, and what shipped. Unsubscribe in one click.