sa-spell-checker
v1.0.6
Published
SuperAnnotate custom spell checker web component
Readme
SA Spell Checker
A custom spell-checker web component for SuperAnnotate's labeling interface. Powered by nspell + Hunspell dictionaries.
Features
- P0 — Red squiggle underline on misspelled words
- P1 — Toggle spell check on/off
- P2 — Language switching (English US/UK, French, German, Spanish, Korean)
Usage in SuperAnnotate
Paste spell_checker.html into SA's web component editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sa-spell-checker.mjs"></script>
</head>
<body>
<sa-spell-checker placeholder="Type here..." rows="4"></sa-spell-checker>
</body>
</html>Local Development
npm install
npm run dev # starts localhost dev server with hot-reloadBuild & Publish to CDN
1. Bump version in package.json
"version": "1.0.5"2. Build
npm run build3. Generate npm token (one-time setup)
- Go to npmjs.com → profile → Access Tokens
- Generate New Token → Granular Access Token
- Settings:
- ✅ Bypass two-factor authentication (2FA) — check this
- Packages and scopes → Permissions:
Read and write - Select packages:
All packages - Organizations: leave as
No access(do not touch)
- Click Generate Token → copy the token
4. Publish
bash publish.sh YOUR_NPM_TOKEN5. Update version in spell_checker.html
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sa-spell-checker.mjs"Project Structure
Spell-Checker/
├── src/
│ ├── spell-checker.ts — Lit component (logic + template)
│ ├── spell-checker.css — styles
│ └── spellcheck.ts — nspell dictionary loading & word checking
├── dist/ — built output (published to npm)
├── spell_checker.html — paste this into SA
├── index.html — local dev test page
├── package.json
├── vite.config.js
├── tsconfig.json
├── publish.sh
└── BENEFITS.md — why this approachTech Stack
| Tool | Role | |------|------| | Lit | Web Component framework | | TypeScript | Type safety | | Vite | Bundler | | nspell | Spell checking engine | | jsDelivr | Free CDN (serves from npm) |
