Block View

A front-end library for building Notion-like databases: a flexible data model and React UI primitives to display document metadata as a table, kanban, gallery, or other views.

A "database" here is a collection of documents, each with typed properties (title, status, dates, relations, etc.). The library handles the in-memory model, transactions, and table rendering -- you plug in persistence and sync via the transaction API.

Block View is local-first by design: every mutation is applied instantly to the in-memory model and recorded as a transaction, so the UI never waits on the network. Persistence and remote synchronization are optional -- hook into the transaction stream to save to disk, sync with a server, or replicate to peers over any transport you choose.

Features

• In-memory data model -- Collections, views, documents, properties, and values with a central registry and traversable graph.
• Local-first with optional sync -- All changes go through a Transaction and apply to the in-memory model immediately. The resulting ordered, replayable log of ops (with rollback) is the hook point for persistence and for synchronizing with remote peers when you want it -- nothing in the core requires a network.
• Table view -- React hooks and a lightweight createCollectionTable engine with structural sharing, dirty row tracking, drag-and-drop (rows and columns), and column resizing.
• Extensible property types -- Two layers of configurability. Developers define property-type schemas and their renderers (built-ins: plain text, number, checkbox, date, single/multi select; extensible to custom types like user, image, relation, etc.). End users then pick from those registered types when adding columns to their collections — without any code changes. Adapters are tree-shakeable, so you only ship the types you register.

Installation

bun add @blocknote/block-view
# or
npm install @blocknote/block-view

Peer dependencies: react and react-dom ^19.0.0.

Usage

Render a table

import {
  InMemoryCollectionSource,
  InMemoryDocumentSource,
} from "@blocknote/block-view/core/sources/in-memory";
import {
  defaultPropertyDefinitions,
  TableView,
  useCollectionManager,
  useCollectionTableView,
} from "@blocknote/block-view/react";
import "@blocknote/block-view/react/styles.css";
import "@blocknote/block-view/react/adapters/styles.css";

function Database() {
  const { manager } = useCollectionManager({
    collectionId: "tasks-123",
    user: "me",
    initialize: async () => ({
      collectionSource: new InMemoryCollectionSource(collectionFixture),
      documentSource: new InMemoryDocumentSource(documentsFixture),
      pageSize: 50,
    }),
  });

  const { table } = useCollectionTableView({
    collectionManager: manager,
    viewId: manager.views[0].id,
    propertyDefinitions: defaultPropertyDefinitions,
  });

  return <TableView table={table} />;
}

useCollectionManager initializes a CollectionManager from a pair of sources (in-memory, REST, broadcast, etc.). useCollectionTableView turns a view into a table, configured with the property-type registry. TableView renders it.

Data model

The model has four logical layers, each with a single clear responsibility:

| Layer | Responsibility | | ---------------- | --------------------------------------------------------------------------- | | Collection | Schema + the set of Documents that belong to it. | | Property | Schema for one field (type, label, constraints). Defined by the Collection. | | Document | One row/item. A map of PropertyValues keyed by property id. | | PropertyValue | One cell. A string value, plus optional Ref to an external resource. | | CollectionView | Presentation of a Collection: columns, filters, sorts, manual order. |

flowchart LR
    CV[CollectionView] -->|references| C[Collection]
    C -->|contains| D[Document]
    C -->|defines schema| P[Property]
    D -->|props| PV[PropertyValue]
    PV -->|typed by| P

Key design choices:

• Schema lives on the Collection, not the Document. Adding, renaming, or retyping a Property updates every view instantly without touching any Document.
• One Collection, many Views. Filters, sorts, column widths, and manual drag-and-drop order live on the CollectionView — the underlying data is never duplicated.
• PropertyValues are always strings (plus an optional Ref for relationships). The Property.type is an interpretation of the string, parsed and validated at display time. Changing a Property's type never requires a data migration, and invalid values soft-fail rather than being destroyed. This also keeps the model CRDT-friendly.

Minimal example

const collection: Collection = {
  id: "tasks-123",
  name: "Tasks",
  schema: {
    title: { id: "title", label: "Title", type: "string" },
    status: {
      id: "status",
      label: "Status",
      type: "single-select",
      enum: ["todo", "in-progress", "done"],
    },
    done: { id: "done", label: "Done", type: "checkbox" },
  },
  documents: [
    {
      id: "doc-1",
      collectionId: "tasks-123",
      props: {
        title: { value: "My First Task" },
        status: { value: "in-progress" },
        done: { value: "false" },
      },
    },
  ],
};

const view: CollectionView = {
  id: "view-1",
  type: "table",
  collectionId: "tasks-123",
  columns: [
    { property: collection.schema.title, width: 200, visible: true },
    { property: collection.schema.status, width: 150, visible: true },
    { property: collection.schema.done, width: 100, visible: true },
  ],
  filters: [],
  sorts: [],
  manualSortOrder: ["doc-1"],
};

BlockNote integration

Block View ships a first-party adapter for BlockNote: a custom database block you can insert inline via the slash menu or side menu, rendering a CollectionView directly inside a BlockNote document. Import from @blocknote/block-view/blocknote (createDatabaseBlockSpec, insertDatabaseBlockItem, BlockViewProvider). See adr/05-blocknote-integration.md for the full design.

Using the BlockNote integration requires @blocknote/core, @blocknote/react, and @blocknote/mantine as peer dependencies.

Status

Pre-1.0 — APIs will change. Pin exact versions and read release notes before upgrading.

Contributing

See CONTRIBUTING.md for development setup, commands, and guidelines.

License

GPL-3.0-only.