rune
Get started
Rune for React

A React rich-text editor in one component.

Import <RuneEditor> from the React adapter, hand it a config object, and you have a fully themed editor — toolbar, slash menu, and shortcuts included. No ProseMirror, no build step, and real-time collaboration whenever you want it.

Why Rune for React
  • 01

    One component, full editor

    <RuneEditor> renders the toolbar, bubble menu, and slash menu from your config. Pass content and an onChange handler and you're done.

  • 02

    Config-driven, not plumbing

    Every block, mark, and plugin is a boolean in one file. Turn things off and the React component's toolbar and menus update with them.

  • 03

    Zero dependencies

    The React adapter wraps the same zero-dependency core — nothing from ProseMirror or Slate in your bundle.

$npm install @parityfox/rune-editor
@parityfox/rune-editor/react
import { RuneEditor } from '@parityfox/rune-editor/react';
import config from './rune.config.js';
import '@parityfox/rune-editor/styles';

export default function App() {
  return (
    <RuneEditor
      extensions={config.extensions}
      content="<p>Hello</p>"
      onChange={(html) => console.log(html)}
    />
  );
}

Questions

How do I add a rich text editor to React with Rune?
Install @parityfox/rune-editor, import RuneEditor from '@parityfox/rune-editor/react', import the styles, and render <RuneEditor extensions={config.extensions} content="…" onChange={…} />.
Does the React adapter support real-time collaboration?
Yes. Rune's opt-in Yjs collaboration layer works with the React adapter — add live presence, comments, and tracked changes when you enable it.
Is there a useRune hook?
Yes. Alongside the <RuneEditor> component, the React adapter exposes a useRune hook for imperative access to the editor instance.

Add it to your React app.

Install the package and render one component — you'll have a configurable editor running in minutes.

Read the docsSee all features