Your first plugin

Use the supplied examples/plugin-widget as your first plugin. It has no host half, no requested permissions and no build step: the browser entry is already JavaScript.

Prepare

Copy that directory to your own plugin directory. Read package.json and lib/client.js. Change the npm package name to your own scope, set a unique valid manifest ID and update its label and description. Preserve the ESM package type and the ./client export.

The client imports React from the platform and returns the disposer from ctx.slots.register. Keep React external if you later add a bundler.

Install and inspect

Activate your developer installation's licence first. Configure developer mode as explained in Testing, then run:

timon plugin add ./my-plugin
timon plugin list

Inspect the installation confirmation. Open the cockpit and look for the card. Move it, reload the page and confirm its placement survives. Disable the plugin and confirm the card disappears; enable it and confirm it returns.

timon plugin disable acme-weather
timon plugin enable acme-weather

Replace acme-weather with your manifest ID. If it is refused, read the reported reason before retrying. See the widget guide for sizing and multiple instances, and the example catalogue for the full source.

Continue with the example cookbook for verified source excerpts from all eleven packages.