@revivee/revive-editor

A lightweight, extensible WYSIWYG rich-text editor built with React and Slate.js. Outputs and accepts clean HTML, making it straightforward to integrate with any backend or CMS.

Installation

npm install @revivee/revive-editor

yarn add @revivee/revive-editor

pnpm add @revivee/revive-editor

Requirements: React 16.8+, Node 18+

Quick Start

Import the component and the stylesheet, then pass an onChange handler.

import { ReviveEditor } from '@revivee/revive-editor';

export default function App() {
  const [html, setHtml] = useState('');

  return <ReviveEditor onChange={setHtml} />;
}

The editor is uncontrolled by default — it manages its own internal state and reports the serialised HTML string via onChange. Use initialValue to seed existing content on first mount.

Props

| Prop | Type | Required | Description | |---|---|:---:|---| | onChange | (content: string) => void | Yes | Fires with the serialised HTML string on every change | | initialValue | string | No | HTML string used to seed the editor on first mount | | licenseKey | string | No | License key from reviveeditor.com. Unlocks the Pro toolbar and removes the watermark | | theme | ReviveTheme | No | Theme from createTheme(). Supports 'light', 'dark', and 'system' modes. Defaults to light |

Free vs Pro

| Feature | Free | Pro | |---|:---:|:---:| | Bold, italic, underline, strikethrough | ✓ | ✓ | | Code & blockquote | ✓ | ✓ | | Text alignment | ✓ | ✓ | | Ordered & unordered lists | ✓ | ✓ | | Indentation | ✓ | ✓ | | Undo / Redo | — | ✓ | | Headings (H1–H6) | — | ✓ | | Font size control | — | ✓ | | Text color & highlight | — | ✓ | | Table insertion | — | ✓ | | Image insertion | — | ✓ | | Link insertion | — | ✓ | | Watermark | Yes | No |

Pro features activate automatically once a valid licenseKey is passed. License keys are available at reviveeditor.com/pricing.

Theming

Revive Editor ships with a theme system inspired by MUI's createTheme(). Themes are scoped to the editor with no global CSS side-effects.

import { ReviveEditor, createTheme } from '@revivee/revive-editor';

// Follow the operating system preference automatically
const theme = createTheme({ mode: 'system' });

export default function App() {
  return <ReviveEditor theme={theme} onChange={...} />;
}

Modes

| Mode | Behaviour | |---|---| | 'light' | Purple-accented light theme (default) | | 'dark' | Purple-accented dark theme | | 'system' | Follows the OS prefers-color-scheme setting, updates reactively |

Custom palette

const theme = createTheme({
  mode: 'light',
  palette: {
    primary: '#e11d48',       // rose-600
    primaryLight: '#fb7185',  // rose-400
    primaryDark: '#be123c',   // rose-700
  },
});

All palette tokens (primary, primaryLight, primaryDark, background, surface, border, text, etc.) are also exposed as CSS custom properties prefixed --re- for direct stylesheet overrides.

Bundler Note

The package sets "sideEffects": ["**/*.css"] to prevent tree-shaking of styles. Make sure @revivee/revive-editor is not excluded from CSS processing in your Vite or Webpack config.

Links

• Documentation
• Pricing
• Changelog