Course builder
A React block (a whole screen) in Beamline's Education app.
Setting a course up. The learning path as ordered sets, each with its release rule in place (at once, a delay after the set before drawn as a bar you drag with its field as the exact twin, or a date and time) said back in a sentence as learners will meet it, an order that runs backwards said; lessons moved from each lesson's menu (Move up, Move down or to another set), every move part of a draft with Undo, counted and applied together (a refused apply keeps the draft), each lesson's completions staying with it wherever it moves; who the path is assigned to changes at once, said apart from the draft. A lesson opens in an editor beside the path with its content and its Complete by date, saved on its own and never moving its set's release. Live sessions are a series (first date, start, length, how it repeats) whose real dates are listed against what learners have, new, removed and moved ones marked, with the count of changes not published; invitations go out only on Publish, and a meeting the provider couldn't create is said on its own session. A new cohort copies an earlier one's lessons and sessions (never its learners, submissions, completions or discussions), moving every date by whole weeks or the exact gap, previewed before it is created unpublished; a partial copy names what was left behind.
Use it for
- Course creators and training teams arranging a learning path or syllabus: order, when each part opens, due dates, who it is assigned to, live sessions and the next cohort.
- Any staged programme whose parts open on a schedule or after the previous part (onboarding, certification, drip courses).
Not for
- The learner's view (course-home).
- The course's results and learners (course-dashboard).
- A team calendar of events (team-calendar).
Anatomy
- head: Path and Live sessions, New cohort
- draft bar (sticky): N changes not applied or Every change is applied, Undo, Apply changes; a refused apply under it
- a set: number, title, finished of assigned; its release: the sentence as learners meet it, the rule changed from a menu (At once / After the set before / On a date), the delay bar with its days for a delay, Change date opening the date and time, an order warning; its lessons: position, the title (opens the editor; Unpublished), completions, one menu (Move up, Move down, Move to set <n>, Edit the lesson)
- Assigned to: who and since when, Remove; Assign to; what changed, said at once
- lesson editor: title, content, Complete by and its time, Clear the due date, its set's rule, a due-before-open warning, Saves this lesson only, Not saved / Saved, Save lesson
- live sessions: the series form (title, first session, start, length, the repeat rule) beside the review: count and zone, changes not published, the dates with New, Removed, Moved from and a provider failure, Move this session, Publish and send invitations
- new cohort dialog: name, start, Start from (a cohort or nothing), Copy (lessons, live sessions), what is never copied, Move dates by (whole weeks or the exact gap) with the days and the sessions it will have; created unpublished or partly, named
States
- no assignments
- draft sequence
- applied
- applying
- apply refused
- undo
- unpublished content
- completed set counts
- release: immediate, delay, scheduled, after the first set, out-of-order dates, learners' zones unknown
- lesson: editing, deadline unset, deadline set, due before the set opens, unsaved, saving, save refused, saved
- sessions: series draft, never published, unpublished changes, review, moved session, publishing, published, provider failure, publish refused
- cohort: draft, source chosen or from scratch, copy options, date preview by weeks or exact gap, copying, copied unpublished, partial copy, refused
Keyboard
- Tab through the draft bar, each set's rule (arrow keys in the rule switch, ←/→ on the delay bar with its field after it) and each lesson's Move up, Move down, set picker and Edit
- Undo is a button; Apply changes is enabled only with changes
- the lesson editor follows the path in the tab order; Escape is not needed (Close is a button)
- Move this session opens a date picker in a popover
Motion
Lessons and sets change place at once; popovers and the dialog on the motion tokens. Nothing moves at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sets (required) | PathSet[] | — | The path as applied: what learners have now. |
completions | Record<string, number> | — | How many learners completed each lesson (by id): shown, and never moved by a reorder. |
setProgress | Record<string, { done: number; total: number; }> | — | Learners finished each set (by id) of how many assigned. |
onApply | ((sets: PathSet[]) => void | Promise<unknown>) | — | Applies the path's draft (order, moves, release rules); resolve once applied (the app passes the new sets), reject with why to keep the draft. |
onSaveLesson | ((setId: string, lesson: PathLesson) => void | Promise<unknown>) | — | Saves one lesson (title, content, due date) alone; reject with why to keep the edits. |
assignments | PathAssignment[] | — | |
assignable | { id: string; name: string; kind: "group" | "person"; }[] | — | Who can be assigned. |
onAssign | ((change: { id: string; assign: boolean; }) => void | Promise<unknown>) | — | Assigns or removes at once (apart from the draft); reject with why. |
timezone (required) | string | — | The course's zone (where dates are written). |
learnerZones | boolean | — | Learners' own zones are known (each sees a dated release in their own time). |
series | SessionSeries | null | — | |
published | PublishedSession[] | null | — | The sessions as last published; null: never published. |
onPublishSessions | ((series: SessionSeries, days: string[]) => Promise<PublishedSession[]>) | — | Publishes the series: resolve with what the meeting provider answered per session; reject with why nothing was published. Invitations go out only here. |
cohortSources | CohortSource[] | — | |
onCopyCohort | ((copy: CohortCopy) => Promise<string[]>) | — | Creates a cohort; resolve with the names of what couldn't be copied (empty: all), reject with why. |
editingLesson | string | null | — | The lesson open in the editor (id). |
defaultEditingLesson | string | null | — | |
onEditingLessonChange | ((id: string | null) => void) | — | |
tab | BuilderTab | — | |
defaultTab | BuilderTab | — | |
onTabChange | ((tab: BuilderTab) => 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
- tabs
- segmented-control
- slider
- number-field
- date-picker
- time-picker
- select
- input
- textarea
- recurrence-editor
- popover
- dialog
- checkbox
- radio-group
- badge
- button
- alert
- empty-state
Dependencies
lucide-react
Import
import { CourseBuilder } from "@beamline/course-builder";Get it
Course builder 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
More in Education
- Program modules: A wellness or coaching program's modules as a practitioner builds them. The modules down the side with where each stands (draft, published at a revision…
- Question builder: Questions built beside their material. A reading passage (imported, with an import pending or failed said with Try again, or pasted) whose words become…
- Grading desk: Grading a quiz or an assignment. The submissions down the side, not graded first, the open one beside its grade. A quiz attempt shows each question's…
- Course dashboard: A course's staff view: its identity (draft or published, who may join, how it runs, its lessons) with Publish through your app, Preview as a learner and…
- Course home: A learner's course, week by week, in the cohort's time zone: each lesson done or not, a project's draft or submission, a reflection answered or not, a…
- Volunteer rota: Several plans side by side for the people who staff them: plans as columns, teams and their positions as rows, each cell the people scheduled with their…
- Gift desk: A gift or tickets taken in person, on a phone at an event or at a desk: the gift entered large in its currency, once or monthly (monthly said as an…
- Gift batches: Gift batches between counting and the books: batches a counting team enters, each with the day the gifts were received (apart from when they were entered…