Image

H5P equivalent

H5P Image

When to use

Use Image for illustrations, diagrams, or photos with required alt text. Prefer relative or HTTPS URLs allowed by your media policy.

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 

<Text blockId="caption">Labeled floor plans help learners locate exits and restricted zones.</Text>
<Image blockId="floor-image" src="/floor-plan.svg" alt="Office floor plan with exits marked" />

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

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

Add a Image block (H5P-style: Image) like this example inside the active <Lesson>:

<Text blockId="caption">Labeled floor plans help learners locate exits and restricted zones.</Text>
<Image blockId="floor-image" src="/floor-plan.svg" alt="Office floor plan with exits marked" />

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