Code to Image Converter
Turn a code snippet into a clean, shareable PNG with a macOS-style window frame and line numbers.
About the Code to Image Converter
Drop in a code snippet, choose a color theme, and export a clean PNG ready for a tweet, a doc, or a slide deck. One thing worth knowing going in: the renderer draws plain monospace text with line numbers rather than parsing the language, so keywords, strings, and comments all end up in the same color.
Why there's no real syntax highlighting
Genuine syntax highlighting requires a language-aware tokenizer that understands each language's specific grammar, knowing where a string starts and ends, which words are reserved keywords versus your own identifiers, what counts as a comment, and that logic differs meaningfully between JavaScript, Python, SQL, and every other language. Building and maintaining that for many languages is a substantially larger undertaking than this tool's scope. The Language Label field you can fill in exists purely as a visual label, similar to how a code block on GitHub shows its language name in the corner, it doesn't drive any actual coloring logic. If you specifically need highlighted, colorized code in your exported image, you'd want a dedicated syntax-highlighting tool or editor extension to color the snippet first, then bring that already-colored HTML into an image exporter.
How the image export actually works
The Download button doesn't take a literal screenshot of your screen, it uses the html2canvas library to walk through the styled preview card's DOM structure and redraw each element, its background, text, borders, and rounded corners, onto an HTML <canvas> element, essentially simulating what the browser would visually render. That canvas is then converted to a PNG data URL and downloaded. This DOM-to-canvas simulation approach is what allows the tool to export an image without needing any server involved, but it also means visual fidelity depends on how completely the library can interpret each CSS feature in play, most common properties render accurately, but it's not literally identical to how the browser's own compositor paints the page.
Why the export renders at double resolution
The export call includes scale: 2, which tells html2canvas to render the card at twice its on-screen pixel dimensions before generating the final image. Without this, a card that looks crisp on your screen could appear soft or slightly blurry once shared and viewed on a high-density (Retina-class) display, since a 1x image gets upscaled by the viewing device. Rendering at 2x bakes in that extra pixel density from the start, so the downloaded PNG looks sharp across a wider range of screens without any extra effort from you.
Why the corners stay transparent instead of showing a white background
The export also sets backgroundColor: null, which tells html2canvas not to fill in any background behind the rendered card, so the space outside the card's own rounded corners exports as genuinely transparent PNG pixels rather than a solid white or black fill. That's also why the live preview area behind the card shows a checkered pattern, the classic convention (borrowed from tools like Photoshop and Figma) for visually indicating "this area is transparent," letting you confirm exactly what will and won't have a background before you download.
Why the three theme options only change colors, not fonts
Dark, Light, and Ocean each swap out three color values, the card's background, its text color, and the title bar's background, while everything else about the layout, spacing, and the JetBrains Mono monospace font stays identical across all three. Keeping the font fixed is a deliberate consistency choice: monospace fonts are what make code actually readable, aligning indentation and keeping character widths uniform, and it's also the font most code-sharing platforms and editors default to, so images generated here look immediately familiar as "a code screenshot" regardless of which color theme you pick.
What the window chrome checkbox actually toggles
Unchecking "Show window chrome" removes the entire title bar, including the red/yellow/green traffic-light dots and the filename label, leaving just the raw code block with line numbers. This is useful when you want a cleaner, more minimal-looking snippet without the macOS-style window framing, for embedding directly into a technical document or blog post where the decorative window chrome would be visual noise rather than a helpful frame.
Frequently Asked Questions
Why doesn't the code get colored based on the language I choose?
Real syntax highlighting needs a language-specific tokenizer that understands each language's own grammar, which is a much larger scope than this tool covers. The Language Label field is a visual label only, similar to a language tag on a code block, it doesn't drive any coloring logic.
Does the Download button take an actual screenshot of the page?
No, it uses the html2canvas library to walk the preview card's DOM and redraw its elements onto a canvas, simulating the visual rendering rather than capturing a literal screen image. This lets the export happen entirely in the browser without needing a server.
Why is the exported image rendered at double the on-screen size?
The export uses scale: 2, rendering the card at twice its normal pixel dimensions so the resulting PNG looks sharp on high-density Retina-class displays instead of appearing soft when the image gets upscaled by the viewing device.
Why does the preview area show a checkered pattern behind the card?
It's a standard convention for indicating transparency, similar to Photoshop or Figma. Since the export preserves transparent pixels outside the card's rounded corners, the checkerboard lets you see exactly what will and won't have a background before downloading.
Does my code get uploaded anywhere when I generate the image?
No, the entire rendering and export process happens locally in your browser using html2canvas and the Canvas API. Nothing is sent to a server, which matters if you're generating images from proprietary or sensitive code snippets.
What happens if I put special characters in the filename field?
The download filename is automatically sanitized, any character outside letters, numbers, periods, underscores, and hyphens gets replaced with an underscore, preventing invalid or broken filenames on your operating system.