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.

Features

• In-memory data model -- Collections, views, documents, properties, and values with a central registry and traversable graph.
• Transaction-based updates -- All changes go through a Transaction; you get an ordered, replayable log of ops with rollback support and hooks for sync/persistence.
• Table view -- React hooks and column definitions built on TanStack Table, with drag-and-drop (rows and columns) and column resizing.
• Cell adapters -- Pluggable cell renderers (plain text, checkbox, date, number, single/multi select) with tree-shakeable imports.
• TypeScript -- Strict types throughout; no any or unknown in the public API.

Installation

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

Peer dependencies: react and react-dom ^19.0.0.

Usage

Core (model + transactions)

import { core } from "@blocknote/block-view";

const { CollectionManager, initializeCollection } = core;

The core module provides the data model (Collection, CollectionView, Document, Property), the transaction system, and the collection manager with undo/redo and pagination.

React (table components)

import { DataTable, useCollectionTableView } from "@blocknote/block-view/react";

The React module provides the DataTable compound component, cell adapters (checkbox, date, number, plain text, select), hooks for collection table views, drag-and-drop, and column resizing.

How it works

• Model -- In-memory entities (collections, views, documents, properties, values) with a central registry. Serializable to/from JSON with change notifications.
• Transactions -- The only way to mutate the model. Each change is recorded in an ordered log (forward op + inverse). The log can be synced, replayed, or rolled back.
• Table -- Integrates the model with TanStack Table, with optional drag-and-drop and column resizing.

Contributing

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