Create a RichText Editor using Remirror toolkit in React

ProseMirror is a toolkit for developing or building rich-text editors for the web. Remirror is ProseMirror React tool kit, which simplify the configuration and usage.

It also minimize the initial setup required to use Prosemirror toolkit and supports all features and extensions.

Let’s build a Ritch Text Editor with Remirror <WysiwygEditor /> component. It is a ready to use component.

Project Setup

Let’s build a React project with create-react-app command.

npx create-react-app mkdeditor

Add the remirror dependecies

yarn add @remirror/react-editors @remirror/react

Let’s import WysiwygEditor t components and create our RichTextEditor component.

import { WysiwygEditor } from "@remirror/react-editors/wysiwyg";

const RichTextEditor = () => {
  return (
    <div>
      <WysiwygEditor />
    </div>
  );
};

We need not implement the CSS styles for the editor, everything is ready to use.

See Live example on Sandbox

Links

Remirror Repo on GitHub

• Create Quill RichText editor using react-quill
• How to get HTML from Remirror editor in Reactjs
• How to get state as JSON from Remirror editor in Reactjs
• Create a TinyMCE Rich Text Editor in React
• Create a Slate Rich Text Editor in React
• Create a Material-UI Rich Text Editor in React
• Create a RichText editor using Quilljs
• Create minimal editor with Tiptap in React
• Create a Social Editor using Remirror toolkit in React
• Create a RichText Editor using Remirror toolkit in React