Lesson types¶

Clipboard icons

Commands and prompts on this page use fenced blocks with a copy button (top-right). Click to copy the full text for Terminal, Claude, or Cursor.

Each entry in course.yaml lessons: has a type field.

markdown¶

Text content from lessons/*.md.

  - id: intro
    title: Introduction
    type: markdown
    file: lessons/intro.md

Authoring: Writing lessons.

html¶

Embedded web activity from interactions/<folder>/index.html.

  - id: lab
    title: Hands-on lab
    type: html
    path: interactions/lab

Authoring: Building interactions.

component¶

Built-in widget from @lxpack/components — no custom HTML required.

  - id: tip
    title: Important
    type: component
    component: callout
    props:
      variant: warning
      body: Complete the lab before continuing.

Widgets: Components.

spa¶

Built web app folder (e.g. Vite output) with an index.html entrypoint. The lesson runs in an iframe; report progress via window.parent.lxpackBridge.v1.

  - id: phishing_101
    title: Phishing Awareness
    type: spa
    path: dist/lessons/phishing-101

Authoring: LessonKit interoperability.

Choosing a type¶

Need	Type
Reading, policy, explanation	`markdown`
Clicks, simulation, custom UI	`html`
React / Vite / built app lesson	`spa`
Callout, checklist, image card	`component`