LessonKit documentation

v1.2.0 React-first SCORM · xAPI · cmi5

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.

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

LessonKit Studio

Visual authoring (Alpha). Drag-and-drop blocks, live preview, export to React/Vite—try the live app in the docs.

Status: Studio is Alpha (npm 0.3.2, pins framework 1.2.0 when published with studio-v0.3.2). Framework 1.2 blocks may ship before Studio palette parity on older Studio lines.

Open Studio →

LessonKit Studio

Coming from H5P?

You can map familiar H5P content types to LessonKit components and Studio blocks. Quiz is H5P Multiple Choice; more types are on the roadmap with the same names where possible. 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: 18+ for dev, build, and lessonkit package (LMS export).

What you need

Task	Node.js
Create a course, run lessonkit dev, build	18+
Package for LMS (lessonkit package)	18+

Release notes: changelog on this site · GitHub.

Documentation map

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
  • 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
  • Steps
  • Targets
  • What to send your LMS administrator
  • Prompt for the AI if build fails
  • Prompt for packaging errors
• Troubleshooting (vibe coding)
  • lessonkit: command not found
  • npm run dev opens but the page is blank
  • Quiz does not mark complete
  • 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?
• H5P / block catalog crosswalk (LessonKit framework vs Studio)

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
  • 1. Create a project
  • 2. Preview locally
  • 3. Change one quiz
  • 4. Production build
  • 5. Package for your LMS {#package-for-your-lms}
  • Next steps
• Quickstart (React)
  • CLI scaffold
  • Add to an existing Vite + React app
  • Keep React IDs in sync with lessonkit.json
  • Monorepo example
  • Next steps
• Project structure
  • CLI-generated project
  • Monorepo layout
  • When to use which package
• Components and hooks
  • Components
  • 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
• Production checklist
  • Packaging target
  • xAPI and analytics
  • Session and resume
  • Authoring guardrails
  • Observability (recommended)
  • CI / build
  • Related docs
• Theming and accessibility
  • Theming
  • Accessibility built into components
  • @lessonkit/accessibility utilities
• Packaging and CLI
  • CLI workflow
  • Programmatic packaging
  • lessonkit.json vs interchange file
  • Layout
• Export parity (React / Vite vs LMS)
  • Surfaces
  • Conformance matrix
  • What is guaranteed (1.0.0)
  • What is not guaranteed yet
  • SCORM 1.2 artifact layout
  • Run locally
  • CI job map
  • Related
• Plugin cookbook — console analytics
  • 1. Define the plugin
  • 2. Register on the course
  • 3. Wrap the tracking sink (optional)
  • 4. Filter telemetry
  • 5. Assessment plugins
  • Related
• Contributing to the monorepo
  • Setup
  • Common scripts
  • TypeScript conventions
  • Package build order
  • Docs site (this site)
  • Releases
  • Roadmap
  • E2E and conformance

LessonKit Studio

• LessonKit Studio
  • Try it now
  • Studio packages (npm)
  • Guide outline
  • Run locally
  • Related paths
  • Not in Studio yet
• Studio live app
  • What you can do here
  • Next steps
• Studio project format (v1)
  • On-disk layout
  • Authoring document
  • Block types
  • TypeScript API
  • React renderer
  • Example
  • Related docs
• Studio visual editor (0.3.2)
  • Run locally
  • Live demo (docs site)
  • Persistence (0.2)
  • Keyboard shortcuts
  • Editing model
  • Embed in your app
• Exporting from Studio (0.3.2)
  • Export modes
  • Browser (studio-web)
  • Node API
  • Packaging matrix
  • Validation
  • Examples and tests

Reference

• Glossary
• API reference
• CLI reference
• LessonKit CLI (1.0+)
• Core reference
• @lessonkit/core reference (1.0)
• Packaging reference
• Packaging with LXPack (1.0+)
• Identity reference
• Identity model (v1)
• Telemetry reference
• Telemetry & xAPI (v1)
• xAPI reference (@lessonkit/xapi)
• Theming reference
• Theming (1.0+)
• Accessibility reference
• Accessibility (0.3.x)
• Block catalog reference
• Runtime block catalog (v1)
• Plugins reference
• LessonKit plugin architecture (v1)
• LXPack bridge reference
• LXPack bridge reference (1.0)
• LXPack interoperability

Project

• Changelog
• Changelog
• Good first contributions
• Security
• Security Policy
• Roadmap
• LessonKit Roadmap
• H5P → LessonKit capability map
• Studio readiness
• Framework readiness for LessonKit Studio (and AI/dev workflows)
• LessonKit Studio specification
• LessonKit Studio — Technical Specification
• Overview
• Architecture
• Core Concepts
• Editor System
• State Management
• Undo/Redo
• GitHub Integration
• Rendering System
• Code Generation
• AI Integration
• Accessibility Requirements
• Theming
• Autosave
• Schema Versioning
• Desktop Support
• Hosting Model
• Suggested Packages
• Performance Goals
• Future Extensions
• LessonKit Studio plan
• LessonKit Studio — Plan Document
• Core Product Goals
• Product Positioning
• Target Users
• Core Architecture
• MVP Scope
• Non-MVP / Future Scope
• Suggested Ecosystem Layout
• Technology Recommendations
• Strategic Advantages
• Long-Term Vision
• Migrating from LessonKit 0.9.x to 1.0
• Migrating from LessonKit 1.0.x to 1.1.0
• Migrating from LessonKit 1.1.x to 1.2.0