# Note templates A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Clinic](https://beamline.io/components/apps/clinic) app. Live demo: https://beamline.io/components/note-templates A practitioner's note templates in one library with three ways in. My templates lists their own by kind, favourites first, each with when it was last edited and last used (a template never used says so, not a date); a copy from the community says whose it was and that the original is unchanged; the open template reads as the note will (a page, its placeholders apart from its fixed words), with how often it was used, a numbered list of what is filled in each time and, when onUse is given, Start a note (said when it opens, or why not). Community lists templates others shared, filtered by specialty and region, with an endorsement only when the app supplies one; the example note and the structure sit side by side before adding, adding makes a copy that keeps where it came from, and the chosen template stays chosen. A new template comes from an example (the app's draft turns personal details into placeholders and says each one), a description, or a PDF form (the fields found listed by page, a scanned or non-fillable form said plainly, values already on the form provisional, a signature never filled in); nothing is kept until it is accepted, and a draft that fails keeps what was written. ## Use it for - A clinician's or professional's library of note templates: their own, shared ones, and new ones drafted from an example or a form. - Any template library where copies must keep their origin and an AI draft is reviewed before it is kept. ## Not for - Writing the session note itself ([session-notes](https://beamline.io/components/session-notes)). - Client intake forms ([client-forms](https://beamline.io/components/client-forms)). ## Anatomy - header: Note templates, a kind filter, My templates, Community and New template - my templates: rows (name, kind, Edited , Last used or Never used) with a favourite star beside each; the open template: name, kind, sections and use, Start a note (with onUse), where a copy came from or the PDF it was made from, its sections as a page with placeholders drawn apart, then what is filled in each time, numbered - community: Specialty and Region filters; rows (name, kind, author · specialty · region, an endorsement when supplied); the chosen template: kind, author, how many added it (copies), Add to my templates (or In your templates), the example note as a page with its sections under headings, beside the structure - new template: From an example, From a description, From a PDF form; the example or description with Make a draft, or the PDF dropzone; the draft for review (Not kept yet, its name, the personal details turned into placeholders, the structure, Discard draft and Accept and add); the PDF's fields by page (provisional values, signature never filled in) or no fields found; at rest, from an example: one line of a note and the same line as a template, its personal details turned into placeholders ## States - favourite, never used, copied from the community, made from a PDF - community filtered, no matches, endorsed (only when supplied), already added - drafting, draft for review, draft refused (the text kept), accepted - personal details replaced, none found - PDF reading, fields found, scanned (no fields), provisional value, signature - narrow room: lists above what is open ## Keyboard - Tab through the header, the list, the open template and its actions - a favourite star is a toggle button - rows open with Enter; the dropzone opens the file chooser with Enter ## Motion Rows take hover and selection in the fast duration; the favourite star fills in the same. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `templates` | `NoteTemplate[]` | — | | | `defaultTemplates` | `NoteTemplate[]` | — | | | `onTemplatesChange` | `((templates: NoteTemplate[]) => void)` | — | | | `shared` | `CommunityTemplate[]` | — | Templates others shared. | | `onDraft` | `((input: { from: "description" \| "example"; text: string; }) => Promise)` | — | The app's draft from an example or a description; reject with the reason (what was written is kept). | | `onReadPdf` | `((file: File) => Promise)` | — | The app's reading of a PDF form's fields; reject with the reason. | | `view` | `NoteTemplatesView` | — | | | `defaultView` | `NoteTemplatesView` | — | | | `onViewChange` | `((view: NoteTemplatesView) => void)` | — | | | `defaultCreateMode` | `CreateMode` | — | | | `today` | `string` | — | Today, ISO date, for new and copied templates. Default: today. | | `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. | | `onMerge` | `((note: MergedNote) => unknown)` | — | Start one note from several templates, merged in the order picked (a section two share joins once, placeholders kept). Offers Combine into one note on My templates when given; reject with the reason to keep the picks. | | `onUse` | `(template: NoteTemplate) => unknown` | — | Start a note from the open template; offers Start a note when given. | ## Built from - [segmented-control](https://beamline.io/components/segmented-control) - select - badge - button - textarea - input - [file-dropzone](https://beamline.io/components/file-dropzone) - alert ## Dependencies `lucide-react` ## Import ```tsx import { NoteTemplates } from "@beamline/note-templates"; ``` ## Get it Note templates 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 Clinic - [Appointment book](https://beamline.io/components/appointment-book): The desk's day with the appointment editor beside it. The appointment being edited is a block on the day like any other, drawn in the accent while it is… - [Book an appointment](https://beamline.io/components/client-booking): A client books an appointment on the practice's own site: a service (length and price beside it), who gives it or anyone free, and where; a day with… - [Services and hours](https://beamline.io/components/booking-setup): A practice's services and the hours its practitioners can be booked, one relation seen from both ends. A service reads as values and changes on demand… - [Patient overview](https://beamline.io/components/patient-overview): One patient's record on a page. A search finds patients by name, chart number or birth date (recent patients when empty; same names told apart by birth… - [Patient chart](https://beamline.io/components/patient-chart): A clinic's chart for one client and their animals. The client's header (phone, email, contact preferences, the balance with what it means and as of when… - [Health questionnaire](https://beamline.io/components/health-questionnaire): A patient's medical history as a versioned questionnaire. Every question takes Yes, No or I don't know, and one not answered says so, never read as No; a… - [Case workspace](https://beamline.io/components/case-workspace): A patient's clinical cases and how cases work at the practice. A case shows its status, type, teeth, staff, location and start; its checklist counts… - [Care plan](https://beamline.io/components/care-plan): A client's care plan composed beside what the client will see of it. Every field says who sees it (the care team only, or the client too) and the… - [Treatment plan](https://beamline.io/components/treatment-plan): A patient's treatment plan in named phases. Each procedure shows its tooth, status and fee beside the patient's and the insurer's estimate (not known… - [Plan templates](https://beamline.io/components/plan-templates): Reusable treatment-plan templates. A template reads as words at rest and changes on demand: its name edits in place; the status its procedures start as… - [Plan acceptance](https://beamline.io/components/plan-acceptance): A treatment plan presented for acceptance, from both sides. The practice chooses the agreement (the account's default or this location's own) and how… - [Plan follow-up](https://beamline.io/components/plan-follow-up): The practice's follow-up lists, for the person who turns accepted treatment into booked chairs. Treatment plans lead with what's at stake: the value… - [Session notes and tasks](https://beamline.io/components/session-notes): A session's note beside its follow-up tasks, each task tied to the exact words it came from: choose a task and its words light in the note or the… - [Probing chart](https://beamline.io/components/probing-chart): A periodontal probing chart. Six sites per tooth (three buccal, three lingual) across both arches as you face the patient, each depth in its cell and… - [Procedure picker](https://beamline.io/components/procedure-picker): Procedures, conditions and bundles put on a patient's teeth from the chair. The mode (existing, planned, completed) is chosen before adding and each… - [Results notebook](https://beamline.io/components/results-notebook): A notebook entry's structured results. The entry's text above a bounded results table with typed columns: a sample link, numbers in their unit with their… - [Insurance claims](https://beamline.io/components/claims-queue): Insurance claims as a queue: every claim at first, in the order a person works them (rejected by the clearinghouse, denied by the payer, partly paid, not… - [Account ledger](https://beamline.io/components/account-ledger): A patient's account. All transactions or the ones needing attention, each dated with its type in a word, its amount and the running balance; entries that… - [Dispensing](https://beamline.io/components/dispensing): Dispensing from the shelf by lot. A product is found with its stock and prices (consumables left out unless asked); the quantity is drawn across its… - [Record sharing](https://beamline.io/components/record-sharing): Records sent out of a clinic. Several visits' records and their documents (record, invoice, plan, lab result, image) are chosen separately, with how much… - [Client journal](https://beamline.io/components/client-journal): A client's journal from both ends. The client's side is their home, built around their day: today's goals with how many are done and a mark each, done… 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).