Custom stage views are html pages that can contain anything the creator decides.
Adding a Stage
- Go to the OpenLP data folder. You can get to it by opening OpenLP, then in the toolbar:
Tools > Open Data Folder.
- Enter the folder called
stages. You might have to create this folder if it does not exist.
- Place your stage folder inside the
stagesfolder. Your stage folder's name will be the name of the stage. Inside your stage folder, there should be (as a bare minimum), a html file called
stage.htmlwhich OpenLP will serve to the user.
stage.html file's path should look something like this:
Accessing a Stage
To view a stage, make sure OpenLP is running, and go to the url:
For example, if I want to go to the stage called
my-stage on the same computer that OpenLP is running on, I would navigate to
The url used to view a stage is NOT the same as the file path. The web url uses
stage(singular) whereas the file path uses
Creating a stage
Creating a stage is like any other html page. The only restriction is you need to have your html page called
When making a stage, it is best to test it by placing it in the OpenLP stages folder and opening it via the OpenLP server. The OpenLP server may handle links differently to how opening the file stand-alone would handle them.
stage.html file might look something like this:
The project file layout should look something like this:
hello-world ├── stage.html ├── style.css └── script.js
To use it, you would place the
hello-world folder into the
stages folder in the OpenLP data folder. Then after starting OpenLP, open a web browser and navigate to
Interaction with OpenLP
To get the state and when it updates, you should use WebSockets (link to the WebSockets Documentation)
To get other information and to send requests to OpenLP, use the HTTP API (link to documentation)