Skip to content

React

React WYSIWYG editor

@liteeditor/react is the official React component for LiteEditor — a lightweight, dependency-free rich text editor with tables, images, media embeds and an optional menubar. SSR-safe, Next.js-ready, and just 36.4 KB gzipped.

Install

bash
npm install @liteeditor/react @liteeditor/editor

Use

jsx
import { useRef } from 'react';
import { Editor } from '@liteeditor/react';

export default function PostForm() {
  const editorRef = useRef(null);

  const save = () => {
    const html = editorRef.current?.getContent();
    // send html to your API
  };

  return (
    <>
      <Editor
        ref={editorRef}
        apiKey="YOUR_API_KEY"
        value="<p>Hello <strong>React</strong>!</p>"
        height={320}
        menubar
        plugins="link lists table image media"
        toolbar="undo redo | blocks | bold italic underline | link image table | numlist bullist"
      />
      <button onClick={save}>Save</button>
    </>
  );
}

The ref exposes getContent(), setContent(html) and the raw editor instance. TypeScript definitions ship with the package.

The same editor, live

This is the editor the React component renders — try it:

Loading editor…

Frequently asked questions

Uncontrolled by design: the value prop seeds the initial HTML, and you read the current content imperatively via ref.getContent(). Rich-text editors re-rendering on every keystroke through controlled props causes cursor jumps and performance problems, so LiteEditor avoids that pattern.

Get a free API keyFull documentation

Also available: Vue 3 component · Compare with TinyMCE