Getting Started

BlockNote Databases is a front-end library for building Notion-like databases. A “database” is a collection of structured document metadata — rows with typed properties — displayed as a table, kanban, gallery, or other view. You bring your own data layer; the library handles rendering, editing, filtering, sorting, pagination, and undo/redo.

Installation

npm install @blocknote/block-view

The package ships multiple entry points. Import what you need:

Entry point	What it provides
@blocknote/block-view/core	Data model, transactions, collection manager, property definitions
@blocknote/block-view/core/sources/in-memory	In-memory data sources (no backend)
@blocknote/block-view/core/sources/rest	REST API data sources
@blocknote/block-view/react	React hooks, cell adapters, TableView component
@blocknote/block-view/table	Framework-agnostic table abstraction
@blocknote/block-view/blocknote	BlockNote editor integration

Quick Start

A minimal table needs three things: data sources, a collection manager, and a table view.

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";

// Your collection schema and documents (see Data Sources guide)
import { collectionData, documentsData } from "./my-data";

function MyTable({ manager, viewId }) {
  const { table } = useCollectionTableView({
    collectionManager: manager,
    viewId,
    propertyDefinitions: defaultPropertyDefinitions,
  });

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

export default function App() {
  const state = useCollectionManager({
    collectionId: "my-collection",
    user: "user-1",
    initialize: async () => ({
      collectionSource: new InMemoryCollectionSource(collectionData),
      documentSource: new InMemoryDocumentSource(documentsData),
    }),
  });

  if (state.status === "loading") return <p>Loading...</p>;
  if (state.status === "error") return <p>Error: {state.error.message}</p>;

  return <MyTable manager={state.manager} viewId={state.manager.views[0].id} />;
}

The key pattern: useCollectionManager returns a three-state result (loading | error | success). Once loaded, pass the CollectionManager to useCollectionTableView to get a table object, then render it with <TableView>.

Live Demo

Core Concepts

Collection — The schema definition. Defines what properties (columns) exist, their types, and validation rules. One collection can have multiple views.

CollectionView — A presentation layer over a collection. Controls which columns are visible, their widths, filters, sorts, and manual row ordering.

Document — A single row. Contains property values as key-value pairs where every value is stored as a string (parsed at display time for CRDT compatibility).

Data Sources — Pluggable interfaces for loading and persisting data. Swap between in-memory, REST, Yjs (CRDT), or your own implementation without changing component code.

Transactions — All mutations go through a transaction system that enables undo/redo, debounced persistence, and automatic rollback on failure.

Next Steps

• Data Sources — Connect to a backend or use in-memory data
• Filtering & Sorting — Add filters and sorts to views
• Custom Properties — Build your own property types
• UI Customization — Customize toolbars, menus, and layout
• Transactions — Understand mutations and undo/redo
• BlockNote Integration — Embed databases in a BlockNote editor
• API Reference — Full type documentation