Start · Your first widget
Your first widget
Ten minutes, no server, nothing to install. You will build a small server-status widget, preview it live, and end with a package file ready to upload.
1. Open the widget builder
The widget builder is a visual editor with a live preview. Everything you do there maps one-to-one onto the package format, so it doubles as a teaching tool.
2. Write the template
Widgets use the platform template dialect: {{ variable }} outputs escaped, {{{ variable }}} outputs raw.
<div class="server-status">
<b>{{ server_name }}</b> is {{ status }}
</div>3. Define the settings
Every variable in your template becomes a field the board admin fills in. Declare them in the settings schema:
[
{ "key": "server_name", "label": "Server name", "type": "text" },
{ "key": "status", "label": "Status text", "type": "text", "default": "online" }
]4. Download and register
The builder exports a ready-to-upload JSON package. Register an app of type Widget on your dashboard, upload the package, add an icon, and submit. Approved widgets appear in every board's extension directory.
Want it to show live data instead of admin-entered text? Pair a widget with the REST API and webhooks: your service updates the values, the widget renders them. The Connect section covers both.