Code to Image
Turn code into a clean picture with syntax colours, a window frame and a background, for slides, posts and docs.
Free, no uploads, no sign-up. Runs 100% in your browser.
How Code to Image works
Code is coloured by highlight.js (the language is detected for you), laid out with a window frame, then saved as a picture with html-to-image at up to 4x size.
Input: Code, Text. Output: PNG, SVG, JPG.
How to use Code to Image
- Paste code or open a file.
- Pick a theme, background and window style.
- Set padding, width and font size.
- Download PNG, SVG or JPG, or copy the picture.
Tips
- Generated CSS works in every modern browser.
- Exports are produced locally, so you can work offline.
Code to Image FAQ
- Are my files uploaded?
- No. This tool runs entirely in your browser tab. Files are read from your disk into memory and the result is generated locally.
- Is it free? Are there limits or watermarks?
- Free and open source (MIT). There are no file-size caps, daily quotas, accounts or watermarks.
- Does it work offline?
- Yes, once the page (and any engine it needs) has loaded, it keeps working without a connection thanks to the service worker cache.
Related tools
- HTML to Image: Render an HTML and CSS snippet to PNG, JPG, WEBP or SVG at high resolution.
- Social Banner & Thumbnail Maker: Make YouTube thumbnails, link preview images, banners and posts for X, LinkedIn, Instagram and more from templates.
- Jupyter Notebook Converter: View .ipynb notebooks without Jupyter and save them as HTML, PDF, Markdown or a Python script, or turn a script back into a notebook.
- Color Palette Extractor: Extract dominant colors and export CSS/Tailwind palettes.