Getting Started

Install the package, import the stylesheet once, and render the editor. There’s no Tailwind config to maintain and no global theme provider to set up.

Install

npm i @tolipovjs/rich-text
# or
yarn add @tolipovjs/rich-text
# or
pnpm add @tolipovjs/rich-text

Peer dependencies: react ^18 || ^19, react-dom ^18 || ^19.

Render your first editor

import { useState } from "react"
import { RichTextEditor } from "@tolipovjs/rich-text"
import "@tolipovjs/rich-text/styles.css"   // ← import once in your app

export function MyEditor() {
  const [html, setHtml] = useState("<p>Hello world!</p>")
  return <RichTextEditor value={html} onChange={setHtml} />
}

That’s it — no extra setup.

Where to import the stylesheet

• Next.js (App Router): in app/layout.tsx at the top.
• Next.js (Pages): in pages/_app.tsx at the top.
• Vite / CRA: in main.tsx or index.tsx alongside your global styles.

Dark mode

<RichTextEditor theme="dark" />     // forced dark
<RichTextEditor theme="light" />    // forced light
<RichTextEditor theme="auto" />     // follow prefers-color-scheme

Next steps

• Theming — customize every color via CSS variables.
• Toolbar — presets, IDs, and custom buttons.
• API — every prop, every ref method.
• Playground — try every option, copy the code.