Block Builder

Name: Block Builder
Brand: nextbridgehq
Availability: InStock
Author: nextbridgehq

Visual drag-and-drop block builder that stores Payload block schemas in the database so editors design and publish blocks without code changes.

Community 8 189/wk MIT v0.2.0

Installation

$ pnpm add @nextbridgehq/payload-block-builder

About

Payload Block Builder moves block schema definitions out of code and into the database. Editors design block types through a drag-and-drop canvas, publish them, and reuse them across any collection without a deploy or a migration. The aim is to stop turning simple content tasks into engineering tickets. The plugin registers two collections, `block-definitions` and `block-definition-versions`, and adds a "DB Layout" tab to the collections you list in config. That tab is an array of block instances, each pointing at a definition and a version, with the field data stored as JSON and rendered through a custom `BlockDataField` component. A `beforeChange` hook auto-assigns an `instanceId` to each row, and the plugin injects a sidebar nav link plus an "Edit in Builder" button on each definition. The builder UI itself runs as a Next.js app route under `/block-builder`, served by a `BuilderShell` client component. The palette covers 16 field types, including layout containers (row, group, array, tabs, collapsible) so a block can nest its own fields. Every publish creates an immutable version snapshot you can browse read-only or restore as a new version; 0.2.0 makes the version numbering concurrency-safe via a unique index on `versionIdString`. A code generation endpoint emits TypeScript block files, JSON import/export lets you move schemas around, and a self-contained Live Preview panel renders the schema as a mock form with the exact JSON paths a frontend should read. Setup is scaffolded by an `npx payload-block-builder init` CLI that writes the page, layout, styles, and plugin config. Rendering on the frontend is framework-agnostic: you fetch the structured JSON and render it however you like. The plugin needs Payload v3, Next.js 14 or newer, and React 18 or newer. The 0.2.0 schema change requires a Postgres migration in production (MongoDB is unaffected), and internal API endpoints now require an `X-Block-Builder: 1` header.