---
title: Alpha - Studio - How to Author Content in H5P and Publish in Open edX? (Clone)
description: H5P makes it easy to create, share, and reuse HTML5 content and applications. H5P empowers everyone to create rich and interactive web experiences more efficiently. It is mobile responsive and complet
---

[Skip to content](https://help.edly.io/docs/how-to-author-content-in-h5p-and-publish-in-open-edx-0#main-content)

English

Show submenu for translations

![](https://help.edly.io/hs-fs/hubfs/Edly%20by%20Arbisoft%20(Red%20and%20Gray)-1.png?width=100&height=75&name=Edly%20by%20Arbisoft%20(Red%20and%20Gray)-1.png)

Open main navigation

Close main navigation

- English
  
  Show submenu for translations
- Visit edly.io

 Visit edly.io

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Edly Knowledge Base](https://help.edly.io/docs?hsLang=en)
2. [Studio](https://help.edly.io/docs/studio?hsLang=en)
3. [Exercises and Tools](https://help.edly.io/docs/studio?hsLang=en#exercises-and-tools)

# Alpha - Studio - How to Author Content in H5P and Publish in Open edX? (Clone)

### Overview

H5P (HTML5 Package) is an open-source framework that makes it easy to build, share, and reuse rich, interactive e-learning content. Using H5P, authors can construct mobile-responsive activities—such as interactive videos, branch navigation scenarios, memory games, and timelines—and embed them directly into an Open edX course run using a specialized XBlock.

**Tip:** Ensure you are logged into **Open edX Studio** before proceeding.

### Step 1: Author and Download Content on H5P

Before publishing anything inside Studio, you must generate your interactive asset package.

1. Sign in to your external **H5P authoring account** (or your organization's integrated H5P dashboard/WordPress plugin workspace).
2. Click **Create Interactive Content**.
3. Select your target content type (e.g., *Interactive Video*, *Course Presentation*, or *Dialog Cards*) and build out your multimedia elements and question parameters.
4. Once completed, scroll to the bottom of your action frame and click the **Download** or **Reuse** link.
5. Save the generated **`.h5p`** package file directly onto your local machine.

### Step 2: Register the H5P XBlock in Advanced Settings

To allow your course run to recognize and render H5P packages, you must enable its processing key in the backend properties.

1. Open your target course run in **Studio**.
2. From the **Settings** menu in the top navigation bar, select **Advanced Settings**.
3. Locate the **Advanced Module List** field near the top of the configurations table.
4. Inside the square brackets `[ ]`, enter the H5P plugin key precisely as: `"h5pxblock"` 
     - *Note: If other advanced block keys are already registered, separate them using a comma (e.g., `["lti_consumer", "h5pxblock"]`). Ensure you use standard straight double quotation marks.*
5. Click **Save Changes** at the bottom of the page.

### Step 3: Embed the H5P Component into a Unit

With the feature registered at the course level, you can drop the activity canvas onto any target learning page.

1. Navigate to your **Course Outline** page and enter the specific **Unit** where the interactive module should live.
2. Scroll to the **Add New Component** dashboard panel at the bottom of the workspace.
3. Click the **Advanced** tile.
4. Select **H5P XBlock** from the expanded options menu. The block container will load immediately onto your page canvas.

### Step 4: Upload the `.h5p` Package File

The final step is to feed your authored multimedia package file into the Studio component player.

1. Find your newly added H5P component block on the unit layout and click **Edit**.
2. In the configuration modal, look for the file upload or file chooser field.
3. Click the upload button, locate the **`.h5p`** file you downloaded in Step 1 from your machine, and click Open.
4. Supply a clear learner-facing **Display Name** matching the activity topic (e.g., *Interactive Module: Chemistry Lab Simulation*).
5. Click **Save**.
6. Click the **Publish** button in the right-hand unit status sidebar to push the dynamic module live.

### Learner Experience in the LMS

When an enrolled student loads this unit page in the Learning Management System (LMS) player, the H5P engine initializes your package. The content renders as a responsive, native HTML5 element directly inside the central viewport. If your H5P package includes scored checkpoints, the student's performance data communicates dynamically with the platform database and tracks within their personal progress matrices.

- [Discovery Site](https://help.edly.io/docs/discovery-site?hsLang=en#main-content)

    - [Settings and Tools](https://help.edly.io/docs/discovery-site?hsLang=en#settings-and-tools)
    - [Assets Management](https://help.edly.io/docs/discovery-site?hsLang=en#assets-management)
- [Edly Panel](https://help.edly.io/docs/edly-panel?hsLang=en#main-content)

    - [Settings and Tools](https://help.edly.io/docs/edly-panel?hsLang=en#settings-and-tools)
    - [User Management](https://help.edly.io/docs/edly-panel?hsLang=en#user-management)
    - [Panel Insights](https://help.edly.io/docs/edly-panel?hsLang=en#panel-insights)
    - [Panel Dashboard](https://help.edly.io/docs/edly-panel?hsLang=en#panel-dashboard)
    - [Themes](https://help.edly.io/docs/edly-panel?hsLang=en#themes)
- [Studio](https://help.edly.io/docs/studio?hsLang=en#main-content)

    - [Studio Guides](https://help.edly.io/docs/studio?hsLang=en#studio-guides)
    - [Creating a Course](https://help.edly.io/docs/studio?hsLang=en#creating-a-course)
    - [Exercises and Tools](https://help.edly.io/docs/studio?hsLang=en#exercises-and-tools)
    - [Course Components](https://help.edly.io/docs/studio?hsLang=en#course-components)
    - [Course Assets](https://help.edly.io/docs/studio?hsLang=en#course-assets)
    - [Re-running Your Course](https://help.edly.io/docs/studio?hsLang=en#re-running-your-course)
- [LMS Administration](https://help.edly.io/docs/lms-administration?hsLang=en#main-content)

    - [User Management](https://help.edly.io/docs/lms-administration?hsLang=en#user-management)
    - [Open edX E-commerce](https://help.edly.io/docs/lms-administration?hsLang=en#open-edx-e-commerce)
    - [Instructor Dashboard](https://help.edly.io/docs/lms-administration?hsLang=en#instructor-dashboard)
- [Learner Experience](https://help.edly.io/docs/learner-experience?hsLang=en#main-content)

    - [Learning Management System](https://help.edly.io/docs/learner-experience?hsLang=en#learning-management-system)
    - [Discovery Site](https://help.edly.io/docs/learner-experience?hsLang=en#discovery-site)
- [Getting Started](https://help.edly.io/docs/getting-started?hsLang=en#main-content)

    - [Open edX E-commerce](https://help.edly.io/docs/getting-started?hsLang=en#open-edx-e-commerce)
    - [Learning Management System](https://help.edly.io/docs/getting-started?hsLang=en#learning-management-system)
    - [Exercises and Tools](https://help.edly.io/docs/getting-started?hsLang=en#exercises-and-tools)
    - [Discovery Site](https://help.edly.io/docs/getting-started?hsLang=en#discovery-site)
    - [Edly Panel Management](https://help.edly.io/docs/getting-started?hsLang=en#edly-panel-management)
    - [Edly Go App](https://help.edly.io/docs/getting-started?hsLang=en#edly-go-app)
- [General](https://help.edly.io/docs/general?hsLang=en)

[![Chill listening crop-3](https://help.edly.io/hs-fs/hubfs/Edly%20by%20Arbisoft%20(Red%20and%20Gray)-2.png?width=34&height=24&name=Edly%20by%20Arbisoft%20(Red%20and%20Gray)-2.png "Chill listening crop-3")](http://arbisoft.com)

<https://www.facebook.com/> <https://www.twitter.com/> <https://www.instagram.com/> <https://podcasts.apple.com/> [mailto:email@email.com](mailto:email@email.com)

Copyright © 2026, Edly Inc.