Create the simplest plug-in - "Hello Haiilo Home"

Step 1

The most basic plug-in consist of at least two components:

  • a manifest that declares the plug-in's properties (such as name and content to view)
  • at least one web page to view (we call them entry points)

Let’s go for a simple “Hello Haiilo Home” example.

Add the manifest

When an admin installs a plug-in he needs to provide the URL of the manifest file. The manifest contains all information for the Haiilo Home system to render the plug-in as a widget.

A manifest describing a simple "Hello Haiilo Home" static plug-in could look like this.

  "manifestVersion": "2.0.0",
  "pluginVersion": "0.1.0",
  "name": {
    "en": "Demo Plugin - Step 1",
    "de": "Demo Plugin - Step 1"
  "description": {
    "en": "A simple demo plug-in",
    "de": "Ein einfaches Beispiel-Plug-in"
  "entryPoints": [
      "id": "510e9e0c-e3b8-44a8-8db1-5185d3d844ce",
      "url": "/",
      "name": {
        "en": "My first plug-in view",
        "de": "Meine erste Plug-in Ansicht"
      "description": {
        "en": "Showing my plug-in",
        "de": "Mein Plug-in"

The plug-in can offer multiple views, known as entry points. When a content maintainer adds a plug-in widget to a page, he can select which entry point of the plug-in is displayed on his plug-in instance.

Add the static content of an entry point

The above manifest states the entry point’s URL as a path relative URL that results in an effective URL of Our first version will only serve a static HTML page under this URL:

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Haiilo Home Demo Plug-in</title>
    <meta content="A simple demo plug-in" name="description">
    <link rel="stylesheet" href=" Sans Pro">
    <link rel="stylesheet" type="text/css" href="styles.css">
<h1>Hello Haiilo Home</h1>
<p>Welcome to our first static plug-in :)</p>

That’s basically it. You have created the most simple plug-in there is.


Demo project

The result of this step can be seen at branch 1-static of our demo project