H5P Guides

Developer guide

Hi developer - please tell us why you are here

I want to create a new H5P content type

1

You need basic knowledge of HTML, JavaScript and CSS

H5P runs in your browser, therefore all standard web technologies are relevant. This guide will not cover these topics, since the web is full of them already! If you have a specific question, try our forum.
2

You need to know the H5P specification

You need to know what makes H5P an H5P either by going through our Hello world tutorial, or digging into the library development guides.
3

You should adhere to our guidelines

You should know how to use jQuery in an H5P and what your code should look like. It is also great if you think responsive!

Change an existing H5P content type

 

Visual changes

Doing visual changes to an H5P consists of creating CSS-rules that overrides the default CSS found in the library. We have created a separate guide for this topic.

 

Functional changes

Functional changes means the logic inside JavaScript files has to be changed. First of all it is a good idea to contact the author of the library, to check if the needed funtionality already is planned. If not, it is possible to use Fork & pull at github to get your changes into the original library

It is important to notice that any changes done locally on a library's source files, will be overwritten if the library is updated.

How to implement an H5P plugin on a new platform?

H5P plugins are so far only created for php based publishing platforms. H5P has been designed to be easy to implement on new platforms. As much as possible of the code is javascript, and the PHP part of the code has been divided into platform agnostic PHP libraries and platform specific interfaces.

The H5P PHP library is responsible for handling imports and exports of .h5p files, displaying H5P content, updating H5P content and providing the API that H5P provides for the H5P libraries. This library has an interface called H5PFrameworkInterface that platform integrations must implement.

The H5P Editor PHP library holds all H5P editor code and provides the javascript APIs for custom editor widgets. This library has an interface called H5peditorStorage that platform integrations must implement.

The APIs provided by these two libraries has not been documented yet. We're planning to simplify the a lot. Many organizations have still already started implementing H5P plugins for their custom publishing platforms an do this by looking at the existing implementations for Wordpress and Drupal.

Customize or extend H5P on my site

 

Responding to actions

Saving user results or displaying custom content can all be done through events. Have a look at our event overview for a list of available events.

 

Handling H5P via custom JavaScript

Displaying H5P content inside a lightbox or accordion requires you to create a custom script that hooks into the third party script and trigger H5P events. See our example.

 

Adding more buttons to the WYSIWYG

This is the place to look if you want to be able to add tables to all text editors, or even create your own MathJAX plugin! See our WYSIWYG Buttons Guide.

 

Our developer guide is divided into the following sections: