Code Prettier — Turn Code Snippets into Shareable Images

The name says "prettier," and that word means something specific to most developers: a formatter — Prettier, Black, gofmt, rustfmt — that rewrites your code so the indentation, line breaks, and spacing follow a consistent style. This tool does not do that. It is worth stating plainly at the top, because the name invites the wrong expectation. Paste code with three spaces after a keyword, an unindented body, and a stray closing brace, and the image you export will show exactly that: three spaces, no indent, stray brace. Nothing is reflowed. Nothing is normalized.

What the tool actually does is turn a snippet into a picture that looks like it came out of a nice editor. It reads your code, colors the tokens according to the theme you pick, wraps the result in a window with the chrome and background you choose, and renders that at double resolution as a PNG you can drop into a tweet, a slide, a README, or a blog post. The distinction matters: this is a presentation tool, not a code-quality tool. It changes how your code looks in an image, never how your code is written.

The practical workflow, then, is two steps. First, format the code in your own editor — hit save with Prettier on, run gofmt, do whatever you already do to make it clean. Then paste the already-clean code here and spend your effort on the parts this tool owns: the palette, the frame, the background, the resolution. Trying to use this as a formatter will only ever disappoint, because it was never built to be one. Used for what it is — a fast, private way to make a good-looking code screenshot — it does that job well.

Behind the colors is a set of regular expressions, one bundle per language. When you pick JavaScript, the tool matches a list of keywords (const, function, return, and so on), then strings, comments, numbers, capitalized identifiers as types, and names followed by a parenthesis as function calls. Each match gets a color from the active theme. Overlapping matches are resolved by keeping the earliest and longest, so a comment that contains a keyword stays fully a comment rather than getting a keyword colored inside it.

This approach is fast and completely local, but it is not a parser, and it is honest to say where it slips. Regex highlighting has a handful of predictable blind spots. A keyword used as a property name or variable — obj.class, a column literally named order in SQL — may still get keyword coloring. Template-literal interpolation, escaped quotes inside strings, and heredocs can confuse the string matcher. Languages with context-sensitive syntax, like the boundary between HTML and inline CSS or JavaScript, are only approximated. None of this touches your code; it only means a token here or there might wear the wrong color in the picture.

The reason to accept that trade-off is what you get in exchange: no build step, no language server, no network call, and instant rendering as you type. For the job at hand — a snippet that needs to look good in a screenshot, not compile — approximate coloring that is right the vast majority of the time is the correct tool. If you notice a miscolored token, the fix is cosmetic: rename the variable in the snippet, or switch the language to Plain Text for a clean monospace render with no coloring at all.

There are twelve themes, and they are not interchangeable. Dracula, Monokai, Nord, One Dark, Solarized, GitHub Dark, and Catppuccin are the restrained, editor-faithful palettes — pick one of these when you want the image to look like a real workspace, which is usually the right call for documentation and technical posts. Synthwave, Aurora, Ocean, Rosé Pine, and Midnight lean more decorative, with higher-contrast accents that pop on a feed but can be tiring for a long snippet. A rule of thumb: the more lines you are showing, the more restrained the theme should be, because saturated syntax colors compound into visual noise over twenty lines.

The background sits behind the window, and its only real job is contrast. Every theme ships with an "Auto" background tuned to complement it, and Auto is the safe default. The gradient presets — Violet, Sunset, Emerald, Sky, and the rest — are there for social posts where you want the image to carry color even in a thumbnail; they work best behind dark themes, which stand out against a bright backdrop. The two backgrounds worth calling out are Carbon, a near-neutral dark gradient that keeps attention on the code, and Transparent, which removes the backdrop entirely and exports just the window and its shadow. Transparent is the one to use when the image is going onto a slide or a design that already has its own background — anything else would fight the surface it lands on.

Window chrome is the last presentational choice and it sets the tone. macOS traffic lights read as friendly and familiar and suit social sharing. The Windows controls are the pick when your audience or brand is Windows-centric. "None" strips the title bar completely, which is the cleanest option for embedding a snippet inside a technical article where a fake editor frame would just be decoration. The file-name tab is editable in the macOS and Windows styles — a small touch, but naming the tab auth.ts instead of untitled.js makes the screenshot feel like it came from a real project.

The export renders the preview at 2× its on-screen size. That single decision is why the text stays crisp: Retina and high-DPI screens have twice the pixel density of the layout units the browser draws in, and social platforms re-compress every image you upload. Starting at double resolution gives both the density and the compression headroom they need. If the tool exported at 1×, the same snippet would look soft on a MacBook and mushy after Twitter's re-encode. There is no quality slider to get wrong here — the 2× default is the setting that matters, and it is always on.

Beyond resolution, three habits keep an exported snippet readable. Keep it short — under roughly twenty-five lines. A code image is a glance, not a document; if the reader has to squint to follow twelve levels of nesting, the screenshot has failed and a link to the file would serve better. Set the font size deliberately: 14–16px reads well in a social feed where the image competes with everything else on screen, while 12–14px is fine for documentation where the reader has already committed to the page. And mind the width — a very wide snippet gets downscaled hardest by platforms that cap image dimensions, so wrapping or trimming long lines before you paste pays off more than any theme choice.

One honest limitation of any image-based approach: the code in the picture is not selectable or copyable. That is fine for a hero image or a tweet, but if your readers will want to copy the code — a tutorial, a docs page, a Stack Overflow answer — an image is the wrong format and a real code block is better. Use this tool where the visual matters more than the copy-paste: launch announcements, before/after comparisons, conference slides, thumbnails, and social posts where a plain gray code block would scroll right past.

Nothing you type here leaves your machine. The tokenizing, the theming, and the final render to canvas all happen in your browser's JavaScript runtime; there is no upload step and no server that ever sees the snippet. That is not a marketing line — it is a direct consequence of how the tool is built, and you can confirm it by watching the network tab while you export. The only network activity is the one-time, lazy load of the html2canvas library that does the rendering.

The reason this matters is the kind of code developers actually screenshot. Snippets often carry things you would not paste into a random web service: an internal API shape, a config with a hostname in it, a fragment of proprietary logic, sometimes a token that should have been redacted. Because the tool is fully client-side, it is safe for all of that in a way a cloud renderer cannot promise — the code never becomes someone else's log line. Redact secrets before you screenshot regardless, but the local-only architecture means the tool itself is never the leak.

If your snippet is meant to be read and reused rather than admired, a plain highlighted code block on the page is the better medium — and for turning prose or documentation into something more polished, the AI text humanizer handles words the way this tool handles code. But when the goal is a picture — something that looks like a real editor and survives a social feed at full sharpness — paste your already-formatted code, pick a theme, and export. That is the whole job, and it is done entirely on your side of the wire.