H5PFrame

learning · interactive (ships a small web component) · no children. All components: component playground.

Description for the model

Interactive H5P content from the H5P service, framed. Reports completion to progress.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "H5PFrame",
  "props": {
    "apiUrl": "https://coffee.localhost",
    "contentId": 12,
    "title": "Match the brew method to its grind",
    "topicId": 4,
    "courseId": 1
  }
}

Props

Prop	Type	Required	Notes
apiUrl	string (href)	yes	Tenant API origin (the H5P service is under /h5p). max length 2048
contentId	integer	yes	H5P content id. ≥ 0
title	string	yes	Title. max length 160
topicId	integer		Topic id for progress. ≥ 0
courseId	integer		Course id for progress. ≥ 0
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Interactive: Match the brew method to its grind

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "contentId": "twelve"
}

Issues:

• /apiUrl is required
• /title is required
• /contentId expected integer, got string

Rendered as:

Interactive:

Accessibility

axe-core: 7 rules passed, 0 violations, 1 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.