@tolipovjs/rich-text — a Notion-style React editor
A 22 KB rich text editor published to npm — Notion UX without the $99/mo bill.
An open-source React rich text editor with a slash menu, markdown shortcuts and a floating toolbar. Published on npm as @tolipovjs/rich-text, it ships at ~22 KB minzipped — roughly 18x smaller than TinyMCE — while staying SSR-safe for Next.js.
The problem
Most teams reach for TinyMCE or CKEditor and pay license fees plus 250-400 KB of bundle just to get a basic editor. I wanted a free, modern, lightweight alternative with Notion-style ergonomics that I could drop into any React or Next.js app.
Approach
I built the editor as a standalone library with a clean imperative ref API (focus, getHTML, setHTML), a slash command menu, markdown shortcuts, find & replace, autosave and dirty-state tracking. Styling is pure CSS custom properties — no framework dependency — with built-in light/dark/auto themes.
Engineering decisions
Bundled with tsup to emit ESM, CommonJS and TypeScript declarations; Vite for the dev playground. The only peer dependency is lucide-react for icons. Every DOM access is guarded so the package is safe in the Next.js App Router. Result: ~22 KB minzipped against TinyMCE's ~400 KB and CKEditor's ~250 KB.
Result
A published, installable package: one CSS import plus one React component. It ships ESM + CJS + types, is SSR-safe, MIT-licensed, and supports toolbar presets (all/basic/minimal) or fully custom button configs, image resizing, async upload callbacks, and import/export to Markdown.
What I learned
Shipping a real npm package is a different discipline from app code: API surface design, semantic versioning, bundle budgets, SSR guards and writing docs people can follow. Optimizing to 22 KB forced me to be deliberate about every dependency.