Free developer tool

Turn your code into a shareable image

Paste a snippet, pick a theme, backdrop and window style, highlight lines and export it as PNG or SVG. Create clean, readable code images for blog posts, slides, documentation and social media.

Open the editor No sign-up required

Free
Runs in your browser
PNG and SVG export

What you can do

Faster than taking a screenshot, and the result is equally sharp every time.

Themes and fonts

Choose from built-in color themes or upload your own VS Code theme (.json). Adjust the font, size, line height and ligatures.

Line highlighting

Highlight important lines, focus on a section and dim the rest, mark added and removed lines with + / −, and attach notes to lines.

Blur secrets

Automatically blur values such as API keys, passwords and tokens in one click, or hide any text you select.

Multiple blocks

Combine code, terminal, before / after comparison and Markdown text blocks in a single image, side by side or stacked.

Social media sizes

Switch to X (Twitter), LinkedIn, square, portrait post, story or link preview sizes in one click.

Clean up code

Format with Prettier, remove common indentation, convert tabs and spaces, and trim trailing whitespace.

Import from GitHub and Gist

Paste the URL of a GitHub file or a Gist and the code loads straight into the editor.

Download, copy, share

Download PNG or SVG, copy the image to the clipboard and get alt text for accessibility. Create share links and embed codes with your account.

How it works

Add your code

Open the editor and paste your code, or import it from a GitHub / Gist URL. Then pick the language of your code from the list.
Style it

Choose the color theme, backdrop (solid, gradient or mesh), window style and output size. Highlight lines if needed.
Export

Download as PNG or SVG, copy it to the clipboard, or sign in to create a share link and embed code.

Where it helps

Blogs and docs

Show code examples with a consistent look; SVG output stays crisp on every screen.

Social media

Share code on X and LinkedIn with readable images in the right dimensions.

Slides and teaching

Highlight the lines that matter in slides and course material.

Code reviews

Use a before / after block to show a change with its added and removed lines.

Why a code image beats a screenshot

Screenshots from your editor usually include your own theme, toolbars and extra whitespace, and they can look blurry depending on your screen resolution. Code Image redraws only the code, using the theme and size you choose, so the result has the same sharpness and dimensions every time.

SVG output is vector-based, so it stays sharp even when scaled up in a blog post or presentation. For PNG output you can raise the export scale to get crisper images for high-resolution displays.

Code inside an image cannot be read by search engines or screen readers. That is why the editor also prepares alt text describing the image; use it as the alt attribute when you publish. Where readers need to copy the code, it is best to also provide it as text next to the image.

Frequently asked questions

Is Code Image free?

Yes. Using the editor and downloading PNG and SVG files is free and does not require an account.

Is my code sent to a server?

The image is rendered in your browser; your code is not sent to the server for PNG and SVG downloads. Only when you create a share link are the image and editor settings saved with your account.

Which programming languages are supported?

Syntax highlighting covers common languages such as JavaScript, TypeScript, Python, PHP, Java, C#, Go, Rust, SQL, HTML, CSS, JSON and YAML, and many more. For anything else you can choose plain text.

Why do share links require signing in?

Shared images are stored with your account, so you can see them in "My shares" and delete them at any time.

Can I use my own VS Code theme?

Yes. Upload the .json file of a VS Code color theme (up to 1 MB) to use the same colors in your image.

Can I save my settings?

Yes. Save the settings you like as a preset. Without an account presets are stored in this browser; when signed in they are stored in your account.

Create your first code image now

Start without signing up; sign in for free whenever you want share links and presets stored in your account.

Open the editor