Remirror is an MIT-licensed TypeScript toolkit for building cross-platform rich-text editors in React on top of ProseMirror, intended for React developers who want either an out-of-the-box WYSIWYG editor or a fully customized editor assembled from extensions.

What it is

Remirror lives at the intersection of the React and ProseMirror ecosystems. It supplies React bindings and an extension system over ProseMirror's editor model, so an application imports Remirror, useRemirror and OnChangeJSON from @remirror/react and composes behaviour by passing an extensions array such as [new BoldExtension(), new ItalicExtension(), new UnderlineExtension()] drawn from remirror/extensions. TypeScript is treated as a first-class citizen throughout, and the result runs in the browser, on mobile devices, and with internationalized interfaces through lingui.

The concrete thing it replaces is hand-written glue between React and bare ProseMirror. ProseMirror is framework-agnostic: it provides the document model and editing core but no React integration, no opinionated composition layer, and no ready-made interface. A team adopting it directly must wire the view lifecycle, synchronize editor state with React rendering, and serialize document changes by hand. Remirror packages that work as reusable extensions, and it also leaves the door open for teams that want to keep control, since custom extensions can be written for bare-metal ProseMirror integration.

Key capabilities

• Composable extensions, including BoldExtension, ItalicExtension and UnderlineExtension exported from remirror/extensions, combined through the useRemirror hook and rendered by the Remirror component.
• JSON change propagation via OnChangeJSON from @remirror/react, which turns editor updates into serializable output for a host application.
• More than 30 extensions for building fully customized editing experiences, with out-of-the-box editors available as an alternative to composing from scratch.
• Collaborative editing supported through either yjs or prosemirror-collab.
• Accessibility as an explicit design goal, with ARIA compatibility, plus internationalization support via lingui.
• Deliberate support for mobile devices alongside desktop browsers.
• Custom extension authoring for bare-metal ProseMirror integration, for cases where the built-in layer is not the right fit.

Who users are and how they deploy it

• React product teams that need a WYSIWYG surface embedded in an existing web application and do not want to maintain their own ProseMirror-to-React bridge.
• Teams building collaborative document editing, using yjs or prosemirror-collab for shared state between multiple clients.
• Product organizations needing accessible, internationalized editors across desktop and mobile browsers, where ARIA compatibility and lingui translation are requirements rather than extras.
• Extension authors who need to add bespoke editing behaviour while staying on the ProseMirror document model rather than adopting a different editing core.
• The project lists Benefex, Cobudget, eftax Co., Ltd., LabKey and Onethread in its community spotlight, with NEXT and Reflect appearing as sponsors, indicating adoption in commercial products rather than a single vendor's internal tool.

Getting started

Install the package set with npm install remirror @remirror/react @remirror/pm, or the equivalent yarn add or pnpm add invocation. From there the documented path is the 5 minute tutorial for an out-of-the-box WYSIWYG editor, with a CodeSandbox starter and a Storybook available for exploring components.

How it compares

Remirror sits above ProseMirror rather than beside it: it takes the same editing foundation and adds React bindings, extension composition and ready editors, whereas ProseMirror on its own remains framework-agnostic. The README now points new projects toward ProseKit, a framework-agnostic editor toolkit built on that same ProseMirror foundation, and publishes a migration guide for moving an existing editor across. That makes Remirror the React-specific option among the tools named here, with ProseKit positioned as the successor for new work.

When to use it — and when not to

Use it for an existing React application that already depends on Remirror, or where the extension set and React bindings match the requirement and the team accepts maintenance-mode support. Do not start a new project on it: the README states plainly that Remirror is in maintenance mode, that it is not recommended for new projects, and that only critical bugs will continue to be fixed. The repository carries 208 open issues, and because it is a library rather than a hosted service, there is no database or SMTP infrastructure to operate, but adopters do take on the maintenance of its dependencies and the migration path to ProseKit later.

import React from 'react';
import { BoldExtension, ItalicExtension, UnderlineExtension } from 'remirror/extensions';
import { Remirror, useRemirror, OnChangeJSON } from '@remirror/react';

const extensions = () => [new BoldExtension(), new ItalicExtension(), new UnderlineExtension()];

const Editor = ({ onChange }) => {
  const { manager, state } = useRemirror({
    extensions,
    content: '<p>Hi <strong>Friend</strong></p>',
    stringHandler: 'html',
    selection: 'end',
  });

  return (
    <Remirror manager={manager} initialContent={state}>
      <OnChangeJSON onChange={onChange} />
    </Remirror>
  );
};

npm install remirror @remirror/react @remirror/pm
# Or
yarn add remirror @remirror/react @remirror/pm
# Or
pnpm add remirror @remirror/react @remirror/pm