Page inline edit

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

The website edited in place inside the admin. A page picker with the page's address and Edit in place. The website shown in its own paper and type; with editing on, every part that comes from a record is outlined (info) and named on a tag (Lead story · Title), parts the person can't edit outlined apart (warning, with a lock), the chosen part outlined in ink and one just saved in success. Choosing a part opens its fields beside the page, saving to that record (said: every page showing it changes); the page shows the new value; a locked part says why; unsaved changes hold the panel and the page picker until saved or discarded; refusals said. A website that isn't connected says what to do.

Use it for

Letting editors change website content where it appears, with the record behind each part made clear.
A headless platform's in-place editing of its connected site.

Not for

Building page layouts from blocks (site builders).
Editing records in a form (record-versions, collection-batch-edit).

Anatomy

header: the tool's mark, the page picker, the address, Edit in place
website: the page, each record part outlined and tagged
panel: the part's name, Close, where it saves, its fields, held or saved or refused, Discard and Save

States

editing on or off; part editable, locked, chosen, just saved
unsaved changes holding the panel; saved; refused
website not connected
phone: the panel under the page
right to left: the admin mirrors; the website keeps its own direction
reduced motion: through the tokens

Keyboard

Tab through the page picker, Edit in place, each part's tag (Enter opens it), the panel's fields, Discard and Save

Motion

Nothing runs at rest.

Props

Prop	Type	Default	Description
`pages` (required)	`SitePage[]`	—
`records`	`Record<string, Record<string, string>>`	—	"collection:id" → field → value.
`defaultRecords`	`Record<string, Record<string, string>>`	—
`onRecordsChange`	`((r: Record<string, Record<string, string>>) => void)`	—
`onSave` (required)	`(req: { record: string; values: Record<string, string>; }) => Promise<{ ok: true; } \| {…`	—
`connected` (required)	`boolean`	—	The website's address is set and it answers.
`defaultPage`	`string`	—
`defaultEditing`	`boolean`	—
`defaultRegion`	`string \| null`	—
`product`	`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

Dependencies

lucide-react

Import

import { PageInlineEdit } from "@beamline/page-inline-edit";

Get it

Page inline edit 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