noteloom

Heading

A section heading, levels 1 through 3. A leaf block — its contentIds are its own text runs.

JSON shape

json
{ "id": "h1", "type": "heading", "parentId": "root", "contentIds": ["r1"], "props": { "level": 1 } }
PropTypeDefaultNotes
level1 | 2 | 33Rendered as h1/h2/h3.

Slash commands

  • Heading 1 — keywords: heading, h1, title
  • Heading 2 — keywords: heading, h2, subtitle
  • Heading 3 — keywords: heading, h3, title

Usage

Typing "# ", "## ", or "### " at the start of a paragraph also converts it, matching Markdown convention.

Looking for a heading that can hide its own content? See Toggle heading — same levels, but collapsible with nested blocks.

Styling

Rendered as an actual <h1>/<h2>/<h3> tag with class .be-heading, plus a per-level .be-heading-1/.be-heading-2/.be-heading-3 class so you can style each level independently instead of relying on tag-selector specificity tricks like h1.be-heading.

Using it in your editor

useEditor() registers every built-in block by default, heading included. To register only the blocks you use instead:

jsx
import { useEditor, NoteloomEditor, registerBlocks, paragraphBlockType, headingBlockType } from 'noteloom';

function Editor() {
  const editor = useEditor({
    registerBlocks: (registry) => registerBlocks(registry, { paragraph: paragraphBlockType, heading: headingBlockType }),
  });
  return <NoteloomEditor editor={editor} />;
}

See Picking only the blocks you want for combining this with other types.