Code to image converter

How it works

Copy your code from the editor and paste it in the left box. The image on the right is redrawn as you type. Tab characters become 4 spaces, trailing spaces and blank lines at the start and end are dropped, and indentation stays as it is. The width follows the longest line; lines are never wrapped. Example: a 12-line JavaScript function whose longest line has 60 characters becomes a PNG about 1,400 pixels wide at 2×, which looks crisp on X or LinkedIn. A line longer than 100 characters makes the image very wide; the result line tells you, and breaking that line reads better. One image holds up to 400 lines. The code is drawn in your browser and is not sent to any server.

This tool is also known as code to image, code to image converter, code snippet image, code screenshot generator, carbon alternative, code to png.

What is Code snippet image?

A code snippet image is a piece of code shared as a picture rather than as text. People use it on slides, blog covers and social posts, where a text box would break the indentation or not use a monospaced font. Code in a picture cannot be copied, so if readers need to run it, add the text version next to the image as well.

What is Monospaced font?

In a monospaced font every character takes the same width: an i uses as much room as an m. Code is shown in such fonts because indentation and aligned columns only line up that way. The tool uses the code font already on your device, such as SF Mono or Menlo on a Mac and Consolas on Windows.

Code image vs. screenshot: what is the difference?

A screenshot of your editor also captures menus, tabs, error squiggles and your screen's resolution, it is fiddly to crop, and text blurs on small screens. A code image draws only the code: margins, line numbers and background are the same every time, it stays sharp at 2×, and no personal file names or project paths show. Use a screenshot to show the editor; use a code image to share the code itself.

Why there is no syntax colouring and no wrapping

This tool writes the code in a single colour and does not paint keywords. Colouring needs rules for every language, and a language guessed wrongly gives a messier picture than plain text. Line numbers are dimmed and the code is drawn in high contrast, because readability on a slide or phone comes first.

Lines are not wrapped, because wrapped code is misread: in Python indentation carries meaning, and a piece pushed to the next line looks like a new line. A long line widens the image and the result line warns you; splitting it in the code itself before sharing is the cleanest fix.

Which settings to use where

On social media a dark card on a colourful background stands out in the feed. The light theme is easier on the eyes on white slides and documents and saves ink when printed.

If you will place the image inside another design, choose no background: only the code card remains, with transparent corners. Keep line numbers on if you will say "look at line 5" in a talk; turn them off for a one-line command.

Frequently asked questions

How do I turn code into an image?

Paste your code in the left box on this page. The window-style code image appears on the right at once. Pick the colours and press "Download" to save the PNG in your Downloads folder.

Is my code sent to a server?

No. The image is drawn inside your browser and the code is not uploaded anywhere, so private or company code is safe to use.

Does it do syntax highlighting?

No. The code is written in one colour with dimmed line numbers. That looks the same in every language and cannot colour anything wrongly.

Why is my image so wide?

The width follows the longest line and lines are never wrapped. A line over 100 characters widens the image; break that line in your code and the image gets narrower.