Text & Heading

When to use

Use Text and Heading for basic lesson copy inside compounds or lessons — paragraphs (Text) and section titles (Heading level 1–3).

These are building blocks inside Slide, Page, Scenario, and other containers rather than standalone lesson types.

Requirements

  • Optional blockId for block-level telemetry URNs.

  • Prefer a single h1 from Course; use Heading level={2} or 3 inside lessons.

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 

<Heading level={2} blockId="section-title">Reporting suspicious mail</Heading>
<Text blockId="section-body">
  Use Report phishing in your mail client. Do not forward the message to colleagues.
</Text>

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

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

Add Text and Heading blocks like this example:

<Heading level={2} blockId="section-title">Reporting suspicious mail</Heading>
<Text blockId="section-body">
  Use Report phishing in your mail client. Do not forward the message to colleagues.
</Text>

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.
- 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

See also