Live examples¶
These pages embed production builds of the monorepo examples, compiled when the documentation site is built (CI and Read the Docs). Each course uses the same modern LMS layout (sidebar curriculum, progress ring, lesson cards) with a different color theme and scenario content.
Demo telemetry — not for production
Embedded demos and monorepo examples log telemetry/xAPI to the browser console for illustration (examples/_shared/docsDemoConfig.ts). Do not copy that pattern for production.
For LMS go-live, use the CLI template src/courseConfig.ts from npx @lessonkit/cli init and complete the production checklist (proxy URLs, observability hooks, lxpack.bridge allowlist).
Local preview
From the repo root, run bash docs/scripts/build-docs-demos.sh before make html in docs/ so the bundles exist under _static/demos/.
Example picker¶
Example |
Embedded on RTD |
npm workspace |
Framework |
Start here when |
|---|---|---|---|---|
Yes |
|
1.x UX |
First full course / monorepo smoke |
|
Yes |
|
1.1 blocks |
P0 assessments catalog |
|
Yes |
|
1.2 + 1.6.x |
Content + compound + Tier C/D + content-wave lesson |
|
Yes |
|
1.x |
Compliance-themed course |
|
Yes |
|
1.5 branching |
Support + branching scenario |
|
Yes |
|
Packaging |
SCORM/xAPI export reference |
|
Yes |
|
1.2 |
|
|
Yes |
|
1.3 |
|
|
Yes |
|
1.7 |
P0 + 1.7 assessment blocks |
|
interactive-video |
No (GitHub) |
|
1.4 |
|
branching-scenario |
No (GitHub) |
|
1.5 |
|
External starter: npx @lessonkit/cli init — not in this table; use for new projects outside the monorepo.
Run locally (after npm run build:packages): npm -w <workspace> run dev. Full table: examples/README on GitHub.
Cybersecurity awareness (examples/react-vite)¶
Corporate InfoSec annual module in the security theme: policy attestation, email header triage, smishing simulation, Teams social engineering, and attestation.
Data privacy essentials (examples/data-privacy)¶
GDPR compliance track (compliance theme): lawful-basis lab, audit case files, role-based minimization, and incident tabletop.
Customer de-escalation (examples/customer-service)¶
Contact-center training in the support theme: channel briefing, chat bubbles, voice pacing, and branching resolution paths.
Workplace safety briefing (examples/lxpack-golden)¶
Warehouse new-hire briefing in the compact field theme: PPE sign-off, photo hazard walk, quiz, and practice near-miss form (LXPack smoke test).
Framework 1.1 showcase (examples/framework-11-showcase)¶
Recommended starting point for 1.1. Incident Response course covering 1.0 foundation blocks (Scenario, Quiz, Reflection, …) and every 1.1 P0 assessment (TrueFalse through AssessmentSequence). Uses block catalog v2.
Framework 1.2 showcase (examples/framework-12-showcase)¶
Recommended starting point for 1.2. A four-lesson Atlas Analytics course that demonstrates every new block: content (Text, Heading, Image), compound containers (Page, InteractiveBook, AssessmentSequence), Tier C/D presentation, and P0 assessments including FindHotspot / FindMultipleHotspots.
Interactive book (examples/interactive-book)¶
Compound Page and InteractiveBook patterns (framework 1.2): multi-page handbook with accordion content and an in-book TrueFalse check.
Slide deck (examples/slide-deck)¶
Recommended starting point for 1.3. Compound Slide and SlideDeck (H5P Course Presentation): keyboard navigation, deck scoring, and session resume.
Assessment showcase (examples/assessments-p0)¶
P0 assessment sample inside AssessmentSequence: TrueFalse, fill-in-blanks, mark-the-words, drag-the-words, drag-and-drop, plus 1.7.0 blocks (SortParagraphs, GuessTheAnswer, MultimediaChoice) and a standalone SingleChoiceSet with Quiz multi-select variants.
Run examples locally¶
Requires a clone of the monorepo and npm run build:packages first (examples use file:../../packages/*).
npm install
npm run build:packages
npm -w lessonkit-example-react-vite run dev
npm -w lessonkit-example-data-privacy run dev
npm -w lessonkit-example-customer-service run dev
npm -w lessonkit-example-lxpack-golden run dev
npm -w lessonkit-example-framework-11-showcase run dev
npm -w lessonkit-example-framework-12-showcase run dev
npm -w lessonkit-example-interactive-book run dev
npm -w lessonkit-example-slide-deck run dev
npm -w lessonkit-example-assessments-p0 run dev
Packaging walkthrough: Packaging and CLI. Full index: examples/README.