DevToolsmith

Code to Image

Create a shareable code card with syntax highlighting, themes, line numbers and a custom background. Preview the layout, then download a PNG or SVG. Your code is displayed as text and never executed.

Runs 100% in your browser — nothing is uploaded

Code (rendered as text, never executed)
Tip: drop a file here116 chars · 116 bytes · 4 lines

Up to 150 lines and 15,000 characters. PNG uses 2× resolution. Long lines wrap inside the card; SVG embeds an HTML foreignObject and is best viewed in a browser.

Make a code card

Choose a language and theme, enter a title, and create the preview. Use a solid card on a blue or purple background, or choose transparent surrounding space. Image widths range from 480 to 1200 pixels.

Export for documentation

For example, choose JavaScript, set the title to “Greeting” and preview this snippet. The preview highlights the source; it does not call the function:

function greet(name) {
  return 'Hello, ' + name;
}

A 720-pixel-wide card exports a 1440-pixel-wide PNG. After downloading, inspect long lines and text contrast at the intended display size. Keep a selectable text version alongside an image in documentation so readers can copy the code and assistive technology can read it.

PNG downloads at twice the selected CSS resolution. Fonts are taken from the local system and export waits for font loading. SVG keeps the card in an HTML foreignObject rather than converting glyphs into vector paths.

Supported snippets

The editor supports JavaScript, TypeScript, JSON, HTML, CSS, Python, Bash, SQL, YAML and Markdown. Input is limited to fifteen thousand characters and one hundred fifty lines; exported cards must be at most six thousand CSS pixels tall.

Powered by open-source software. Third-party licenses.

Use JavaScript Formatter before capturing a long snippet, Image Toolbox to resize an exported PNG, or Markdown Preview to prepare the surrounding explanation.

Documentation examples checked: . How these tools are checked.

Frequently asked questions

Does creating a screenshot run my code?

No. Shiki tokenizes and highlights the snippet as text. Code is not evaluated, compiled or sent to a remote screenshot service.

Why do long lines wrap?

The selected image width is fixed. Long lines wrap so the full snippet remains in the exported image. Increase the width or shorten the snippet when you want fewer wrapped lines.

Can I use the SVG in any graphics editor?

The SVG contains an HTML foreignObject with the rendered card. Browsers support this well, but some graphics editors do not. Choose PNG for broad compatibility.

Sources

Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.