Build Notion-like databases
in your React app

Everything you need for structured data

Built from the ground up for modern React apps. Bring your own data layer, and let BlockNote Databases handle the rest.

Table View

Fully interactive table with resizable columns, inline cell editing, drag-and-drop row reordering, and keyboard navigation.

Filtering & Sorting

Declarative filter and sort rules that compose naturally. Build complex queries with type-safe, composable filter objects.

Pluggable Data Sources

Swap between in-memory or REST sources without changing component code. Build your own with a simple interface.

Undo / Redo

Transaction-based mutation system with automatic undo/redo. Every edit is tracked and reversible.

Type-Safe

Written in strict TypeScript from day one. Full type inference for property schemas, filter definitions, and transaction operations.

BlockNote Integration

Drop databases into a BlockNote editor as custom blocks. Embed structured data directly alongside rich text content.

Try it yourself

This is a fully interactive table running in your browser. Click cells to edit, drag rows to reorder, resize columns — it all works.

Simple, intuitive API

Get a fully interactive database table in under 30 lines of code. No configuration hell, no boilerplate.

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

function MyDatabase() {
  const state = useCollectionManager({
    collectionId: "my-db",
    user: "user-1",
    initialize: async () => ({
      collectionSource: new InMemoryCollectionSource(mySchema),
      documentSource: new InMemoryDocumentSource(myData),
    }),
  });

  if (state.status !== "success") return null;

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

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

Bring your own backend

Data sources are pluggable interfaces. Switch between storage backends without changing your UI code.

In-Memory

Perfect for prototyping and demos. Data lives in browser memory — zero backend required.

@blocknote/block-view/core/sources/in-memory

REST API

Connect to any HTTP backend. Handles pagination, optimistic updates, and error recovery.

@blocknote/block-view/core/sources/rest

$npm install @blocknote/block-view

Ready to build?

Get up and running in under 5 minutes with the quick start guide.

Start building