# Page editing A React block (a whole screen) in [Beamline](https://beamline.io/)'s [CMS & media](https://beamline.io/components/apps/cms-media) app. Live demo: https://beamline.io/components/page-editing Editing a live page in place, for someone who may edit but not publish. Edit page outlines each editable piece with its name; a click edits it where it stands, and each edit autosaves with a receipt (a refusal marks the piece and keeps the words with Try again beside it). New CMS page starts a draft with its address. The side panel lists each edit as before and after with its save, the new drafts, and the handoff: Finish editing sends the edited pieces for review (blocked while a save failed) and says visitors see the published revision until someone with publishing rights publishes; editing again reopens it. View as visitor shows the published words, never the drafts; someone who may only view is told so. ## Use it for - Letting contributors edit a published page in place without publishing rights. - A handoff from editing to review that never publishes on its own. ## Not for - Editing CMS collections in a grid ([cms-workbench](https://beamline.io/components/cms-workbench)). - A rich document editor ([rich-text-editor](https://beamline.io/components/rich-text-editor)). ## Anatomy - bar: the page's address and live revision, View as visitor, Edit page or Stop editing (or view only said) - save line: how to edit, saving, saved at a time, or some not saved - page: the hero heading, intro and button and three story cards; in edit mode each piece outlined with its name, a changed one marked, a failed one in danger, a clicked one as a field - side: Edits (each piece's before and after, saved at or not saved with Try again), New pages (drafts with address, New page title, New CMS page), the handoff (Finish editing, or Sent to a reviewer, or Published by), Visitors see the live revision ## States - viewing, edit mode, a piece focused, autosaving, saved, save failed (kept, Try again), new CMS page draft, finished awaiting review, published separately, view as visitor, view only - narrow room: the side panel under the page ## Keyboard - Tab reaches each outlined piece in edit mode; Enter or Space edits it; Enter saves a one-line piece, Escape leaves it unchanged ## Motion Outlines ease on hover and focus. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `page` (required) | `{ title: string; path: string; publishedRevision: string; }` | — | The page's name and address. | | `bindings` | `EditableBinding[]` | — | | | `defaultBindings` | `EditableBinding[]` | — | | | `onBindingsChange` | `((bindings: EditableBinding[]) => void)` | — | | | `drafts` | `DraftPage[]` | — | | | `defaultDrafts` | `DraftPage[]` | — | | | `onDraftsChange` | `((drafts: DraftPage[]) => void)` | — | | | `review` | `ReviewState` | — | | | `defaultReview` | `ReviewState` | — | | | `onReviewChange` | `((review: ReviewState) => void)` | — | | | `canEdit` | `boolean` | — | May edit (otherwise the page is only viewed). | | `defaultEditing` | `boolean` | — | Starts in edit mode. | | `onAutosave` | `((bindingId: string, text: string) => Promise)` | — | Saves one edit; resolve when stored (not published), reject to keep the words with Try again. | | `onCreatePage` | `((title: string) => Promise)` | — | Creates a CMS page draft; resolve with it. | | `onFinish` | `((itemIds: string[]) => Promise<{ reviewer: string; }>)` | — | Sends the edited pieces for review; resolve with who reviews. Never publishes. | | `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` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - button - switch - input - textarea ## Dependencies `lucide-react` ## Import ```tsx import { PageEditing } from "@beamline/page-editing"; ``` ## Get it Page editing is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in CMS & media - [Content workbench](https://beamline.io/components/cms-workbench): 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… - [Page inline edit](https://beamline.io/components/page-inline-edit): 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… - [Writing canvas](https://beamline.io/components/writing-canvas): Writing before structure, for a CMS team. A shared draft with where it sits, who's in it and the section each person is writing in (or that they're only… - [Versioned document](https://beamline.io/components/versioned-document): One CMS document edited in its draft or in a release's version. The switcher says what each version holds and where an edit goes; published reads only… - [Document history](https://beamline.io/components/document-history): A CMS document's history. Revisions as a timeline, newest first, each with what happened, who and when; the ones made inside a release are gathered under… - [Record versions](https://beamline.io/components/record-versions): A published record with its versions. Main (published on success) and each version with how many fields differ from main (on info), who made it from what… - [Document finder](https://beamline.io/components/document-finder): Finding documents in a CMS. Search by words in a title or text field; the filters read as a sentence of chips (type, what a field contains, as many as… - [Content releases](https://beamline.io/components/content-releases): Content releases in a headless CMS: changes to many documents grouped to go live together. A preview bar layers chosen releases over what's live in the… - [Post release](https://beamline.io/components/post-release): One post on its way out. The preview shows it as the website, a phone, the email and a shared link, from one revision; the email's subject is set apart… - [Social media scheduler](https://beamline.io/components/social-scheduler): Plan posts across your social accounts: a week calendar where every post sits at its time in its account's colour and moves by drag, a queue of what goes… - [Post performance](https://beamline.io/components/post-performance): How published posts did, with every figure's denominator said. The list keeps each post's website visitors, its email's open and click rates (each "x of… - [Newsletter desk](https://beamline.io/components/newsletter-desk): A publication's newsletters, each its own list with its own subscribers, settings and design. Active and Archived apart; a new one says how many existing… - [Audience segments](https://beamline.io/components/audience-segments): A messaging product's audience segments in one place: the directory with members (a count of people, or not known, never 0) kept apart from what uses… - [Publishing team](https://beamline.io/components/publishing-team): A social team's settings in three places. Tags: posts with their status (scheduled, draft, sent) and tags in their own series hue, the same hue in the… - [Asset library](https://beamline.io/components/asset-library): A shared media library in a CMS. Folders hold files; collections only point at them, and adding to one says it never moves a file. The grid filters by… - [Media collection](https://beamline.io/components/media-collection): A media collection that fills itself from metadata. Its rules read as one sentence of chips (is, is not, contains, before, after; choices picked from the… - [File detail](https://beamline.io/components/file-detail): One file's details. The image with its focal point (where crops keep the subject), set by clicking the picture and said in words, or none said. Metadata… - [Metadata fields](https://beamline.io/components/metadata-fields): An account's metadata fields for media. The library lists each field with its type, how many assets fill it and how many projects can use it, with New… - [Collection batch edit](https://beamline.io/components/collection-batch-edit): A collection's records filtered and edited together. Saved filters beside nested rules (query-builder, up to three levels) over fields and dotted JSON… - [Schema fields](https://beamline.io/components/schema-fields): A collection's fields and their settings. The fields with key, type and flags (required, unique, hidden, translated). An existing field leads with its… - [Policy rules](https://beamline.io/components/policy-rules): One access policy's permissions. Admin access (said to skip every rule, on warning) and app access (without it its people can't sign in; rules still… - [Automation steps](https://beamline.io/components/automation-steps): An automation's trigger and its steps' options. The outline: what starts it, then each step by its key and kind, with how many unknown paths it holds… - [Automation runs](https://beamline.io/components/automation-runs): An automation's runs and running it by hand. The runs: when, how it ended (done on success, failed on danger, running on info), what started it and how… - [Review share](https://beamline.io/components/review-share): Sharing cuts for review. The page as reviewers will see it leads, large: its title (edited in place), how many items and when it ends, what's allowed… - [Guest review](https://beamline.io/components/guest-review): A guest's review of shared translations, and the invitation that scopes it. The room shows the screen each key appears on with the shared keys numbered… - [Translation workbench](https://beamline.io/components/translation-workbench): Translating a file segment by segment. Source and target sit side by side, segments grouped by their content unit; the source is read only (it changes by… - [Translation editor](https://beamline.io/components/translation-editor): Content in two languages side by side, and the interface strings. Content: the record and the language to translate into, how many fields are translated… - [Translation key](https://beamline.io/components/translation-key): A translation key, defined and given context. General: the name (one already in the project refused, or a name per platform), the base text, the… - [Language preview](https://beamline.io/components/language-preview): One document in two languages side by side. The panes scroll together; choosing a passage in either lights it in both and offers Find in editor; a… - [Localization overview](https://beamline.io/components/localization-overview): A localization project at a glance. Review progress per language says segments and words approved out of their totals (a word total still being counted… - [Captions](https://beamline.io/components/captions): Captions for a video, by speaker and by style. Caption layers are bound to a speaker (or all speakers), each with its own style and place, top or bottom… - [Cut review](https://beamline.io/components/cut-review): Reviewing a film cut. The picture is the still of the clip under the playhead, large, with the checks a reviewer needs folded into three tools above it… - [Shot list](https://beamline.io/components/shot-list): A scene's shot list for a film or video shoot. Shots in order with done, number, description, size, movement, setup and time, and banner rows (a meal, a… - [Call sheet](https://beamline.io/components/call-sheet): A shoot day's call sheet. Composed from grids switched on or off: schedule (scenes, start, pages, cast), cast with call times edited in place and a call… - [Screenplay revisions](https://beamline.io/components/screenplay-revisions): A screenplay under revision for a production. The script in screenplay form (scene headings, action, character, parenthetical, dialogue, transitions)… - [Transition sequence](https://beamline.io/components/transition-sequence): An event's sequence of states for one object, as an inspector. The states play in order; each step between two states has its own duration and easing… - [Segment editor](https://beamline.io/components/segment-editor): One segment's translation with its checks and help. The source shows its tags and placeholders as numbered chips, and so does a preview of the… - [Rig editor](https://beamline.io/components/rig-editor): Rig a character: bones, a rotation constraint and a mesh. Bones are drawn joint by joint on the stage or added from the chosen joint, and can branch from… - [Project board](https://beamline.io/components/project-board): A team's sprint as a board: the sprint's goal, points done and days left, filters by person and label, the work as cards in columns with work-in-progress… - [Cycle planner](https://beamline.io/components/cycle-planner): A team's work cycles: the schedule read as one sentence (every two weeks from Monday, no cooldown, three ahead) over a calendar of cycles on a week… - [Component source](https://beamline.io/components/component-source): Components and their instances in one artboard. Layers chosen together become a component after a review of what goes with them (their timeline keys and… - [Element index](https://beamline.io/components/element-index): A production's element index: every element (cast, props, wardrobe, vehicles, animals…) grouped by category, each with how many scenes it's in, the shoot… - [Layout inspector](https://beamline.io/components/layout-inspector): Size and place one object in its parent. Width and height are Fixed (points or percent), Hug (its content; not without children) or Fill (its parent; not… - [Text styles](https://beamline.io/components/text-styles): A text object's runs, styles and modifiers. Each run takes one of the text's own styles (they belong to this text only); hovering or focusing a style… - [Label designer](https://beamline.io/components/label-designer): A label template made against the real label: drawn at true proportions in millimetres with its size beside it; the code says what it holds (a QR links… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).