@richhtmleditor/react

React component for Rich HTML Editor, built on @richhtmleditor/core. Drop-in WYSIWYG with toolbar presets, dark mode, custom React toolbar tools, and enterprise plugin support.

Current release: 1.1.1 — Depends on @richhtmleditor/core ^1.1.1.

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.vercel.app — demo · guide · API. Doc Preview joint demo: doc-preview-app.vercel.app/demo/enterprise

What's in 1.1.1

• RichHtmlEditor — React wrapper around createEditor with lifecycle-safe mount/destroy
• Controlled content — content prop syncs HTML into the editor instance
• Custom tools — customToolIds + renderTool for React-rendered toolbar buttons
• Plugins — pass plugins for AI, comments, workflows, and collab
• Re-exports all public symbols from @richhtmleditor/core

Ships as ESM with TypeScript declarations. Peer deps: react and react-dom ^18 || ^19. Import @richhtmleditor/themes CSS in your app entry.

Keywords: richhtmleditor react wysiwyg rich-text-editor component

Install

npm install @richhtmleditor/react @richhtmleditor/themes
# Adds @richhtmleditor/core automatically.
# Peer deps: react ^18 || ^19, react-dom ^18 || ^19.

Usage — component

import { useState } from "react";
import { RichHtmlEditor } from "@richhtmleditor/react";
import "@richhtmleditor/themes/richhtmleditor.css";

export function EditorDemo() {
  const [html, setHtml] = useState("<p>Hello <strong>world</strong></p>");

  return (
    <RichHtmlEditor
      content={html}
      toolbar={{ preset: "standard" }}
      features={{ tables: true, media: true }}
      onChange={(c) => setHtml(c.html)}
    />
  );
}

Usage — custom React toolbar tool

<RichHtmlEditor
  toolbar={{
    preset: "standard",
    layout: ["bold", "italic", "|", "approve"]
  }}
  customToolIds={["approve"]}
  renderTool={(tool) => (
    <button type="button" onClick={() => alert("Approved!")}>
      Approve
    </button>
  )}
/>

Usage — enterprise plugins

import { createAiPlugin } from "@richhtmleditor/ai";
import { createCommentsPlugin } from "@richhtmleditor/comments";
import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";

const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });

<RichHtmlEditor
  toolbar={{ preset: "full" }}
  features={gate.features}
  plugins={[
    createAiPlugin({ onGenerate: async (req) => callYourLlm(req) }),
    createCommentsPlugin({ author: "Reviewer" }),
    createWorkflowsPlugin({ actor: "Legal", role: "editor" })
  ]}
/>

API

RichHtmlEditor props

| Prop | Type | Description | | --- | --- | --- | | content | string | Controlled HTML content. | | editable | boolean | Enable editing (default true). | | dark | boolean | Dark theme tokens. | | theme | EditorThemeTokens | Custom CSS variable overrides. | | toolbar | ToolbarConfig \| ToolbarPresetId | Toolbar preset or custom layout. | | features | EditorFeatureFlags | Feature gates. | | plugins | EditorPlugin[] | Enterprise and custom plugins. | | customToolIds | string[] | Tool IDs to render with renderTool. | | renderTool | (tool, defaultRender) => ReactNode | Custom React toolbar renderer. | | onChange | (content: EditorContent) => void | Fired on document edits. | | onSave | (content: EditorContent) => void | Fired on save command. | | className | string | Wrapper class name. | | style | CSSProperties | Wrapper inline styles. |

React vs Angular naming

| React | Angular | | --- | --- | | <RichHtmlEditor /> | <richhtmleditor> | | onChange | (contentChange) | | onSave | (save) | | content | [content] |

Related packages

• @richhtmleditor/core — framework-agnostic engine (auto-installed).
• @richhtmleditor/themes — shared CSS.
• @richhtmleditor/angular — Angular component.
• @richhtmleditor/vue — Vue 3 component.
• @richhtmleditor/enterprise — licence and feature gates.
• @richhtmleditor/ai — AI authoring plugin.
• @richhtmleditor/comments — review comments plugin.
• @richhtmleditor/workflows — approval workflows plugin.
• @richhtmleditor/collab — Yjs collaboration plugin.
• @richhtmleditor/diagrams — Mermaid diagrams plugin.
• @richhtmleditor/math — LaTeX/MathML equation plugin.
• @richhtmleditor/export — DOCX/PDF/HTML export plugin.
• @richhtmleditor/spellcheck — real-time spell check plugin.
• @richhtmleditor/templates — document templates plugin.
• @richhtmleditor/mentions — @ mentions plugin.

License

MIT