A customizable React rich text editor with icon-based toolbar
npm install custom-rich-text-editor
A customizable and user-friendly WYSIWYG React text editor that lets you switch seamlessly between formatted content and raw HTML. Ideal for dashboards, CMS integrations, documentation tools, or any React app that needs rich text capabilities with full HTML control.
- Keywords: React rich text editor, WYSIWYG, HTML editor, content management, TypeScript ready, customizable toolbar.
---
1. Features at a Glance
2. Quick Start
3. Usage
4. API
5. Styling Guide
6. FAQ
7. Demo
8. Contributing
9. License
---
- Rich Text Formatting: Apply bold, italic, headings, lists, and links without leaving the editor.
- HTML Code Editing: Toggle to view or edit the underlying HTML markup instantly.
- TypeScript Support: Fully typed props for safer integrations in TypeScript projects.
- Clipboard Handling: Smart paste support that prevents cursor jumps and keeps formatting consistent.
- Customizable UI: Swap icons, change layouts, or override styles via CSS class hooks.
- Framework Friendly: Lightweight bundle that drops into existing React, Next.js, or Vite projects.
---
Install the package using your preferred package manager:
``bash`
npm install custom-rich-text-editoror
yarn add custom-rich-text-editor
---
`tsx
import React, { useState } from "react";
import Editor from "custom-rich-text-editor/dist/Editor";
const App = () => {
const [content, setContent] = useState("
Hello world!
"); return (
onChange={(html: string) => setContent(html)}
/>
);
};
export default App;
`
The editor works in controlled mode, so you can persist content to a database or reuse it elsewhere in your app:
`tsx`
const handleSubmit = async () => {
await api.savePost({ body: content }); // store HTML
};
---
| Prop | Type | Default | Description |
| ---------------- | ------------------------ | ------- | --------------------------------------------------------------------------- |
| initialContent | string | "" | Optional starting HTML content. |onChange
| | (html: string) => void | — | Fired whenever the editor content changes. Receives the latest HTML string. |
---
Override the provided class names to match your design system:
- main_layout: Wraps the entire editor instance.text_editor
- : Contains the toolbar and editable area.icon_bar
- : Toolbar that hosts the formatting controls.html_code_editor
- :