React
React WYSIWYG editor — lightweight, SSR-safe, free
@liteeditor/react wraps LiteEditor, a ~41 KB vanilla JS rich text editor, in a small React component. Tables, images, media, code samples and a menubar out of the box — and guarded init makes it Next.js-ready.
Step 1
Install the React rich text editor
npm install @liteeditor/react @liteeditor/editorStep 2
Use it — React, Next.js, and the ref API
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="all"
toolbar="full"
/>
<button onClick={save}>Save</button>
</>
);
}Uncontrolled by design
value seeds the initial HTML; read the current document with ref.getContent() when you save. A controlled pattern that re-renders rich text on every keystroke causes cursor jumps and slows large documents, so the component intentionally doesn't do that. Reactive prop changes after mount don't re-initialize the editor — use setContent() instead.
Live
The same editor, live
This is the editor the React component renders — try the menubar, insert a table, paste from Word.
React TinyMCE alternative
Lighter than TinyMCE, CKEditor and Quill for React
FAQ
React WYSIWYG editor FAQ
LiteEditor's @liteeditor/react component gives React apps a ~41 KB gzipped WYSIWYG editor with tables, images, media embeds, code samples and a menubar included, plus a free lifetime plan — a lighter alternative to TinyMCE React or CKEditor React.
Also available: Next.js step-by-step guide · Vue 3 component
Add a lightweight WYSIWYG editor to your React app
Free lifetime plan · No credit card · localhost pre-approved for development
npm install @liteeditor/react @liteeditor/editor