Quickstart

A plugin is a directory with a manifest and a JS entry module. This page gets you from nothing to a working sidebar tab, then adds a backend.

1. Create the plugin

hello/
├── myrax.plugin.toml
└── web/
    ├── plugin.js
    └── plugin.css

myrax.plugin.toml

id = "hello"
name = "Hello"
version = "0.1.0"
myrax = ">=0.1.0"

[ui]
mode = "native"
entry = "web/plugin.js"
styles = ["web/plugin.css"]

2. Add a tab

The panel imports your entry as an ES module and calls register(myrax). sidebar.add creates the tab; mount is called when the user opens it and must return a cleanup function.

web/plugin.js

export async function register(myrax) {
  myrax.sidebar.add({
    value: 'hello',
    label: 'Hello',
    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2"><circle cx="12" cy="12" r="9"/></svg>`,
    mount(node) {
      node.innerHTML = `
        <section class="hello-card">
          <h2>Hello from a plugin</h2>
          <button class="hello-button" type="button">toast</button>
        </section>
      `;
      const button = node.querySelector('.hello-button');
      const onClick = () => myrax.toast({
        title: 'Hello',
        message: 'It works.',
        tone: 'success',
        timeout: 3000
      });
      button.addEventListener('click', onClick);
      return () => button.removeEventListener('click', onClick);
    }
  });
}

web/plugin.css

.hello-card {
  background: var(--panel);
  border-radius: 26px;
  padding: 24px;
}

Plugin CSS gets the panel’s design tokens for free — var(--panel), var(--text), var(--bg) and friends follow the active theme.

3. Install and look at it

On the server (plugin system must be on — myrax add-ons enable):

myrax plugin install /path/to/hello

Reload the panel: the Hello tab is in the sidebar, the button fires a toast. To iterate, edit the files and reinstall — the panel cache-busts assets automatically.

4. Add a backend (optional)

Frontends are sandboxed to the browser. Anything that needs the server — a process, files, another API — goes in a runtime: a process the panel starts, supervises and proxies for you. Declare it in the manifest:

myrax.plugin.toml

[runtime]
enabled = true
command = "/usr/bin/env"
args = ["node", "runtime/server.js"]
transport = "tcp"
port = 0          # 0 = panel picks a free port

Write a tiny HTTP server that binds the port the panel hands it:

const http = require('http');

const port = Number(process.env.MYRAX_PLUGIN_PORT);

http.createServer((req, res) => {
  if (req.url === '/health') {
    res.writeHead(200, { 'content-type': 'application/json' });
    return res.end('{"ok":true}');
  }
  if (req.url === '/api/time') {
    res.writeHead(200, { 'content-type': 'application/json' });
    return res.end(JSON.stringify({ now: new Date().toISOString() }));
  }
  res.writeHead(404);
  res.end();
}).listen(port, '127.0.0.1');

package main

import (
	"encoding/json"
	"net/http"
	"os"
	"time"
)

func main() {
	port := os.Getenv("MYRAX_PLUGIN_PORT")

	http.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
		w.Header().Set("Content-Type", "application/json")
		w.Write([]byte(`{"ok":true}`))
	})
	http.HandleFunc("/api/time", func(w http.ResponseWriter, r *http.Request) {
		w.Header().Set("Content-Type", "application/json")
		json.NewEncoder(w).Encode(map[string]string{
			"now": time.Now().UTC().Format(time.RFC3339),
		})
	})

	http.ListenAndServe("127.0.0.1:"+port, nil)
}

Call it from the frontend through the panel’s proxy — same origin, same auth:

web/plugin.js

const res = await fetch('/api/plugins/hello/proxy/api/time');
const { now } = await res.json();

Reinstall, and the panel starts the runtime, restarts it with the plugin and writes its output to myrax plugin logs hello.

Manifest — every field and its default.
Frontend API — the full myrax object.
Runtime — environment, transports, lifecycle.
Publishing — shipping from a git repo.

Getting started

Panel

HTTP API

Plugins

Plugin development

1. Create the plugin

2. Add a tab

3. Install and look at it

4. Add a backend (optional)

Next

​1. Create the plugin

​2. Add a tab

​3. Install and look at it

​4. Add a backend (optional)

​Next

1. Create the plugin

2. Add a tab

3. Install and look at it

4. Add a backend (optional)

Next