Component pages

Each page renders the real @lessonkit/react component in an embedded demo, explains when to use it, and shows copy-paste examples you can adapt into a course.

Coverage: 59 component pages — one for every block type in block-catalog.v3.json, including graph children (BranchNode, BranchChoice, MapStage, MapExit) and the KnowledgeCheck alias of Quiz. Multi-block guides: Course structure, Text & Heading.

Try it tabs: Live demo, React example, copy-paste AI prompt (for vibe coding), and Manifest / Packaging notes — synced from page-copy.json and manifest-snippets.json.

Related references

Need	Page
Full prop contracts and nesting rules	Block catalog
Copy-paste snippets only (no live demo)	Block cookbook
Visual states in isolation	Storybook gallery
Full courses	Live examples

Local preview

From the repo root: bash docs/scripts/build-component-demos.sh, then open docs/_static/component-demos/index.html#/true-false in a browser. Run npm -w lessonkit-docs-component-demos run dev for a fast edit loop.

Component picker

Component	Category	H5P-style name
Accordion	Content	Accordion
AdventCalendar	Content	Advent Calendar
ArithmeticQuiz	Assessment	Arithmetic Quiz
AssessmentSequence	Compound	Question Set
AudioRecorder	Content	Audio Recorder
BranchChoice	Compound child	Branching Scenario (choice)
BranchingScenario	Compound	Branching Scenario
BranchNode	Compound child	Branching Scenario (node)
Chart	Content	Chart
Collage	Content	Collage
CombinationLock	Assessment	Combination Lock
Course structure	Container	—
Crossword	Assessment	Crossword
DialogCards	Content	Dialog Cards
DragAndDrop	Assessment	Drag and Drop
DragTheWords	Assessment	Drag the Words
Embed	Content	Iframe Embedder
Essay	Assessment	Essay
FillInTheBlanks	Assessment	Fill in the Blanks
FindHotspot	Assessment	Find the Hotspot
FindMultipleHotspots	Assessment	Find Multiple Hotspots
Flashcards	Content	Flashcards
GameMap	Compound	Game Map
GuessTheAnswer	Assessment	Guess the Answer
Image	Content	Image
ImageHotspots	Content	Image Hotspots
ImageJuxtaposition	Content	Image Juxtaposition
ImagePairing	Assessment	Image Pairing
ImageSequence	Content	Image Sequencing (frames)
ImageSequencing	Assessment	Image Sequencing
ImageSlider	Content	Image Slider
InformationWall	Content	Information Wall
InteractiveBook	Compound	Interactive Book
InteractiveVideo	Compound	Interactive Video
KnowledgeCheck	Assessment	Multiple Choice
MapExit	Compound child	Game Map (exit)
MapStage	Compound child	Game Map (stage)
MarkTheWords	Assessment	Mark the Words
MemoryGame	Content	Memory Game
MultimediaChoice	Assessment	Multimedia Choice
Page	Compound child	Interactive Book (page)
ParallaxSlideshow	Content	Parallax
QrContent	Content	KewAr Code
Questionnaire	Content	Questionnaire
Quiz	Assessment	Multiple Choice
Reflection	Content	—
Scenario	Content	—
SingleChoiceSet	Compound	Single Choice Set
Slide	Compound child	Course Presentation (slide)
SlideDeck	Compound	Course Presentation
SortParagraphs	Assessment	Sort the Paragraphs
Summary	Assessment	Summary
Table	Content	Table
Text & Heading	Content	—
TimedCue (inside InteractiveVideo)	Compound child	Interactive Video (cue)
Timeline	Content	Timeline
TrueFalse	Assessment	True/False
Video	Content	Self-hosted video
WordSearch	Assessment	Find the words

Adding a component page (contributors)

1. Add a focused demo to docs/component-demos/src/registry.tsx (or src/demos/batch*.tsx) and an entry in docs/component-demos/manifest.json with blockType set to the catalog id.

2. Add copy to docs/component-demos/page-copy.json, then run node docs/scripts/scaffold-component-pages.mjs (or edit docs/reference/components/<slug>.md by hand).

3. Add packaging copy to docs/component-demos/manifest-snippets.json — assessment JSON for scored blocks, note-only entries for compound containers (blockId, resume).

4. Run node docs/scripts/generate-component-ai-prompts.mjs (optional review) and node docs/scripts/sync-component-try-it-tabs.mjs to refresh Try it tabs (Live demo | React | AI prompt | Manifest/Packaging).

5. Run node docs/scripts/generate-component-pages-index.mjs, node docs/scripts/sync-component-toctree.mjs, node docs/scripts/generate-block-props-doc.mjs, and node docs/scripts/generate-h5p-component-page-index.mjs.

6. Verify: bash docs/scripts/build-component-demos.sh && bash docs/scripts/verify-component-demos.sh.

Demos may compose supporting blocks (for example TrueFalse inside SlideDeck) when that makes the primary component easier to understand.