H5P Guides

Library 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.

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.

mylib.js

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: