TypeScript types and JSON schemas

serettig's picture

As developing for H5P can be a bit daunting for newcomers, I've started creating TypeScript type definitions for the H5P core and JSON schemas that cover semantics.json and library.json. If you add them to your IDE or build process, you get (partial) code completion. The docs and files can be found here: https://github.com/sr258/h5p-types

This is an ongoing project and it's not finished yet, but maybe it's already helpful for some people.


I am trying to create an H5P content/editor using typescript. I tried your instruction to get code completion and it kind of works, but seems to break building the package. I tried it with your Advanced Blanks example also written in typescript. Could you maybe elaborate how you setup your development environment to get code completion and other things to work in your IDE while you were developing yor Advaned Blanks module? Or do you have any links to get startet using typescript for H5P development? I know it's still a WIP but I would appreciate any help.



serettig's picture

Can you paste the error message that you get when you build with it? The advanced blanks doesn't use the typings yet. Check out https://github.com/sr258/h5p-multiuser-quiz and https://github.com/sr258/h5p-sharedb-test as sample projects. The latter is also rather small and might be a good template for your project. There's no TS guide for content type development I think.

I attached the error. It only happens whenever I change my tsconfig as described in the repository readme. I tried the other two repos you mentioned and they seem to work, thanks. I especially want to develop an H5P Editor widget instead of a simple content type. Are those examples suitable as a template? Or are there any more?


serettig's picture

I'd guess it has to do with the tsconfig file or the TypeScript version. Something in there isn't compatible with the typings.

The projects don't use custom editor widgets, so you can't copy actual code. The build chain should still work fine, though. If all you need is a TypeScript setup, you can certainly use the projects as a starting point.

Hello sir,

Good Afternoon,

Can you help with this:- How to enable JavaScript API for YouTube Player.

Hi Team,

I am looking to integrate H5P player with my angular project. Please share document or link if any available. Also please share Angular library name that supports H5P player.

serettig's picture


You can try tunapanda's h5p-standalone library or the h5p nodejs port.



It would have make more sense if you created a new thread for your question as it's not related to my original post.