How to install noteloom in your React project: a step-by-step guide

This guide walks through adding noteloom to a React app from a blank npm install to a working, typeable editor with a "/" command menu. No prior experience with editor libraries needed — every step below is copy-pasteable.

Before you start

You just need two things:

• An existing React app (Vite, Create React App, Next.js — any of them work).
• React 18 or 19 already installed.

Step 1 — Install the package

One command. noteloom only needs react and react-dom alongside it — nothing else to install first.

npm install noteloom react react-dom

Step 2 — Create the editor

useEditor() is the one call that replaces registries, a document store, and undo/redo wiring: it creates a fully wired store plus both registries, pre-populated with every built-in block and inline type.

import { useEditor } from 'noteloom';

const editor = useEditor();
// { store, registry, inlineRegistry } — undo/redo included, every built-in block/inline type registered

Step 3 — Render it

Pass that straight to <NoteloomEditor>. This alone is a working, typeable editor — clipboard, slash/@/emoji menus, the floating format toolbar, and keyboard shortcuts all come pre-wired, not hidden requirements you assemble yourself:

import { useEditor, NoteloomEditor } from 'noteloom';

function Editor() {
  const editor = useEditor();
  return <NoteloomEditor editor={editor} />;
}

Step 4 (optional) — Want more control?

useEditor() still hands you the raw store and registries — drop down to the granular API any time for a custom toolbar, a hand-picked subset of blocks, or mobile chrome mounted separately. Nothing above is a dead end:

import { EditorProvider, BlockChildren } from 'noteloom';

const { store, registry, inlineRegistry } = editor;

<EditorProvider store={store} registry={registry} inlineRegistry={inlineRegistry} history={store}>
  <BlockChildren parentId="root" />
  {/* + your own toolbar, MobileActionBar, useVoiceTyping, ... */}
</EditorProvider>;

If something doesn't work

Three things trip people up almost every time:

• In Next.js App Router: the file rendering Editor needs "use client" at the top — noteloom uses React hooks and browser APIs, so it can't run as a Server Component.
• Nothing shows up: double check you're rendering <NoteloomEditor editor={editor} /> and not just calling useEditor() on its own — the hook alone renders nothing.
• Only want a few block types? Don't delete JSX to hide one — pass registerBlocks to useEditor() instead (see the full Getting started guide) so the registry itself only knows about the ones you name.

Every piece here is a plain hook or component you compose yourself — there's no single hidden <Editor /> doing things behind your back to debug.

Try the live result below, or read the full Getting started guide for theming, picking only the blocks you need, and everything else that builds on this same setup.