Code to Image
Turn code snippets into beautiful PNG or SVG images. Runs in your browser.
About this code to image
This code to image tool turns a code snippet into a clean, syntax-highlighted picture for slides, docs, blog posts and social media. Pick a theme, a background, a window frame and padding, then download a PNG at up to 4x resolution, an SVG, or copy the image straight to your clipboard.
Highlighting covers 29 languages plus plain text, from JavaScript, Python and Go to SQL, YAML, Dockerfile and Bash, with auto-detection when you do not want to choose. Shared indentation is trimmed, so a function copied from deep inside a class still sits flush left.
The image is drawn from your own browser's rendering. The code is not uploaded, which makes it safe for snippets from private repos.
Features
Eight themes, light and dark
Five dark themes (Midnight, Graphite, Ember, Forest, Neon) and three light ones (Paper, Workbench, Arctic), each with its own colors for keywords, strings, numbers, functions, types and comments.
Backgrounds and frames
Choose a gradient, a solid custom color, grid paper or a transparent background. Add a macOS-style window with three dots, a Windows-style title bar, or no frame at all, with an optional file name in the title.
Sharp exports
PNG at 1x, 2x, 3x or 4x pixel density. 2x looks crisp on high-density laptop and phone screens. SVG export keeps the text as real text, and Copy image puts a PNG on the clipboard for pasting into chat or slides.
Layout controls
Padding from 0 to 128 px, font size from 10 to 28 px, corner radius, drop shadow, line numbers, and a choice of JetBrains Mono, IBM Plex Mono or your system's monospace font. Set a fixed width to wrap long lines, or leave it on auto.
Share links without a server
Copy share link packs the compressed code into the part of the URL after #, which browsers never send to a server. Your style settings sit in the normal query string.
How to use the code to image
- 1Paste your code. The language is detected, or pick it yourself.
- 2Choose a theme, background, window style, padding and font size.
- 3Download a PNG or SVG, or copy the image to your clipboard.
When to use it
Posting a tip on social media
A screenshot of five lines of code gets read; a pasted block of text gets mangled by the platform. Use 2x scale and a dark theme for feeds.
Slides for a talk
Light themes such as Paper read better on projectors in bright rooms. Bump the font size to 20 px or more so the back row can follow.
Docs and READMEs
A transparent PNG drops onto any page color. Keep the real code in the text too, so readers can copy it and search engines can index it.
Before and after comparisons
Format the code first in the Code Beautifier (Prettier Online), export one image of the old version and one of the new, and put them side by side.
How do I make an image of my code?
Paste the code into the box under the preview. The language is detected automatically, or you can choose it. Adjust the theme, background and window style on the left, then press Download PNG. The preview is exactly what gets exported, at the scale you pick.
For long snippets, keep it short. Ten to twenty lines read well in a single image. Past forty, readers start zooming, and a link to the full file serves them better.
PNG or SVG: which should I export?
PNG is the safe choice for social media, chat apps, slides and email, because every app shows it the same way. Export at 2x so it stays sharp when a high-density screen scales it.
SVG keeps the text as text, so it stays sharp at any zoom and the file is small. It embeds the page styles with an HTML foreignObject element, which browsers display well but some design tools and older viewers do not. Test it where you plan to use it, and fall back to PNG if it looks wrong.
Are code images accessible?
Not by themselves. A screen reader cannot read code inside a picture, and nobody can copy it. When you post an image, add alt text that describes what the code does, or paste the code itself as text in the post or a reply.
Contrast matters too. In all eight themes, code text and highlighted tokens meet the WCAG 2.2 contrast ratio of 4.5:1 against their background. Comments and line numbers are dimmer on purpose, so do not hide the important part of your snippet in a comment.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Where your code goes | Rendered in your browser, never uploaded | Often rendered on a server |
| Export formats | PNG at 1x to 4x, SVG, copy to clipboard | PNG at one size |
| Share links | Code in the # part, never sent to a server | Code stored on the service |
| Indentation | Shared indentation and blank edges trimmed | Pasted as is |
| Watermark | None | Sometimes added on free plans |
Tips
- Leave Width on auto unless you need a fixed size. A fixed width wraps long lines, which can break the shape of the code.
- Use the title for the file name, like checkout.ts, so readers know the language and context at a glance.
- For a transparent PNG, pick the checkered swatch. The window keeps its theme color and only the area around it is clear.
- Building a matching social card? The CSS Gradient Generator makes background gradients, and the Open Graph Preview shows how a link card will look.
- Need a smaller file for the web? Run the PNG through the Image Compressor.
Questions
How do I take a nice screenshot of code?
Paste the code here, choose a theme and background, and download a PNG. It is sharper than a screen capture because the text is drawn at the export scale, not grabbed from your monitor's pixels.
What resolution should I use for code images?
Use 2x for social media, docs and slides. It doubles the pixel size, so text stays crisp on high-density screens. Use 3x or 4x only for print or very large displays, since files get much bigger.
Which languages are supported?
Twenty-nine plus plain text, including JavaScript, TypeScript, Python, Java, Kotlin, C, C++, C#, Go, Rust, PHP, Ruby, Swift, Dart, Lua, SQL, HTML, XML, CSS, SCSS, JSON, YAML, Bash, PowerShell, Dockerfile, GraphQL, Markdown and diff.
Can I make the background transparent?
Yes. Pick the checkered swatch under Background. The PNG then has a transparent area around the window, so it sits on any page color.
Is there a watermark?
No. The image contains only your code, the frame and the background you chose.
Why does my SVG look different in a design app?
The SVG wraps the rendered HTML in a foreignObject element. Browsers display that faithfully, but some editors and viewers do not support it. Use the PNG for those apps.
Is my code uploaded to make the image?
No. Highlighting and rendering happen in your browser. Even the share link keeps the code after the # mark, which is never sent to a web server.