Skip to content
Kryton

Plugin quickstart

This quickstart builds a client-only plugin that adds a sidebar panel saying “Hello from my plugin”. Develop it inside a clone of the kryton-plugins repository — the type declarations live there, and the build / test / validate scripts are pre-wired.

1. Scaffold the folder

Section titled “1. Scaffold the folder”

From the repo root:

Terminal window
mkdir -p plugins/hello-panel/client

2. Write the manifest

Section titled “2. Write the manifest”

plugins/hello-panel/manifest.json:

{
  "id": "hello-panel",
  "name": "Hello Panel",
  "version": "0.1.0",
  "description": "A minimal sidebar-panel plugin.",
  "author": "you",
  "minKrytonVersion": "2.0.0",
  "client": "client/index.js"
}

The directory name must match id. The five string fields plus minKrytonVersion are all required — see Overview → The manifest.

3. Write the client entry

Section titled “3. Write the client entry”

plugins/hello-panel/client/index.ts:

import type { ClientPluginAPI } from '../../../types/client';


const { React } = window.__krytonPluginDeps;
const { createElement: h } = React;


function HelloPanel(): any {
  return h(
    'div',
    { style: { padding: 12, fontSize: 13 } },
    'Hello from my plugin',
  );
}


export function activate(api: ClientPluginAPI): void {
  api.ui.registerSidebarPanel(HelloPanel, {
    id: 'hello-panel',
    title: 'Hello',
    icon: 'sparkles',
    order: 100,
  });
}


export function deactivate(): void {
  // nothing to clean up
}

A few things to note:

  • The relative '../../../types/client' import points at kryton-plugins/types/client.d.ts — the type-only declaration of ClientPluginAPI. No npm package is involved.
  • React and ReactDOM arrive on window.__krytonPluginDeps; the plugin never imports them directly.
  • The manifest points at client/index.js, but you write .ts — the build step transpiles to JS.

4. Build and validate

Section titled “4. Build and validate”
Terminal window
npm install          # once, at the repo root
npm run build        # esbuild bundles every plugin's ts → js
npm run validate     # runs scripts/validate-registry.js

The validator checks that every plugin’s manifest has the required fields, the id matches the directory name, declared entry points exist on disk, and that there are no duplicate ids.

5. Try it locally

Section titled “5. Try it locally”

Two options:

  • Drop it into a running Kryton’s plugins directory and reload — the manager picks up plugins/hello-panel/.
  • Submit to the registry — see Testing and publishing.

Next steps

Section titled “Next steps”