WerklyTools
Esc
↑↓ navigate↵ open
EN
Buy me a coffee

Code to image

Create attractive code screenshots for social media, slides, blogs or documentation. Paste your code, pick a language, theme and background, and download a crisp PNG or a scalable SVG.

Processed 100% in your browser

Background
Preview

Ctrl + Enter runCtrl + C copy result

How to use

  1. 1Paste your code in the editor.
  2. 2Choose the language (or leave auto-detect), the theme and the background.
  3. 3Adjust padding, font size, shadow and line numbers.
  4. 4Download the PNG or SVG, or copy the image to the clipboard.

Use cases

  • Share a code snippet on X, LinkedIn or Instagram.
  • Put good-looking code in slides and presentations.
  • Illustrate blog posts and tutorials.
  • Document examples without depending on editor formatting.

Frequently asked questions

Is my code sent to a server?

No. Highlighting and image generation happen in your browser, so your code never leaves your device.

Which languages are supported?

JavaScript, TypeScript, Python, Java, C, C++, C#, Go, Rust, PHP, Ruby, Swift, Kotlin, SQL, Bash, JSON, YAML, HTML/XML, CSS and Markdown, plus auto-detection.

What is the best export resolution?

With 2× or 3× you get crisp images on retina screens. The SVG is vector and looks perfect at any size.

Can I use a transparent background?

Yes. Choose “Transparent” in the backgrounds and the PNG is exported without a background, with just the code window.

Related tools

Base64 encoder and decoderConvert text or any file to Base64 and back. Supports the URL-safe variant, line breaks and data URI prefixes, and detects when decoded content is binary.CSS minifier and beautifierShrink your stylesheets by removing comments, whitespace and empty rules, or do the opposite: turn minified CSS into readable, indented code. You will see the original size, the final size and the gzipped size.JavaScript minifier and beautifierCompress your JS by stripping comments and whitespace and shortening names, or format a minified script so it is readable. Powered by Terser, right in your browser.JSON formatter and validatorPaste your JSON to validate it, pretty-print it or minify it. If there is a syntax error, you will see exactly which line and column it is on.Mock data generatorCreate fictional datasets to test your app, fill a database or prepare a demo. Define the fields, the number of rows and the output format.Random number generatorPick a range and draw one or thousands of random numbers: integers or decimals, with or without repeats, sorted if you like. It uses the browser’s cryptographic generator and removes modulo bias so every number has exactly the same probability.