CSS variable theming
Override any --rte-* token in your own stylesheet. No theme provider, no extra deps, no Tailwind.
v2.0 — Tailwind-free, themeable, ref API
The themeable React
rich text editor
A modern, lightweight React WYSIWYG editor. Theme every pixel with plain CSS variables. No Tailwind. No setup. Just import and render.
Why this editor
Everything you need. Nothing you don’t.
Light / Dark / Auto
First-class dark mode via the theme prop. Auto mode follows prefers-color-scheme.
Customizable toolbar
Pick a preset (all, basic, minimal) or pass an array of 28 built-in IDs. Append your own buttons.
Imperative ref API
focus, blur, clear, getHTML, setHTML, insertHTML, getText, getStats, execCommand — all on a ref.
Async image uploads
Pass onImageUpload to swap base64 for your CDN. FormData friendly, returns the final URL.
Hardened sanitizer
Blocks javascript: / vbscript: / non-image data: URLs, strips on* handlers, removes <script>, <iframe>, <object>, <embed>.
HTML → Markdown
Built-in htmlToMarkdown() utility. Headings, lists, code blocks, blockquotes, tables, task lists.
SSR safe & tiny
Every document/window access guarded. Tree-shakeable ESM. Ships ESM + CJS + DTS + a single stylesheet.
Install
Three lines to a working editor.
Install once, import the stylesheet once, drop in the component. No Tailwind config to maintain.
Install
npm i @tolipovjs/rich-textUse
import { RichTextEditor } from "@tolipovjs/rich-text"
import "@tolipovjs/rich-text/styles.css"
export function MyEditor() {
return <RichTextEditor />
}Compare
How it stacks up
A quick at-a-glance comparison. We focus on developer experience: theming, customization, and integration cost.
| Feature | @tolipovjs/rich-text | TipTap | Quill | Lexical |
|---|---|---|---|---|
| Zero CSS framework required | ||||
| Theme via CSS variables | ||||
| Dark mode out of the box | ||||
| Imperative ref API | ||||
| Toolbar presets + custom IDs | ||||
| Built-in image upload hook | ||||
| HTML → Markdown utility | ||||
| Single import, single stylesheet |
Comparison reflects core distribution & defaults; competitors can usually be extended to match. We compare out-of-the-box DX.
Ready to ship a polished editor in minutes?
Install once. Theme with CSS variables. Use the ref API. That’s the whole tour.