Content workbench

A React block (a whole screen) in Beamline's CMS & media app.

A site's content in one place: collections, the chosen collection's items in a grid where cells are chosen as a range (click, Shift-click), and an assistant handed a snapshot of exactly those cells. It answers with a change set (updates as before and after, creates labelled as sample content, deletes, problems) and nothing is written until Apply; the receipt names the commit and Undo undoes that commit or says why it can't; a record changed since the snapshot keeps the proposal instead of passing for saved. Item settings keep what the page never draws (slug, SEO title, description, categories, social image) beside what it does, preview the address from the route without going there, and save a draft that never publishes. Templates for address, title and description are written by field name but bound by field id, so renaming a field keeps them; the preview against a chosen item names unknown fields and shows the fallback for empty values. Publishing is per destination: what would change, the revision reviewed against what's live, a summary that moved on asks for review again, request accepted and live as two moments, a failure that keeps saying what's live, and no right to publish said.

Use it for

Editing a site's CMS collections with an assistant whose changes are reviewed before they're written.
Item metadata (slug, SEO, social image) and page templates, with publishing as its own step.

Not for

Editing text in place on the page (page-editing).
A general spreadsheet (data-grid).

Anatomy

bar: the site, its branch, Templates and Publish
collections: each with its count, in its hue
grid: the fields (a metadata-only field marked and tinted), each item's values, a reference by name, status (Draft, Changed, Published), sample content labelled, who edited it and when, Settings; chosen cells in the accent
assistant: the chosen cells as context (cells, fields, items) with clear, the request, Propose changes; the change set with updates (before, after), creates, deletes and problems; a conflict named; Apply, Discard; the receipt with Undo
item settings: On the page and Only in the page's metadata, a slug checked, categories, social image, the address preview; Save draft
templates: Address, Page title, Page description, the fallback, Insert field; Preview with an item as a search result, empty values and unknown fields named; field names to rename
publish: Publish to (each destination), live now with who and when, what would change, review again when it moved on, accepted then live, Publish to, no right said

States

collection loaded, range chosen, context attached, proposing, change set ready, problem found, conflict (proposal kept), applying, applied with receipt, undone, undo unavailable
item settings: loaded, changed, image chosen, slug invalid, saving, saved draft, refused (kept)
templates: empty, fields inserted, preview, unknown field, empty value (fallback), invalid address, field renamed (binding kept), saved draft
publish: nothing to publish, changes ready, changed since opened, publishing, accepted, live, failed (still live said), no right
narrow room: collections, grid and assistant stack

Keyboard

Tab reaches each cell; Space or Enter chooses it, with Shift extends the range

Motion

Cells and rows ease their colour when chosen. Nothing runs at rest.

Props

Prop	Type	Default	Description
`site` (required)	`string`	—	The site's name.
`collections`	`CmsCollection[]`	—
`defaultCollections`	`CmsCollection[]`	—
`onCollectionsChange`	`((collections: CmsCollection[]) => void)`	—
`items`	`CmsItem[]`	—
`defaultItems`	`CmsItem[]`	—
`onItemsChange`	`((items: CmsItem[]) => void)`	—
`assets`	`CmsAsset[]`	—
`host` (required)	`string`	—	The site's route prefix host for previews: "harbourjournal.example".
`defaultCollectionId`	`string`	—
`defaultRange`	`CellRange \| null`	—
`defaultRequest`	`string`	—	What's typed for the assistant at first.
`defaultProposal`	`ChangeSet \| null`	—	A change set already proposed, waiting for review.
`onPropose`	`((request: string, context: CellRange & { revisions: Record<string, number>; }) => Prom…`	—	Asks the assistant about the chosen cells; resolve with its change set.
`onCommit`	`((changeSet: ChangeSet) => Promise<string>)`	—	Writes a change set; resolve with a receipt id, reject (a conflict) to keep the proposal.
`onUndo`	`((receipt: string) => Promise<unknown>)`	—	Undoes the commit with this receipt; reject when it can't be undone.
`onSaveItem`	`((item: CmsItem) => Promise<unknown>)`	—	Saves an item's draft (never publishes); reject to keep the draft.
`onSaveCollection`	`((collection: CmsCollection) => Promise<unknown>)`	—	Saves a collection's templates or field names; reject to keep the draft.
`destinations`	`Destination[]`	—
`pending`	`PendingChanges \| null`	—
`onPublish`	`((destinationId: string, revision: string) => Promise<{ request: string; live: Promise<…`	—	Requests a publication; resolve when accepted with a promise that settles when it's live.
`onRefreshPending`	`(() => Promise<PendingChanges>)`	—	Called when the reviewed revision is out of date: resolve with fresh pending changes.
`locale`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

button
textarea
input
select
multi-select
dialog
popover
segmented-control

Dependencies

lucide-react

Import

import { CmsWorkbench } from "@beamline/cms-workbench";

Get it

Content workbench is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent