LessonKit documentation

v1.7.4 React-first SCORM · xAPI · cmi5

LessonKit documentation

Build learning experiences that ship to your LMS

LessonKit is a framework for accessible, trackable courses—authored in React, packaged for SCORM and modern learning platforms, with built-in telemetry and xAPI.

Build with React → Build with AI →

Not sure? Start here

Pick the path that matches how you work:

Vibe coding

No React required. Use Cursor, Copilot, or ChatGPT with copy-paste prompts to scaffold a course, edit content, preview locally, and package for your LMS.

Start vibe coding →

Vibe coding with LessonKit

React developers

You know React. Compose Course / Lesson / Quiz, wire telemetry and xAPI, theme with ThemeProvider, and export with the CLI or @lessonkit/lxpack.

Open developer guides →

React developer guides

Coming from H5P?

You can map familiar H5P content types to LessonKit components and rebuild them as native React blocks—LessonKit does not import .h5p files or integrate with H5P Hub. Start with Coming from H5P? and the H5P capability map.

New to React?

LessonKit courses are React apps. If you want to learn React before the developer guides, start with curated free resources (react.dev, TypeScript, Vite), then follow Getting started in 5 minutes or the quickstart. Prefer to skip React? Use vibe coding instead.

Node.js: See the decision table in Prerequisites — 20.19+ for new projects; 18++ packaging-only legacy at your risk.

What you need

See the Node.js decision table for version requirements by task.

Release notes: changelog on this site · GitHub.

Documentation map

Getting started

• Start here
• Prerequisites
• Known limitations
• Design philosophy

Questions?

See the FAQ or troubleshooting hub.

FAQ and troubleshooting

• Frequently asked questions
• Troubleshooting

Examples

• Live examples

Guides — vibe coding

• Vibe coding with LessonKit
  • What “vibe coding” means here
  • Guide outline
  • Golden rules for AI edits
• Getting started (vibe coding)
  • 1. Install Node.js
  • 2. Create a course project
  • 2.5. Install Library Skills (recommended)
  • 3. Open the project in your AI editor
  • 4. Preview locally
  • 5. First prompt to try
  • Optional: install the CLI globally
• Your first course (without reading React)
  • Files you can safely ask the AI to edit
  • Files to leave alone unless the AI explains why
  • Add a second lesson (prompt)
  • Add a quiz (prompt)
  • Checklist before you call it “done”
  • When the AI changes IDs
• Prompting and workflows
  • Starter context block
  • Workflow A — content-only iteration
  • Workflow B — new lesson
  • Workflow C — visual refresh
  • Workflow D — branchy scenario (AI-heavy)
  • Workflow E — hand off to LMS admin
  • Prompts to avoid
  • If the AI suggests wrong packages
  • Escalation
• Shipping to an LMS
  • Requirements
  • Before you package
  • Steps
  • Targets
  • What to send your LMS administrator
  • Prompt for the AI if build fails
  • Prompt for packaging errors
• Troubleshooting (vibe coding)
  • Quick decision tree
  • lessonkit: command not found
  • npm run dev opens but the page is blank
  • Quiz does not mark complete
  • LMS does not record completion after SCORM upload
  • Packaging says layout not supported
  • “Could not find lessonkit.json”
  • AI changed IDs and tracking looks wrong
  • Node version errors during package
  • Still stuck?
• Library Skills for AI agents
  • Included skills
  • Install
  • Requirements
  • Vibe coding + skills
  • LXPack-only courses

Guides — H5P authors

• Coming from H5P?

Ship to LMS

• LMS Go-Live

Guides — React developers

• React developer guides
  • New to React?
  • What LessonKit gives you
  • Guide outline
  • Identity requirements (0.5+)
  • Other audience
• Getting started in 5 minutes
  • You are here — golden path
  • 1. Create a project
  • 2. Preview locally
  • 3. Change one quiz
  • 4. Production build (optional smoke test)
  • Next steps
• Quickstart (React)
  • CLI scaffold
  • Add to an existing Vite + React app
  • Keep React IDs in sync with lessonkit.json
• Block cookbook
  • TrueFalse
  • Quiz
  • FillInTheBlanks
  • DragTheWords
  • DragAndDrop
  • MarkTheWords
  • SortParagraphs
  • GuessTheAnswer
  • MultimediaChoice
  • SingleChoiceSet
  • AssessmentSequence
  • Scoring semantics
  • InteractiveBook + Page
  • SlideDeck
  • BranchingScenario
• Project structure
  • CLI-generated project
  • Monorepo layout
  • When to use which package
• Components and hooks
  • Components
  • Common optional props
  • Storybook
  • Hooks
  • Lesson lifecycle
  • Custom interactions
  • Provider-only usage
• Telemetry and xAPI
  • Telemetry (@lessonkit/core)
  • xAPI (@lessonkit/xapi)
  • LXPack bridge (packaged courses)
  • Production
  • Identity and URNs
• Theming and accessibility
  • Theming
  • Accessibility built into components
  • @lessonkit/accessibility utilities
  • Pre-ship accessibility checklist (course authors)
• Touch and mobile (web)
  • Author setup
  • Coarse-pointer behavior
  • Drag assessment blocks
  • Touch design tokens
  • LMS testing checklist
  • Related
• Packaging and CLI
  • CLI workflow
  • React / manifest ID parity
  • Programmatic packaging
  • lessonkit.json vs interchange file
  • Layout
  • Production
• Deployment guide
  • Deployment targets
  • Runtime configuration matrix
  • Pre-flight checklist
  • Backend proxy pattern
  • Standalone hosting
  • SCORM upload checklist (LMS admin)
  • CI/CD
  • Related docs
• LRS and telemetry operations
  • Architecture
  • Backend proxy pattern
  • Statement lifecycle
  • Observability hooks matrix
  • LRS outage runbook (24h+)
  • cmi5 and AU launch
  • Security checklist
  • Related
• Multi-course patterns
  • One repo per course (recommended default)
  • Monorepo of courses
  • Shared themes
  • Activity IRI strategy
  • Shared components
  • CI matrix example (GitHub Actions)
  • When not to share
  • Related
• Performance
  • Package imports
  • Analyze bundle size
  • Lazy loading
  • Compound state I/O
  • Telemetry batching
  • xAPI queue
  • Media
  • Related
• Plugin cookbook — console analytics
  • 1. Define the plugin
  • 2. Register on the course
  • 3. Wrap the tracking sink (optional)
  • 4. Filter telemetry
  • 5. Custom scoring with scoreAssessment
  • Related
• Contributing to the monorepo
  • Setup
  • Common scripts
  • TypeScript conventions
  • Package build order
  • Full CI-equivalent checks
  • TypeDoc API docs
  • Docs site (this site)
  • Releases
  • Roadmap
  • E2E and conformance
• Adding a framework block
  • Implementation order
  • Internal naming reference
  • Related
• Plugin marketplace research (1.7.x)
  • Current plugin model (0.8.0+)
  • 1.6.x preset packs
  • Future marketplace (2.x candidates)
  • Non-goals for 1.7.x

Reference

• Glossary
• lessonkit.json manifest reference (1.7.x)
• Portable interchange (.lkcourse) (1.7.x)
• API reference
• LessonKit CLI (1.7.x)
• CLI and packaging error catalog
• @lessonkit/core reference (1.7.x)
• Packaging with LXPack (1.7.x)
• LMS compatibility
• Identity model (1.7.x)
• Telemetry & xAPI (1.7.x)
• xAPI reference (@lessonkit/xapi)
• Theming (1.0+)
• Accessibility (framework 1.x)
• Runtime block catalog (v3 default)
• Generated block prop reference (catalog v3)
• Component pages
• Component gallery (Storybook)
• LessonKit plugin architecture (v1)
• LXPack bridge reference (1.0)
• LXPack interoperability

Evaluators

• Enterprise evaluation
• Architecture overview
• Export parity (React / Vite vs LMS)
• Security
• Security Policy
• Accessibility conformance (interim statement)

Project and releases

• Upgrading LessonKit
• Release history
• Changelog
• Changelog
• Good first contributions
• Roadmap
• LessonKit Roadmap
• H5P → LessonKit capability map
• Test suite verification report (1.7.4)