Config Panel

When a user selects your node on the Automation Builder canvas, the config panel appears. You can build a custom React config panel using the SDK iframe sandbox, or rely on the auto-generated fallback UI derived from input_schema.

SDK iframe mechanism

The config panel uses the same iframe sandwich as widget editor panels:

Automation Builder (host) -> Supervisor iframe -> Extension Runtime iframe -> Your editor.tsx

Your extension must include "editor" in its targets array. The editor entry point renders your config panel component.

Using useLumioConfig

The useLumioConfig hook reads and writes the per-node-instance config (automation_nodes.config):

import { Lumio, CompactView } from "@zaflun/lumio-sdk";
import { useLumioConfig } from "@zaflun/lumio-sdk/hooks";

function ConfigPanel() {
  const [config, setConfig] = useLumioConfig();

  return (
    <CompactView title="Threshold Settings">
      <label>
        Threshold:
        <input
          type="number"
          value={config.threshold ?? 50}
          onChange={(e) => setConfig({
            ...config,
            threshold: Number(e.target.value),
          })}
        />
      </label>
      <label>
        Comparison:
        <select
          value={config.comparison ?? "greater_than"}
          onChange={(e) => setConfig({
            ...config,
            comparison: e.target.value,
          })}
        >
          <option value="greater_than">Greater than</option>
          <option value="less_than">Less than</option>
          <option value="equal">Equal to</option>
        </select>
      </label>
    </CompactView>
  );
}

Lumio.render(<ConfigPanel />, { target: "editor" });

Changes sync back to automation_nodes.config via the parent host communication protocol.

Fallback UI

If your extension does not include an editor surface, the Automation Builder renders an auto-generated form based on node.input_schema. Each property in the schema becomes a form field:

Schema type	UI element
string	Text input
number	Number input
boolean	Checkbox
string with enum	Select dropdown

This fallback is sufficient for simple configurations. Use a custom editor surface when you need richer controls (color pickers, multi-step wizards, visual selectors).

Next steps

• Testing -- test the config panel locally
• SDK Hooks Reference -- full useLumioConfig API