A web-based Snipping Tool + OCR + clean-text formatter — 100% in the browser.
Capture or paste an image, crop the region you want, and get clean, copy-friendly text.
-8b949e){kind=icon}
Live demo: https://YL-Raj.github.io/sniptext/
Every OS ships a snipping tool, but none of them turn the snip into clean, editable text. SnipText does — and because OCR runs entirely in your browser via WebAssembly, your images never leave your device. No server, no upload, no API key. Works on Windows, macOS, Linux, Android, and iOS.
- Multiple inputs: upload / drag-drop, paste from clipboard (
Ctrl/Cmd + V), live screen capture (desktop), and camera (mobile) — with automatic feature detection and graceful fallbacks. - Region cropping with resize handles, drag-to-move, and a live pixel-dimensions readout — full mouse + touch + pen support via Pointer Events, just like the native Snipping Tool.
- Accurate OCR on hard images. An Enhance (B/W) pass runs grayscale → automatic invert for dark backgrounds → Otsu binarization before OCR, so colored and light-on-dark text (memes, dark-mode screenshots) is captured instead of dropped. Selectable page-layout modes (Auto / Block / Line / Sparse) and small-region upscaling further boost accuracy.
- In-browser OCR with Tesseract.js — ~100 languages, no backend.
- Clean Text Formatter: fixes hyphenated line-breaks, reflows soft-wrapped lines into paragraphs, strips junk whitespace. Toggle between Clean and Raw; word count, confidence and timing are shown.
- Polished UX: light/dark theme (remembered), toast notifications, loading skeleton + progress bar, and a thumb-friendly responsive layout.
- One-click copy and download as
.txt. - Installable PWA — works offline after the first load.
Static files, no build step — index.html + style.css + app.js. Serve them (don't just double-click), because the clipboard and screen-capture APIs require a secure / localhost context:
python -m http.server 8000
# then visit http://localhost:8000Opening index.html directly still works for upload/drag-drop; paste and screen-capture need the served (localhost/https) context above.
This repo includes a GitHub Pages workflow (.github/workflows/pages.yml):
- Push this folder to a GitHub repo named
sniptext. - In the repo: Settings → Pages → Build and deployment → Source: GitHub Actions.
- Push to
main— the action publishes tohttps://YL-Raj.github.io/sniptext/. - Paste that URL into the Live demo line above. ✅
input (upload / paste / screen / camera)
│
▼
<canvas> preview ──► drag to select region
│
▼
cropped region ──► Tesseract.js (WASM OCR) ──► raw text
│
▼
rule-based cleanup ──► clean text ──► copy / download
- v2 — AI cleanup: optional button that sends the cropped region to a vision-language model for layout-aware reflow (code blocks, tables, math). Needs a tiny backend / user-supplied key.
- Multi-region batch snip
- History panel of past snips
- Export to Markdown / CSV (for tables)
- Keyboard-only flow & accessibility pass
Vanilla HTML/CSS/JS (index.html · style.css · app.js) · Canvas API + Otsu binarization for OCR pre-processing · Pointer Events cropper · Screen Capture API (getDisplayMedia) · Clipboard API · Tesseract.js (WASM). No framework, no build step.
MIT © Raj