H5P Guides

How to separate your code into libraries

This guide tries to answer the question - "When should I separate a piece of my code into libraries?"

Whenever you create something that you are sure will be needed by multiple content types you should consider if you may create these features in one of two ways:

  1. A new H5P library that may be used by multiple content types
  2. An NPM package that may be used by multiple content types

If what you create is more than a few lines of code and you are sure we need the same thing in many content types, you should do one of the above. Should you choose to create it and share it as a node package or an H5P library?

H5P Library


  • Doesn't require node and a build chain to work. It just works.
  • Makes sure that the code isn't loaded multiple times if multiple libraries within the same window need it.
  • If you have CSS in your code it works well with an H5P library.


  • Extra dependencies between H5P libraries makes releasing updates and testing a lot more demanding. (We're working on improving this)


  • If the code is big and or used by most content types, create it as an H5P library.
  • If there is CSS in your code, create it as an H5P library
  • If you don't want to use node, create an H5P library

Node Package


  • It is a build time dependency instead of a runtime dependency which simplifies the H5P dependency tree and makes releasing updates much easier. H5P dependencies often force us to test and release more than we really need to. One content type will drag along many others.
  • You may use multiple versions of the same code within one window


  • Requires you to have extra software and build your H5P content types using node and web-pack.
  • If multiple content types within one window uses the same node package you'll be loading the same code multiple times within that window.
  • If the code has CSS and you use multiple versions of the code the CSS rules might override each other in unpredictable ways


  • Use for small pieces of software where there are very little(a few lines that never will change) or no CSS.


Remember to document your library / package well. It should be easy for other developers to know how they may use your library. Typically in the readme file of the library. The Show When library is a good example.