How is the PNG generated?

The preview element is rendered to a canvas using the html2canvas library, which captures the styled HTML exactly as you see it in the browser, then exports it as a PNG file.

Is my code uploaded to a server?

No. Everything runs locally in your browser. Your code never leaves your device.

Can I use the output commercially?

Yes. Images generated by this tool are yours to use for any purpose — blog posts, social media, presentations, or documentation.

Why does the download look pixelated?

Increase the font size or the browser's device pixel ratio setting. The image is generated at your screen's native resolution.

📸

Code to Image

Convert code snippets to beautiful syntax-highlighted images for sharing on social media, presentations and documentation. Choose theme, font and padding. Free, browser-based.

💻 Developer Tools Free Browser-based

Tool

Language

Font size

Background

Code

Preview

snippet.js

Why Share Code as an Image?

Code images are easier to share on social media, presentations and documentation where raw text formatting is lost. A beautifully styled code card with a gradient background and macOS-style window chrome makes your snippet instantly recognisable and visually polished.

Supported Languages

Language	Colour scheme applied
JavaScript / Python / PHP	Keywords, strings, comments highlighted
CSS	Properties, values, selectors
HTML	Tags, attributes, values
Bash / SQL / JSON	Structural token colouring
Plain text	No highlighting — plain white on dark

Tips for Great Code Cards

Keep snippets short (under 20 lines) for the clearest images. Choose a font size of 14–16px for social media sharing. Use the transparent background option when dropping the card onto a custom slide background.

Code to Image

Why Share Code as an Image?

Supported Languages

Tips for Great Code Cards

Frequently Asked Questions