H5P Guides

Content Type Development

H5P has a modular architecture and the building blocks of H5P are called libraries. A library may be a content type, an application or an api for other libraries. Typically a content type consists of multiple H5P libraries with dependencies between each other.

Most of the libraries used on H5P.org are shared on GitHub. If you want to contribute to a library, coordinate with the maintainers and create pull requests. If you want to create your own content type, make sure to share it on H5P.org.

H5P has very few requirements that needs to be fulfilled by H5P libraries. The following example illustrates all that is needed to create a H5P library.

Hello world

A "Hello world" H5P library typically would need the following js. For a more in depth tutorial see our Hello world tutorial.

H5P.MyLib = (function ($) {

  /**
   * @class H5P.MyLib
   * @param {Object} params
   */
  function MyLib(params) {
    var $wrapper;

    this.attach = function ($container) {
      if ($wrapper === undefined) {
        $wrapper = $('<div/>', {
          html: 'Hello ' + params.name
        });
      }

      $container.html('').addClass('h5p-mylib').append($wrapper);
    };
  }

  return MyLib;
})(H5P.jQuery);

semantics.json

The following semantics.json is needed to describe its datastructure allowing the content to be edited and validated:

[
  {
    "name": "name",
    "type": "text",
    "label": "What is your name?"
  }
]

library.json

And the following library data telling H5P what the name of the library is, which files it needs to preload etc.

{
  "title": "My Lib",
  "machineName": "MyLib",
  "majorVersion": 1,
  "minorVersion": 0,
  "patchVersion": 0,
  "runnable": 1,
  "preloadedJs": [
    {"path": "mylib.js"}
  ]
}

 With these tree files placed in an "H5P.MyLib" folder in Drupal's H5P development folder you should be able to create "MyLib" content. 

In the following pages you'll learn everything you need to know to develop new H5P content types and customize existing ones: