H5P

Submitted by teacherdagger on Thu, 07/24/2025 - 16:58
Forums: 
Installation and server related problems

I’m building a front‑end‑only React learning app (no Node.js) and using Supabase for auth, database, and real‑time updates. I’d love your advice on interactive content:

What I’m using

  • React (Create React App)

  • Supabase for user management and storing results

  • Lumi React Player for video‑based quizzes

  • Considering H5P Player or other open‑source frameworks (Adapt, PlayCanvas, etc.)

My questions

 

 

 

  1. Node‑free setup
    • Is it possible to bundle and run Lumi or H5P entirely in the browser (via CDN or ESM import), without any Node.js server?
    • What strategies (lazy loading, dynamic imports) have you used to keep it purely front end?

  2. Score capture
    • Do Lumi or H5P expose client‑side events or callbacks for quiz completion and detailed scoring?
    • How would you push those scores directly into Supabase from the browser?

  3. Alternatives
    • Have you used any other lightweight, front‑end‑only interactive players that report scores?
    • Which libraries or patterns worked best for you in a Node‑free environment?

    Slack https://lumi-education.slack.com/team/U096V5UHHAA

otacke's picture

otacke

Sat, 07/26/2025 - 17:18

Hi!

  1. Node‑free setup
    H5P is not meant to run client-side only. Content information will need to be provided from a server somehow - be that node.js, PHP or whatever. While it would be possible to provide the required client-side libraries via a CDN, I am not aware of anyone having prepared them for hosting or hosting those. But you're welcome to fill that gap. Additionally, in theory it would be possible to replace server-side parts of H5P with client side libraries to e.g. extract H5P files in order to display them. Not sure how what the use case would be, however.
  2. Score capture
    H5P uses the xAPI standard to convey information about scores and many other things. Please find that piece of information here on h5p.org. Catch the xAPI statements, evaluate them and write them wherever you want to. There's nothing special about this.
  3. Alternatives
    As mentioned in 1, H5P does not consist of client-side parts only and the server-side parts would need to be replaced. Please see https://snordian.de/2023/04/22/what-was-that-thing-again-an-h5p-architecture-overview/ for more information.

Best,
Oliver