A React toolkit for building cross-platform text editors, based on ProseMirror.

Motivation · Status · Documentation · Storybook · Contributing

Introduction

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>
  );
};

With this code snippet your editor now supports basic editing functionality.

Alternatively, take a look at our 5 minute tutorial to get up and running with an out-of-the-box WYSIWYG editor.

Installation

npm add remirror @remirror/react @remirror/pm

If you run into any issues we recommend any of the following:

Open an issue in our github repo.
Join our discord server and discuss the problem with our community.
Create a pull request with your proposed improvement by clicking the edit button on the relevant page.