Most code screenshots are a crop of someone's editor. There's a stray sidebar, a blinking cursor, and colors that looked fine in dark mode but terrible on a white slide.
I wanted something simpler: paste a snippet, pick a look, get a clean image. So I built CodePic.
Try it: https://codepic.kitdev.space/
Source: https://github.com/hamedniroomand/codepic
What it does
You paste your code. CodePic guesses the language and tells you it did, so you can change it in one click. If it isn't sure, it falls back to plain text instead of guessing wrong.
From there you can:
- Pick from five themes (GitHub Light and Dark, Dracula, Nord, One Dark Pro)
- Choose a gradient, a solid color or a transparent background
- Adjust padding, width, font size, line height and the window style
- Download a PNG (at 1×, 2× or 3×) or an SVG
- Copy the image to your clipboard
- Copy a link that opens the exact same snapshot
The SVG export keeps the text as text and embeds the code font, so it stays sharp at any size.
Highlighting the lines that matter
Click a line number and that line is highlighted while the rest of the code fades back. Click it again to mark the line as added or removed. You get a diff view with + and − in the gutter, which is handy for pull request descriptions and blog posts about a change.
Private by design
There's no backend. Your code is never uploaded, stored or logged. Highlighting, layout and export all happen in your browser.
The only thing saved between visits is how the card looks, such as your theme and presets. Never what's in it.
It also works offline. Visit once and it loads and exports without a connection. You can install it like an app.
Share links without a server
The share link packs your code and settings into the URL itself, compressed in the browser. That means long snippets fit, and there's still no server involved.
A small meter appears next to the button as you get close to the size limit. If a snippet is too big for a link, the app says so and leaves the code out instead of failing quietly.
One caveat, since anyone with the link can read the code in it: keep secrets out of snippets you share.
Other tools can drive it
Every setting can come from a URL parameter:
https://codepic.kitdev.space/?theme=nord&lang=python&code=print(%22hi%22)
If you write docs or a blog, a link like that lets readers open your snippet and tweak it themselves. Unknown parameters are ignored, invalid values are skipped with a message, and nothing in a link ever runs as code.
There's also a command line tool that draws the same image without opening a browser:
npx codepic --file app.ts --theme nord -o out.png
cat app.ts | npx codepic --lang typescript -o out.svg
It uses the same highlighter, themes and layout numbers as the app, so the images match closely. The drop shadow is an approximation, and text wraps by character count, so wide characters like CJK or emoji can overrun a row.
A few notes on how it's built
-
One config object. A single
AppearanceConfigdrives the whole snapshot. Code is kept apart from it, so saving and sharing can treat the two differently. Presets and saved settings never contain your code. -
What you see is what you get. The preview and the exported image render from the same
CodeWindowcomponent. The export copy sits off-screen at the exact configured width, so the image matches your settings and not whatever size the preview is scaled to. -
A plain textarea. Editing is a
<textarea>layered over the highlighted lines. It keeps your text exactly as you typed it, and it's deliberately not an IDE. - The stack. Svelte 5, TypeScript, Shiki for highlighting, modern-screenshot for PNG and SVG, Bits UI for the controls and Vite+ for tooling.
Keyboard shortcuts
Every shortcut uses Ctrl (⌘ on macOS), so nothing fires while you're typing. For example, Ctrl/⌘ + Enter downloads the image and Ctrl/⌘ + Shift + Enter copies it.
Limits worth knowing
- Very long snippets take noticeably longer to highlight and export.
- Copying to the clipboard depends on browser support and permission. When it's blocked, the app says so, and downloading still works.
- Some design tools don't support the SVG export, because it embeds the card as HTML inside the SVG.
Why I built it
CodePic started as a way to learn Svelte 5, and it was inspired by ray.so. It turned into something I actually use, so I kept polishing it.
It's free and open source under the MIT license. Bug reports, ideas and pull requests are welcome. If you try it and something feels off, or you're missing a feature, please open an issue.
Top comments (0)