Build Snappify

YESreplaces $5/mosaves $60/yrback to the verdict

0%0 of 14 items done

Saved on this device only. Tick prerequisites first, then work the phases in order · do not start one until the checks above it pass.

A code screenshot tool as one static page: paste code, Shiki highlights it, frame it with padding, corners, shadow and a background, export a sharp PNG or SVG, copy to clipboard in Safari and Chromium alike, and share a snap by URL with no server.

estimated effort one sittingthe files for this build are in the project pack

HighlightingShiki as an ES moduleEverything elseOne HTML file, vanilla JS, Canvas 2D

Before step 1

Everything below is assumed from the first step. Tick each one when you actually have it, not when you plan to.

installfree
Why Every step below is a command you type or a file you edit.
Get it VS Code (code.visualstudio.com), Cursor or Zed. Open a folder for the project and use the editor's built-in terminal. open ↗
Verify You can open a folder and run a command in its terminal
installfree
Why History for your code, and the way most hosts deploy.
Get it Install from git-scm.com or with your package manager, then run git init in the project folder once it exists. open ↗
Verify git --version prints a version
installfree
Why Clipboard image copy differs; Phase 3 tests both.
Get it Chrome or Edge plus Safari on a Mac.
accountfree
Why To share it.
Get it Cloudflare Pages, Netlify or GitHub Pages. open ↗

The build, in order

1
Highlight
Textarea in, highlighted code out, live.
1. Vendor it into the repo so the page works offline later.
  Files index.html
done when · tick each as it passes
next phase
2
The frame
Padding, radius, shadow, window chrome, line numbers, ten backgrounds, one render().
done when · tick each as it passes
next phase
3
Export
PNG at 1x and 2x, SVG, and clipboard in both engines.
2. Safari requires the promise form; Chromium accepts it.
done when · tick each as it passes
next phase
4
Share by URL
Code and settings compressed into the hash.
done when · tick each as it passes
next phase
5
Polish
Shortcuts, memory, empty state, offline.
done when · tick each as it passes
next phase
6
Ship it as an appproduct builder
Installable and offline with a privacy line.
1. Files manifest.webmanifestsw.js
done when · tick each as it passes

what this build does not replace

Animated transitions between code states and video export: the paid product, and hard.
presentations with animated transitions between code states
video export
the template library
cloud storage of snaps

after v1, if you want it

Diff highlighting between two snippets
A VS Code extension that opens the page with the selection

Need the files? The project pack on the verdict page hands your agent the whole brief · more screenshots.