How to use Snippet Shot online, free

Pasting code into a post as plain text loses the formatting; pasting a screenshot of your editor brings your theme, your font size and whatever else was on screen. Snippet Shot renders it properly: a window with syntax colours, optional line numbers and a filename, sitting on a backdrop with a soft shadow. There is a Quote mode too, which sets any line of text in a display serif for the same treatment without the code framing. Export at 1x or 2x, or copy straight to the clipboard - all of it in your browser.

You should not have to open an IDE to format a snippet from Slack, tidy a JSON blob, or check a hash. Paste it here, copy the result, move on.

Snippet Shot is a good fit when posting a snippet on X or LinkedIn where code blocks are not supported.

Why this exists

Snippet Shot is built around a few practical wins, not a long feature list:

• Syntax colours for JavaScript/TypeScript, Python, HTML, CSS, JSON and SQL, with auto-detection.
• Eight themes including two light ones - the default is Nord, not a purple gradient.
• The window widens to fit your longest line, so code is never wrapped or clipped.
• 2x export for retina displays, and a keyboard shortcut so you never reach for the mouse.
• Quote mode for pull quotes, release notes and one-liners.
• No highlighting library is downloaded and no code is uploaded.

Walkthrough

1. Choose Code or Quote. Code gets syntax colours and a monospace face; Quote sets the text large in a serif.
2. Paste it in. The language is auto-detected, or pick one from the list if the guess is wrong.
3. Pick a theme. Eight themes, from Nord and Dracula to a light Paper and a plain Mono. The window colour and backdrop follow the theme.
4. Export. Download at 2x for a crisp result on retina screens, or press Ctrl+Enter (Cmd+Enter) from anywhere on the page.

Jobs it is built for

• Posting a snippet on X or LinkedIn where code blocks are not supported.
• Adding a readable code example to a slide deck or a conference talk.
• Illustrating a bug or a fix in a design doc or an issue thread.
• Turning a line from your README into a shareable image.

Worth knowing before you start

• Keep snippets under about 20 lines - beyond that the text is too small to read in a feed.
• Turn line numbers off for short snippets; they add width and read as noise.
• Paper is the theme to use when the image goes into a printed deck or a light-background page.
• Set the filename to the real path when the snippet only makes sense in context.

What not to expect

• Exporting at 1x for a retina screen, where the text ends up soft. Use 2x unless file size matters.
• Screenshotting a snippet that contains a real API key or token - the image is as leaky as the text was.
• Leaving auto-detect on for an unusual dialect; pick the closest language yourself if the colours look wrong.

Privacy, in one paragraph

Snippet Shot runs in your browser. The file or text you paste stays on your device. There is no account, and nothing is stored on a ToolBox server for this job.

Related tools worth opening next

If this is one step in a longer job, these usually come after it:

• HTML Preview Editor - Live HTML/CSS/JS playground
• JavaScript Beautifier - Format messy or minified JavaScript into clean readable code
• Share Card Studio - Turn a screenshot into a framed, shadowed social post image

Short answers

Is my code sent anywhere?

No. Highlighting and rendering both happen in your browser on a canvas. Nothing is uploaded, which matters when the snippet is from a private codebase.

Which languages are supported?

JavaScript and TypeScript, Python, HTML, CSS, JSON and SQL get syntax colours, and anything else renders cleanly as plain text. The language is detected automatically unless you pick one.

Why is a multi-line comment only coloured on its first line?

Highlighting is done one line at a time, which keeps it small and fast. Block comments that span lines colour the opening line only - a deliberate trade for a screenshot tool.

What is the difference between 1x and 2x?

2x renders everything at double resolution, so the text stays sharp on retina and high-DPI screens. The image is four times the pixels and a larger file.

Is there a keyboard shortcut?

Ctrl+Enter, or Cmd+Enter on a Mac, exports at 2x from anywhere on the page.

Can I make the background transparent?

Yes - set the backdrop to Transparent and the PNG is exported with an alpha channel, so the window sits on whatever is behind it.

Open the Snippet Shot when you are ready. It is free, and you do not need an account.