BranchNode

H5P equivalent

H5P Branching Scenario (node)

Parent compound

BranchNode only works inside BranchingScenario. The parent hides inactive nodes and shows path progress via the built-in path indicator and status line.

When to use

Use BranchNode only inside BranchingScenario. Each node is a step in the graph: narrative content, optional BranchChoice children, and an optional terminal flag for end states.

Terminal nodes are styled distinctly and trigger the parent’s completion banner.

Requirements

  • nodeId must be unique within the scenario.

  • startNodeId on the parent must match an existing node.

  • Terminal nodes often hold assessments or completion copy.

Try it

Documentation demo

Use the Live demo, React, AI prompt, and Packaging / Manifest tabs below. Embedded demos disable telemetry, xAPI, and the LMS bridge. For production delivery, use the CLI template src/courseConfig.ts and LMS Go-Live.

Open demo in full tab 

<BranchingScenario blockId="card-dispute" title="Card dispute call" startNodeId="start" showPathScore>
  <BranchNode nodeId="start" title="Opening">
    <Text>Caller reports a duplicate charge after a shipping notification link.</Text>
    <BranchChoice label="Listen and verify identity" targetNodeId="verify" />
  </BranchNode>
  <BranchNode nodeId="verify" title="Verify" terminal>
    <Text>Identity confirmed and fraud ticket opened.</Text>
  </BranchNode>
</BranchingScenario>

Copy into Cursor, Copilot, or ChatGPT after the vibe coding starter context:

Read lessonkit.json and src/App.tsx before editing.

Add a BranchNode block (H5P-style: Branching Scenario (node)) like this example inside the active <Lesson>:

<BranchingScenario blockId="card-dispute" title="Card dispute call" startNodeId="start" showPathScore>
  <BranchNode nodeId="start" title="Opening">
    <Text>Caller reports a duplicate charge after a shipping notification link.</Text>
    <BranchChoice label="Listen and verify identity" targetNodeId="verify" />
  </BranchNode>
  <BranchNode nodeId="verify" title="Verify" terminal>
    <Text>Identity confirmed and fraud ticket opened.</Text>
  </BranchNode>
</BranchingScenario>

Requirements:
- Import only from @lessonkit/react; use block types from block-catalog.v3.json.
- Keep existing courseId, lessonId, and navigation stable unless I ask to add a lesson.
- Mount only inside the documented parent compound (see component page When to use).
Packaging notes:
`BranchNode` is a child of [`BranchingScenario`](branching-scenario.md) — configure the graph in React, not `lessonkit.json`.
- Unique **`nodeId`** per node; **`startNodeId`** on the parent must match one node.
- Mark ending nodes with **`terminal`** when the path should stop.

- After edits, list changed files and what to verify in the browser (lessonkit dev).

Workflow tips: https://lessonkit.readthedocs.io/en/latest/guides/vibe-coding/prompting-and-workflows.html

BranchNode is a child of BranchingScenario — configure the graph in React, not lessonkit.json.

  • Unique nodeId per node; startNodeId on the parent must match one node.

  • Mark ending nodes with terminal when the path should stop.

See also