Code to SVG image
Turn a code snippet into a syntax-highlighted image with a window frame and gradient background.
Code to SVG image
Paste a code snippet, pick its language, and this tool renders it as a syntax-highlighted image inside a rounded window mockup — the kind of shareable code screenshot you'd post in a blog, a tweet, a slide deck or internal docs. Keywords, strings, comments and numbers are colored automatically, and the window gets an optional macOS-style title bar with traffic-light dots so the result looks like a real editor, not a plain text dump.
Nine languages are supported — JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash, SQL and plain text — each with its own highlighting rules for keywords, strings and comments. Choose a background theme (sunset, ocean, midnight, forest, grape or mono) and the tool wraps the window in a matching gradient card; adjust the padding to control how much of that gradient shows around the window, toggle the drop shadow, set the window title, and switch line numbers or the title bar on or off. Font size scales the whole image, so a short one-liner and a fifty-line function both end up readable.
The output is a self-contained, resolution-independent SVG document: crisp at any size, easy to drop straight into a page or design tool, and small enough to copy as text. Line count, character count and the final image size in pixels update live under the output as you type or change options, so you can see exactly what you are about to copy or download before you do.
Everything happens in your browser using a small built-in highlighter — no code is uploaded, and no third-party syntax-highlighting service ever sees what you paste. That makes it safe to use on unpublished features, internal tools or anything else you would rather not send to an external server just to make a nice screenshot.