# Writing canvas

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/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 reading), and one line saying it isn't in the CMS: nothing here is published or shown to readers. The outline comes from the draft's headings, jumps to each, and shows who's there and how many comments are open. Beside it, the context notes that steer the assistant (tone, facts, sources), each switched on or off for this draft with the count in use and the files attached said; and comments by section.

## Use it for

- A team drafting freely together before the text is structured into a CMS.
- Any shared draft where an assistant is steered by notes and files the team controls.

## Not for

- Editing structured fields ([versioned-document](https://beamline.io/components/versioned-document)).
- A chat with an assistant (chat screens).

## Anatomy

- header: where it sits and the title; who's in it and where
- the not-in-the-CMS line
- outline: sections from headings with who's there and open comments; the word count
- page: the title and the draft text
- side, context notes: how many are used; each note with kind, title, on or off, what it says and its files; New note
- side, comments: a new comment on a section; threads by section

## States

- writing in a section
- reading
- note on
- note off
- files attached
- open comments
- resolved

## Keyboard

- Tab through the outline (Enter jumps), the draft, then the side panel; Space switches a note

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `path` (required) | `string[]` | — | Where the draft sits: ["Northline", "Drafts"]. |
| `title` (required) | `string` | — |  |
| `text` | `string` | — | The draft's text; lines starting with "## " are section headings. |
| `defaultText` | `string` | — |  |
| `onTextChange` | `((text: string) => void)` | — |  |
| `writers` (required) | `Writer[]` | — |  |
| `currentUser` (required) | `CommentAuthor` | — |  |
| `people` (required) | `CommentAuthor[]` | — |  |
| `notes` (required) | `ContextNote[]` | — |  |
| `onNotesChange` | `((notes: ContextNote[]) => void)` | — |  |
| `threads` (required) | `SectionThread[]` | — |  |
| `onThreadsChange` | `((threads: SectionThread[]) => void)` | — |  |
| `sideTab` | `CanvasSideTab` | — |  |
| `defaultSideTab` | `CanvasSideTab` | — |  |
| `onSideTabChange` | `((t: CanvasSideTab) => void)` | — |  |
| `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

- breadcrumb
- avatar
- textarea
- switch
- select
- input
- [comment-thread](https://beamline.io/components/comment-thread)
- tabs

## Dependencies

`lucide-react`

## Import

```tsx
import { WritingCanvas } from "@beamline/writing-canvas";
```

## Get it

Writing canvas 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 editing](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…
- [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…
- [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).