Skip to content

React

RichTextEditor and useEditor() for React 18+, Remix, Gatsby and Vite.

On this page
Package@open-wysiwyg-editor/react(opens in a new tab)Requires React 18+

Install

Terminal
npm install @open-wysiwyg-editor/react

Usage

import { useState } from "react";
import { RichTextEditor } from "@open-wysiwyg-editor/react";
import "@open-wysiwyg-editor/react/style.css";

export function Article() {
  const [html, setHtml] = useState("<p>Hello <strong>world</strong></p>");
  return <RichTextEditor value={html} onChange={setHtml} placeholder="Write something…" />;
}

Good to know

  • SSR-safe: the server renders an empty container and the hidden input, and the editor starts in the browser.
  • value is loaded only when it differs from the HTML the editor last produced, so typing never moves the cursor.
  • Callbacks and the runtime options (editable, placeholder, aria*, dir, contentLang) follow every render. Everything else is read at mount: give the component a new key to change it.

Always sanitize on the server

The editor sanitizes what it loads and produces, but that is not a security boundary: anyone can post any string to your API. Sanitize the HTML again with a library you trust before you store it or render it for other users.

Edit this page on GitHub