Rune vs Tiptap

A Tiptap alternative with zero dependencies.

Tiptap is an excellent ProseMirror wrapper, but it inherits ProseMirror's dependency tree and gates collaboration behind a paid cloud. Rune is built from scratch with zero runtime dependencies, no build step, a config-driven toolbar, and real-time collaboration in the box — all MIT licensed.

Rune vs Tiptap

runeTiptap
Zero runtime dependenciesYesNo — built on ProseMirror
No build step requiredYesNo
Config-driven toolbar & menusYesNo — you build the UI
Headless / CSS-variable themingYesPartial — bring your own CSS
Works without a frameworkYesYes
Real-time collaborationBuilt in (Yjs)Add-on; managed Cloud is paid
LicenseMITMIT (core is free)
Why switch

What you gain with Rune.

  • 01

    No dependency tree to audit

    Tiptap pulls in ProseMirror and its packages. Rune ships nothing but Rune — a smaller surface area to vet, bundle, and keep up to date.

  • 02

    The toolbar is config, not code

    With Tiptap you assemble the UI yourself. In Rune the toolbar, bubble menu, slash menu, and shortcuts all derive from one config object — flip a boolean and everything follows.

  • 03

    Collaboration without a backend bill

    Tiptap's core is MIT, but its managed collaboration runs through a paid Cloud. Rune's Yjs-based presence, comments, and tracked changes are MIT-licensed and bring-your-own-transport.

Migrating from Tiptap

Both editors take an HTML string and emit HTML, so most migrations are a matter of swapping the setup. Tiptap asks you to wire extensions and render the editor; Rune takes a config object and renders the full UI for you.

Tiptap (React)
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

function Editor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Hello</p>',
    onUpdate: ({ editor }) => console.log(editor.getHTML()),
  })
  return <EditorContent editor={editor} />
}
Rune (React)
import { RuneEditor } from '@parityfox/rune-editor/react'
import config from './rune.config.js'
import '@parityfox/rune-editor/styles'

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

When to choose Tiptap instead

Tiptap has a large extension ecosystem and years of production use on ProseMirror's battle-tested foundation. If you need a specific Tiptap extension, or you'd rather buy a managed collaboration backend than run your own, Tiptap is the safer choice today.

Questions

Is Rune a drop-in replacement for Tiptap?
Not a literal drop-in — the APIs differ — but both consume and produce HTML, so content migrates directly. You replace Tiptap's extension wiring with a Rune config object and render the <RuneEditor> component.
Does Rune use ProseMirror under the hood like Tiptap?
No. Rune is built from scratch with its own document model and zero runtime dependencies. Tiptap is a wrapper around ProseMirror.
Is real-time collaboration free in Rune?
Yes. Rune's collaboration layer (live presence, comments, tracked suggestions, offline sync) is MIT-licensed and Yjs-based. You provide the transport; there is no paid cloud requirement.

Try the zero-dependency alternative.

Install Rune and wire up an editor in five minutes — no ProseMirror, no build step, no paid tier.