Writing UI in plain JavaScript

Runtime plugins are loaded as plain JavaScript modules. They can still render React UI through helpers exposed on the plugin context:

const h = ctx.h;                       // React.createElement
const { useSliceValue, useT } = ctx.hooks;
const { fromSlice, valueFrom } = ctx.states;

function MyPanel() {
  const state = useSliceValue(slice);  // subscribe to the plugin slice
  const t = useT();                    // re-renders on locale change
  return h("div", null, t("my.greeting", { name: state.name }));
}

ctx.contribute({ id: "panel", surface: "leftSidebar", component: MyPanel });

Available helpers:

ctx.react — the full React namespace (createElement, Fragment, hooks…).
ctx.h — shortcut for React.createElement.
ctx.hooks.useSliceValue(handle) — subscribe a component to a slice.
ctx.hooks.useT() — translate function that re-renders on locale changes.
ctx.states.fromSlice / ctx.states.fromObservable / ctx.states.combineStates / ctx.states.valueFrom — build reactive command/toolbar state sources.
ctx.icons — reserved for shared icon components (currently empty; plugins usually ship their own inline SVGs or bundle an icon library).