A free, block-style editor
with universal JSON output
noteloom lets developers stay focused on the end-user experience — block-based editing, inline widgets, and slash commands, dropped straight into any React app.
Free and open-source
MIT licensed. Read the source, fork it, ship it — no account, no usage limits.
Zero runtime dependencies
The only things it expects from your app are react and react-dom — plus a clean default theme, injected automatically and fully retheme-able.
Clean JSON output
Every document is a flat, normalized JSON tree — easy to store, diff, sanitize, and render anywhere.
Fine-grained re-rendering
Every block subscribes only to its own data. Editing one paragraph in a 500-block doc repaints just that block.
Meet noteloom 👋
A block-style editor for React. Type / to pull up the block menu, right where your cursor is.
- It's a block-style editor
- Outputs clean JSON, not markup soup
- Zero runtime dependencies
Up and running in two lines
useEditor() wires a fully-featured store and both registries; <NoteloomEditor /> renders it, clipboard/slash-menus/toolbar included. A clean default theme is injected automatically — no separate CSS import — and every .be-* class and --noteloom-* custom property is yours to override, or skip the default theme entirely with theme="none" and bring your own, the way this site's own editor does. Need more control — a custom toolbar, a hand-picked subset of blocks? Drop down to the granular API any time; nothing above is a dead end.
import { useEditor, NoteloomEditor } from 'noteloom';
function Editor() {
const editor = useEditor();
return <NoteloomEditor editor={editor} />;
}
// That's it — undo/redo, every built-in block/inline type,
// clipboard, slash commands, and the floating toolbar included.
// No CSS import either: a clean default theme injects itself.Clean JSON output
Every document is a flat map of blocks and runs — no nested markup to parse. Use it across web, native, chat bots, or a search index. Sanitize it, diff it, version it; it's just data.
- • Render it to HTML, plain text, or your own components via each block's
toHTML. - • Round-trips through copy/paste, including into other apps.
- • No ProseMirror-style deeply nested schema to learn.
{
"rootId": "root",
"blocks": [
{ "id": "root", "type": "page", "contentIds": ["h1", "p1"] },
{ "id": "h1", "type": "heading", "props": { "level": 1 } },
{ "id": "p1", "type": "paragraph" }
],
"runs": [
{ "id": "r1", "type": "text", "value": "Meet noteloom", "marks": {} },
{ "id": "r2", "type": "text", "value": "A block editor for React.", "marks": { "italic": true } }
]
}Every block, documented
Reach any of these from the / menu while typing. Click one to read how it works and how to customize it.
Paragraph
Plain running text — the default block.
Heading
H1–H3 section headings.
List item
Bulleted, numbered, to-do, and toggle lists.
Table
Rows/columns with typed cells (text, date, checkbox, select).
Layout
Multi-column containers for side-by-side content.
Divider
A horizontal rule.
Callout
An icon + highlighted box for tips and warnings.
Blockquote
A single-line styled quotation.
Code
A monospaced code block with a language tag.
Toggle heading
A collapsible heading with nested content.
Button
A styled link that behaves like a call-to-action.
Embed
Image, video, audio, or file, local or remote.
Canvas
Freehand drawing — pen, eraser, shapes, arrows, and text.
Built for real-world use, not just a demo
Recent releases focused on the parts that make an editor actually usable everywhere, by everyone.
Real-time collaboration — no cloud, no server
Peers connect directly over WebRTC and merge live via a custom block-tree CRDT. No account, no hosted service, no company in the middle — even works entirely offline on a shared WiFi.
Offline persistence
usePersistedDocument auto-saves to IndexedDB and reloads with zero network — one hook, no server.
A two-line API
useEditor() + <NoteloomEditor /> — a fully wired editor, undo/redo and every built-in block included, in two calls.
Canvas: draw right inside a note
Pen, eraser, resizable text, and six shape tools — bakes down to a self-contained inline SVG, no image conversion step.
Mobile & touch, done properly
A bottom action bar, tap-friendly block picker, and touch-aware popovers that reposition above the keyboard — not a desktop UI stretched onto a phone.
RTL, accessibility & voice typing
Automatic per-block text direction, keyboard-operable menus, live-region announcements, and hands-free dictation — not bolted on after the fact.
Works without a connection
This site is installable and caches itself for offline use. Your notes live in your browser's storage on your device — open My Notes, write something, then try it again with the network off.
Open My NotesCollaborate live — without handing your document to the cloud
This isn't Google Docs with a noteloom skin. There's no server that stores your document, no account, and no company that could read it even if it wanted to. Peers connect directly to each other over WebRTC, the same way a video call does — from that point on, every edit flows peer-to-peer, full stop.
It's the same instinct behind offline-first, infrastructure-free apps like Bitchat — two devices in the same room should be able to work together without a company in the middle. Run it on a shared WiFi with the internet unplugged entirely, and nothing about this feature ever needs the outside world at all.
- No server ever sees your document — only a small connection-setup handshake passes through anything else at all.
- Works fully offline — same WiFi, zero internet, still live-syncs between everyone in the room.
- No hub, no host — three people editing at once means three direct connections, not one server relaying everyone.
- See exactly who's editing and where, live — colored cursors with names, updating in real time.
- Reconnects automatically through WiFi blips or a closed laptop lid, and catches up on whatever you missed.
Missing a block or a feature?
Keep a personal wishlist of what you'd like to see next, right alongside your notes — nothing leaves your browser unless you choose to send it on.
- • Jot an idea down in seconds, no account needed.
- • Star the ones you care about most.
- • Send any of them straight to the maintainer as a GitHub issue, when you're ready.
- A math / equation block★
- Slash command for tables☆
- Export to Markdown☆
From the blog
Every post is drafted and published using noteloom itself — guides, comparisons, and notes on building the editor.
What's new in noteloom 0.3.1: a version history you don't have to think about
Version history reworked into a self-contained, Google Docs-style component — automatic capture, author attribution, and a word-level diff view. createPeriodicVersionSnapshotter is gone.
30 Jul 2026
What's new in noteloom 0.3.0: comments, templates, and version history
Three additions to the React block editor: select-and-comment threads, reusable block/document templates, and point-in-time version snapshots with one-click restore.
28 Jul 2026
Offline collaboration for your whole office — no internet, no cloud
Real-time document collaboration for an entire office or team, running permanently on your own local network, with zero internet required. One small always-on machine, a fixed IP, and every laptop/PC/phone on the WiFi collaborates live — here's the full setup.
25 Jul 2026