clasp.sh

What clasp.sh does

clasp.sh is a free browser tool that turns code into a picture. Paste a snippet, mark the lines that changed, arrange the files side by side, and export a PNG or JPG. It runs entirely in your browser: there is no account, and nothing you paste is uploaded.

It shows a change, not a snippet

Most code-screenshot tools draw one window around one file. That is enough for a snippet and not enough for a change, which usually spans more than one file and is only legible when you can also see what the line used to say.

clasp.sh holds up to five windows in a single frame, each with its own tabs, and marks lines four ways: highlight, focus, diff-add and diff-remove. A pull request or a changelog entry becomes one picture instead of four.

What is in it

  • 242 languages, highlighted by Shiki. The language is auto-detected, and you can overrule it.
  • Terminal output is one of those languages. Paste a capture and the ANSI escape codes are drawn as color rather than as text.
  • Ten themes, a custom theme builder, and import for any VS Code theme.
  • Background, window chrome, font and frame size are set from the sidebar and drawn into the export exactly as previewed.
  • Code comes from typing, a dropped file, or a public GitHub gist URL.
  • Export a PNG or JPG at 1x, 2x or 4x, or copy the frame to the clipboard, which is always a PNG.

What it does not do

Stated plainly, because these come up:

  • No video. clasp.sh exports still images, so there is no GIF, MP4 or WebM.
  • No SVG. Frames are drawn with Canvas 2D, which is why PNG and JPG are the two formats.
  • No accounts, no share links, and no state in the URL. A scene is kept in localStorage on the machine it was made on.

Where the work happens

Highlighting, layout and the export itself all run in the tab. There is no backend to send code to and no public API to call. The source is on GitHub under the MIT license.

Open the editor