Developer documentation

UI Nodes

The app UI is a JSON tree. Plugins add or update nodes with stable IDs so Inspect, Recorder, and other plugins can target them.

Supported node types

Type	Main fields	Use
`row`, `column`, `panel`, `card`, `section`	`id`, `children`, `padding`, `width`, `flex`, `background`, `radius`	Layout and grouping.
`text`, `selectableText`	`id`, `value`, `style`, `color`, `bind`	Labels, headings, copied output, response snippets.
`button`, `iconButton`, `tabButton`	`id`, `text`, `icon`, `command`, `action`, `payload`	Run plugin commands or app actions.
`input`, `textarea`	`id`, `label`, `value`, `bind`, `placeholder`, `readonly`	Editable values and request fields.
`dropdown`	`id`, `items`, `value`, `bind`	Method pickers and enum-like choices.
`checkbox`	`id`, `label`, `value`, `bind`	Boolean settings.
`accordion`	`id`, `label`, `expanded`, `children`	Collapsible plugin sections.
`tabs`	`id`, `tabs`, `children`	Tabbed plugin interfaces.
`keyValueEditor`	`id`, `bind`, `label`	Header/body style key-value editing.
`headersEditor`, `bodyEditor`, `responseViewer`, `requestList`, `pluginList`, `pluginBuilder`	`id`	Native app components exposed as plugin targets.
`webview`	`id`, `url`, `html`	Embedded web content.
`colourPicker`, `colorPicker`, `colourSlider`, `colorSlider`	`id`, `value`, `label`, `command`	Theme and color tools.
`debugConsole`	`id`, `title`	Shows plugin debug logs.
`divider`, `spacer`, `slot`, `splitter`, `hidden`	`id`, sizing fields	Spacing, extension slots, split panes, hidden data.

Common styling and sizing fields

Sizewidth, height, minWidth, maxWidth, minHeight, maxHeight, flex.

Spacingpadding, margin, gap.

Colorsbackground, foreground, color, borderColor.

Shaperadius, borderRadius, borderWidth.

Textstyle values include heading and muted.

TargetingAlways set id; use targetId only when mirroring an existing app target.

Example card with inspectable fields

api.ui.append(app, "rightPanel", {
  type: "accordion",
  id: "customerToolsAccordion",
  label: "Customer Tools",
  expanded: true,
  children: [
    { type: "input", id: "customerToolsEmail", label: "Email", value: "" },
    { type: "textarea", id: "customerToolsOutput", label: "Output", value: "", readonly: true },
    { type: "button", id: "customerToolsRun", text: "Lookup", command: "customerTools.lookup" }
  ]
});