All comparisons

Engine ↔ Product

SpineEditor vs Tiptap

Tiptap is a product editor built on top of ProseMirror. It packages a ProseMirror-based engine behind a friendlier extension API and ships framework adapters for React, Vue, and Svelte. Tiptap has a generous open-source core and a paid Pro tier for hosted collaboration, AI, and comments. SpineEditor sits one layer below: it's an editor engine, in the same architectural slot ProseMirror occupies for Tiptap.

Where they sit

  • Tiptap = product. A complete editor: engine (ProseMirror) + extension catalog + framework adapters + optional hosted services.
  • SpineEditor = engine. The foundational layer that produces plans, transactions, and committed state. The UI, extensions, and any hosted services are yours to choose.

What Tiptap does well

  • Extension catalog. Headings, lists, code blocks, tables, mentions, tasks, links, typography — dozens of pre-built, drop-in extensions.
  • Framework integrations. First-class React, Vue, Svelte, and Solid bindings.
  • Cleaner authoring API. Chainable commands (editor.chain().focus().toggleBold().run()) instead of writing transactions by hand.
  • Tiptap Pro / Tiptap Cloud. Hosted real-time collaboration, AI commands, comments, document state. Turnkey, commercial.

What SpineEditor does at the engine layer

  • Explicit Plan stage. Every Intent compiles into a Plan artifact before any state changes — readable, loggable, vetoable. Tiptap's chainable commands run against the ProseMirror engine immediately.
  • Deterministic pipeline. Six fixed stages, each producing named artifacts.
  • Trace and replay. Trace tags ship on every stage.
  • Framework-neutral mount. The DOM runtime mounts into any HTMLElement; no framework assumed.

Engine layer comparison

At the engine layer Tiptap delegates to ProseMirror, so this column is effectively the ProseMirror engine.

Engine origin

Tiptap (engine layer)
ProseMirror
SpineEditor
Native

Pipeline contract

Tiptap (engine layer)
Transaction-driven
SpineEditor
Intent → Plan → Transaction

Explicit plan artifact

Tiptap (engine layer)
—
SpineEditor
First-class

Built-in trace / replay

Tiptap (engine layer)
Custom tooling
SpineEditor
Built-in

Source language

Tiptap (engine layer)
TypeScript
SpineEditor
TypeScript

License (engine)

Tiptap (engine layer)
MIT
SpineEditor
MIT

Code: toggle bold on the selection

Tiptap:

editor.chain().focus().toggleBold().run();

SpineEditor:

engine.dispatch({
  kind: "toggleMark",
  markType: "strong",
});

Choose Tiptap if

  • You want a complete product editor with a polished extension catalog.
  • You're building a React, Vue, or Svelte product and want first-class adapters.
  • You want hosted real-time collaboration, AI, or comments and are comfortable with Tiptap Pro.
  • You'd rather assemble a finished editor than build one.

Choose SpineEditor if

  • You want to own the engine layer, not adopt a product on top of one.
  • You want every edit to produce an inspectable Plan artifact before mutation.
  • You need replayable, deterministic editing for testing or audit.
  • You want a fully MIT-licensed engine with no commercial tier.