Build a production-ready editor that matches your product.

import { Editor, Toolbar, Content } from 'ritext';
import { Document, Text, Paragraph } from 'ritext/extension/base';
import { Bold } from 'ritext/extension/bold';
import { Italic } from 'ritext/extension/italic';
import { Heading } from 'ritext/extension/heading';
import 'ritext/styles.css';

const extensions = [Document, Text, Paragraph, Bold, Italic, Heading];

export default function MyEditor() {
  return (
    <Editor extensions={extensions} className="rounded-xl border">
      <Toolbar className="border-b p-2" />
      <Content />
    </Editor>
  );
}