Code Shot

Turn code into a gorgeous, share-ready image - syntax highlighting, editor themes, window frames and diff highlighting - then drop it into your design as a re-editable layer.

Extension

Beautiful, share-ready images of your code - highlighted locally, dropped in as a layer.

Plain code is awkward to share and easy to mangle: a screenshot of your editor looks messy, and pasted text loses everything that made it readable. Code Shot turns a snippet into a clean, framed image you can post anywhere – and drops it straight into your design.

Paste your code or import a file, and it is highlighted locally in your browser – auto-detected across 29 languages, from JavaScript, TypeScript and PHP to Python, Go, Rust and SQL. Pick from nine editor themes (Dracula, One Dark, GitHub, Nord, Tokyo Night and more), add a macOS-style window with a title, line numbers, a gradient or solid background and a soft shadow.

Make the point land. Highlight the lines that matter and dim the rest with focus mode, or switch on diff mode to tint added and removed lines green and red. Frame the result to a social-ready ratio – 16:9, square, or a 9:16 story – and copy it to your clipboard in one click.

Every code shot lands as a re-editable layer; reopen it anytime via Edit Code Shot to change the code, the theme or the frame. It also understands dynamic content: bind the code or the title to your post fields with {{…}} tokens, and the image re-renders per post for dynamic featured images. Nothing is uploaded – the highlighting runs entirely in your browser.

Features

Local syntax highlighting

Paste or import code and it is highlighted in your browser across 29 languages, with auto-detection. Nothing is uploaded.

Features

Nine themes and window frames

Dracula, One Dark, GitHub, Nord, Tokyo Night and more, with a macOS window, a title, line numbers and a background.

Features

Highlight, focus and diff

Emphasise the lines that matter and dim the rest, or tint added and removed lines like a real diff.

Features

Editable and dynamic

Lands as a re-editable layer; bind the code or title to post fields with {{...}} tokens for dynamic featured images.

What is included

Syntax highlighting for 29 languages, run locally with auto-detection
Nine editor themes, light and dark
macOS, plain or no window frame, with an optional title
Line numbers, adjustable font size and tab width
Line highlighting with a focus mode that dims the rest
Diff mode that tints added and removed lines
Gradient, solid or transparent background with padding and a window shadow
Social-ready aspect ratios (16:9, square, 9:16)
Copy the image to your clipboard, or drop it in as a re-editable layer
Dynamic {{fields}} in the code and title for per-post featured images

Requirements

Works in every modern browser. Runs on top of the free WunderPaint; nothing is uploaded.

Play Video

Frequently asked questions

No. Highlighting and rendering run entirely in your browser – nothing is sent to a server.

Twenty-nine, including JavaScript, TypeScript, HTML, CSS, PHP, Python, JSON, Bash, SQL, Java, Go, Rust, C/C++, C#, Kotlin and Swift, plus auto-detection.

Yes. Insert {{fields}} into the code or the title and the image re-renders per post, so it works as a dynamic featured image.

Add Code Shot to your editor.

It comes with the Pro plan, updates included, and supports the continued development of the free open-source editor.

Free

Chaos Art

Autonomous painters make one-of-a-kind abstract art in 3D space - gestures, art movements, painterly media, and embeds that paint a new original for every visitor.

Pro

Particle Strokes

Paint with swarms of light: twenty-two movements, a stamp you draw yourself, and curves that give a stroke a shape - the swarm keeps painting for a few seconds after you let go.

Pro

City Diorama

Any place on earth as a miniature you could hold: real streets, water and building footprints raised into a 3D diorama - or wrapped around a sphere as your own tiny planet.

Free

Papercut Art

Layered paper pictures with real depth - a photo sliced along its actual depth into up to twenty layers, parametric landscapes, animals and clouds you can shape, letters with real counters, and a look that runs on three dials.

Pro

3D Earth Studio

A hyperrealistic globe - day and night with city lights, live clouds, atmosphere halo, country borders and highlights, click-to-place markers with flight-route arcs, satellite orbits, seamless rotation video and a live website embed.

Free

Mystic Studio

Turn a birth date into wall art - a real natal chart with houses and aspects, the moon of that night, zodiac and Chinese zodiac posters, numerology cards and a synastry wheel for two, in eight artful themes.

Free

Marble Bath

Marble paper on a virtual water bath - drop, rake and comb real Ebru patterns with gestures, flowers and classic recipes, razor-sharp at any size and re-editable as a layer.

Free

Day Ring

Turn a day into a beautiful circular schedule - colour-coded time blocks as arcs around a 24-hour clock, with concentric rings for overlaps, emoji, templates and a legend.

Free

Code Shot

Turn code into a gorgeous, share-ready image - syntax highlighting, editor themes, window frames and diff highlighting - then drop it into your design as a re-editable layer.

Pro

3D Solar System Studio

Build a date-accurate 3D solar system - real planet positions for any date, photoreal textures and one slider from artistic to true scale - then drop it into your design as an editable layer.

Pro

3D Molecule Studio

Build a real 3D molecule - from a curated library, the periodic table or a SMILES string - then style it, measure it and drop it into your design as an editable layer.

Pro

3D Textile Studio

Drop your design onto cloth that behaves like the material you pick: silk falls soft, felt holds its shape, flag fabric snaps in the wind. Hang it, blow it and drape it, then lay the finished drape back into your document as a picture.

Pro

3D Particle Studio

Point the engine at any layer and it becomes a cloud of particles that keeps its colours, flowing through a sphere, a galaxy or your own outline. Keep the frame you like as a still, or embed the running engine so it keeps moving on your page.

Free

Origami

Put your own picture on the paper and watch that very sheet fold itself into a crane or a box. Every step is a station you can stop at and turn around in 3D, which is exactly where printed diagrams leave you alone.