A code image is a picture of a snippet with syntax colours, padding and a background, made for slides, posts and docs where real code blocks are not available. Paste code below, pick a language, theme and background, choose a size such as 1200 by 675, and download a sharp PNG or an SVG.
| Preset | Pixels | Good for |
|---|---|---|
| Auto | Fits the code | Docs, slides, README files |
| Landscape 16:9 | 1200 by 675 | Link previews and wide feed posts |
| Square | 1080 by 1080 | Square feed posts |
| Portrait 4:5 | 1080 by 1350 | Tall feed posts |
Updated
Paste or type code, and the preview updates as you go. Language is detected for you, or pick one of nine. PNG files are exported at twice the size for sharp text on high-density screens.
Crop to the part that matters. Remove imports and boilerplate unless they are the point, and use a comment to mark the line you want people to look at.
Contrast matters as much in a picture as on a page. The themes here keep comments readable but quieter than the code, and keep strings and keywords clearly apart.
When you post the image, describe what the code does in the alt text, for example: JavaScript function that debounces a search input by 300 milliseconds. Paste the code itself in the post body or a reply if the platform allows it.
No. Highlighting and image export happen in your browser. Nothing is sent to a server, so it is safe for private code.
It is exported at 2x pixel density so text stays sharp on high-resolution phone and laptop screens. When it is displayed at the chosen size, every CSS pixel has four image pixels behind it.
SVG keeps the code as text inside a vector image, so it scales to any size and the text can still be selected in some viewers. It uses the viewer's own monospace font, so it can look slightly different from the PNG on another computer.
It is a light tokenizer that colours keywords, strings, numbers, comments, functions, tags and attributes. That covers what makes a snippet readable in an image. It is not a full parser, so unusual syntax may be coloured as plain text.
Related: Website mockup generator, OG image generator, JavaScript formatter, Social media image sizes, HTML viewer.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.