noteloom vs Notion, TipTap, and Editor.js: how it actually compares

These three come up constantly when people look for a block-style editor. They're not really the same kind of thing, though, so a fair comparison has to start by saying what each one actually is.

First, an honest distinction

Notion is a hosted product you sign up for and use as-is — not a library you install. TipTap and Editor.js are libraries you embed in your own app, same category as noteloom. Comparing noteloom to Notion is really "build it yourself vs. use an existing app"; comparing it to TipTap and Editor.js is a real apples-to-apples library comparison. Both are worth doing, so here they are separately.

vs Notion

Notion is an excellent product if what you want is a personal or team workspace app, used as-is. It isn't something you embed in your own React app — there's no public component you drop into a page and render inline as part of your own product.

noteloom exists for the opposite need: you're building your own app and want document editing inside it — a notes feature, a CMS field, a comment box with rich formatting — as a real React component you own and can style, not an embedded iframe of someone else's product.

vs TipTap

TipTap is built on ProseMirror, and that heritage is exactly its strength: a battle-tested, highly general schema system with mature support for real-time collaboration via Yjs, and an enormous extension ecosystem. That generality has a cost — ProseMirror's own concepts (schemas, node specs, transactions) are a real learning curve, and the dependency chain is bigger than react and react-dom alone.

noteloom trades that generality for simplicity: a flat blocks/runs JSON model you can read at a glance, no separate schema language to learn, and zero dependencies beyond React itself. noteloom now ships its own live collaboration too (a custom block-tree CRDT over WebRTC, peer-to-peer, no server) — experimental, and architecturally different from TipTap's Yjs integration, but the "no collaboration" gap has closed. If you need a large extension ecosystem and a battle-tested schema system more than a minimal dependency footprint, that's where TipTap still has the edge.

vs Editor.js

Editor.js is also block-based and also aims for a clean JSON output, which makes it the closest philosophical relative here. The difference is React integration: Editor.js is framework-agnostic and manages its own DOM outside of any framework's render tree, which means using it inside React means wrapping an imperative, non-React API — refs, manual mount/unmount, syncing its internal state back into React state by hand.

noteloom is React-first from the ground up: blocks are real React components, useBlock/useRun are real hooks backed by useSyncExternalStore, and the whole tree renders through React's own reconciliation — no bridge layer, no second render loop to keep in sync with React's.

Side by side

Limiting this to the two real library-vs-library comparisons:

Frequently asked questions

When noteloom is the right call

Choose noteloom when you're building document editing directly into a React app and want the document format and the rendering path to both stay simple enough that any contributor can read them in an afternoon — including cases that now want experimental peer-to-peer collaboration without standing up a server. Choose TipTap when you need a mature, production-proven collaboration stack or a large extension ecosystem more than a minimal dependency footprint. Choose Editor.js when your frontend isn't React at all, or needs to stay framework-agnostic across more than one.

Pick the tool whose tradeoffs you'd be happy to explain to the next developer who opens the codebase.

Try the live demo below, read the Architecture doc for the full model, or the Getting started guide to add it to your own app in a few lines.