Contents Menu Expand Light mode Dark mode Auto light/dark, in light mode Auto light/dark, in dark mode Skip to content
LessonKit
Light Logo Dark Logo

Getting started

  • Start here
  • Prerequisites
  • Known limitations
  • Design philosophy

FAQ and troubleshooting

  • Frequently asked questions
  • Troubleshooting
    • Troubleshooting (React developers)
    • Troubleshooting (vibe coding)

Examples

  • Live examples

Guides — vibe coding

  • Vibe coding with LessonKit
  • Getting started (vibe coding)
  • Your first course (without reading React)
  • Prompting and workflows
  • Shipping to an LMS
  • Troubleshooting (vibe coding)
  • Library Skills for AI agents

Guides — H5P authors

  • Coming from H5P?

Ship to LMS

  • LMS Go-Live

Ship to LMS — appendices

  • Production checklist
  • First LMS export
  • Ship to LMS checklist
  • Backend proxy cookbook

Guides — React developers

  • React developer guides
  • Getting started in 5 minutes
  • Quickstart (React)
  • Block cookbook
  • Project structure
  • Components and hooks
  • Telemetry and xAPI
  • Theming and accessibility
  • Touch and mobile (web)
  • Packaging and CLI
  • Deployment guide
  • LRS and telemetry operations
  • Multi-course patterns
  • Performance
  • Plugin cookbook — console analytics
  • Contributing to the monorepo
  • Adding a framework block
  • Plugin marketplace research (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
    • Accordion
    • AdventCalendar
    • ArithmeticQuiz
    • AssessmentSequence
    • AudioRecorder
    • BranchChoice
    • BranchNode
    • BranchingScenario
    • Chart
    • Collage
    • CombinationLock
    • Course structure
    • Crossword
    • DialogCards
    • DragAndDrop
    • DragTheWords
    • Embed
    • Essay
    • FillInTheBlanks
    • FindHotspot
    • FindMultipleHotspots
    • Flashcards
    • GameMap
    • GuessTheAnswer
    • Image
    • ImageHotspots
    • ImageJuxtaposition
    • ImagePairing
    • ImageSequence
    • ImageSequencing
    • ImageSlider
    • InformationWall
    • InteractiveBook
    • InteractiveVideo
    • KnowledgeCheck
    • MapExit
    • MapStage
    • MarkTheWords
    • MemoryGame
    • MultimediaChoice
    • Page
    • ParallaxSlideshow
    • QrContent
    • Questionnaire
    • Quiz
    • Reflection
    • Scenario
    • SingleChoiceSet
    • Slide
    • SlideDeck
    • SortParagraphs
    • Summary
    • Table
    • Text & Heading
    • TimedCue
    • Timeline
    • TrueFalse
    • Video
    • WordSearch
  • 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
    • Migrating from LessonKit 1.6.x to 1.7.0
    • Migrating from LessonKit 1.x to 2.0
    • Migrating off runtime v1
    • Migrating from LessonKit 1.5.x to 1.6.0
    • Migrating from LessonKit 1.4.x to 1.5.0
    • Migrating from LessonKit 1.3.x to 1.4.0
    • Migrating from LessonKit 1.2.x to 1.3.0
    • Migrating from LessonKit 1.1.x to 1.2.0
    • Migrating from LessonKit 1.0.x to 1.1.0
    • Migrating from LessonKit 0.9.x to 1.0
  • Release history
  • Changelog
  • Changelog
  • Good first contributions
  • Roadmap
  • LessonKit Roadmap
  • H5P → LessonKit capability map
Back to top
View this page
Edit this page

Component gallery (Storybook)¶

Interactive visual reference for @lessonkit/react components—states, keyboard behavior, and compound layouts.

Published gallery: GitHub Pages

When to use Storybook vs other docs¶

Need

Use

Live component + when to use it (Read the Docs)

Component pages

Visual states and keyboard behavior

Storybook (this page)

Props contract and manifest mapping

Block catalog

Copy-paste React + JSON pairs

Block cookbook

Hook and provider APIs

Components & hooks · API reference

Run locally (monorepo contributors)¶

From the repo root:

npm run build:packages
npm run storybook           # http://localhost:6006
npm run build-storybook     # static export → packages/react/storybook-static/

Story files live under packages/react/stories/. CI builds Storybook on every PR.

Coverage¶

Storybook demonstrates core structure (Course, Lesson, Quiz), P0 assessments (TrueFalse), and compound blocks (InteractiveBook, SlideDeck, InteractiveVideo, BranchingScenario, Embed, Chart, and others). The full block catalog lists all shipped types—Storybook coverage is expanding. See Block catalog for the complete list.

Next
LessonKit plugin architecture (v1)
Previous
WordSearch
Copyright © 2026, LessonKit contributors
Made with Sphinx and @pradyunsg's Furo
◆ GitHub npm
On this page
  • Component gallery (Storybook)
    • When to use Storybook vs other docs
    • Run locally (monorepo contributors)
    • Coverage