> For the complete documentation index, see [llms.txt](https://docs.lumi.education/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lumi.education/usage/architecture.md).

# Architecture

## General overview

A H5P web-application using this library consists of four components, which communicate between each other:

1. This library (@lumieducation/h5p-server and possibly other @lumieducation packages) on the server-side (in yellow below)
2. Your server (implementation of the interfaces of this library + other endpoints, in blue below)
3. Your web client (running in the browser, in blue below, @lumieducation/h5p-webcomponents and @lumieducation/h5p-react can help your here if you want to write a SPA application)
4. Joubel's H5P player / editor client (downloaded by you and served by your server, in grey below)

As you can see, this library is not an out-of-the-box solution for all your needs, but **requires you to implement your own server and web client**.

## Example diagram of the editor

The diagram shows how the four components interact in a selection of use cases. Each use case has a specific colour and can be traced through the system by it.

![Diagram showing the components at work](/files/-MQcK_ikukhvzGQb8YyL)

You have to implement all the components shown in blue. This library (@lumieducation/h5p-server) provides the parts in yellow and the grey parts are provided by Joubel's H5P client libraries (downloaded from the PHP implementation). The Express package (@lumieducation/h5p-express) deals with all AJAX calls by the H5P JavaScript client. You are free to use it, but can also implement the HTTP endpoints yourself.

Note: The diagram doesn't show a complete list of all use cases and is only intended to illustrate how everything plays together! There is a lot more functionality in the packages, which is not listed here.

The player is simpler, as it doesn't have as many endpoints, but works in a comparable way to the structure in the diagram.

## Example implementation

There is a basic example implementation of the server and client (blue parts) using Express (and server-side rendering) in the `/packages/h5p-examples` folder. There is also a more advanced SPA example in the `/packages/h5p-rest-example-server` and `/packages/h5p-rest-example-client` folders. Check out the documentation on it [here](/usage/rest.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.lumi.education/usage/architecture.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.