Create a Custom Widget

The workbench provides editors for general metadata, API sources, requests, widget options, JSX, and preview data. Raw JSON is available when direct editing is faster.

Workflow

1. Configure each API source, network scope, authentication method, and credential.
2. Add named queries and actions. Values can reference widget options or invocation parameters.
3. Define widget options and their defaults.
4. Write JSX using data, status, options, and temporary inputs.
5. Run Test and preview, inspect the response data and redacted request journal, then save.

Changing the definition, options, or credentials invalidates the previous preview. Preview actions are simulated unless Run actions against the configured API is enabled for that preview session.

Widget options support text, textarea, number, switch, select, multi-select, slider, date, time, color, icon, URL, duration, time zone, and JSON controls. Dynamic choices can come from a load query.

See the safe JSX runtime, component reference, and request reference for the authoring contract.

Create with another AI service

Create or fix with any AI copies a self-contained prompt for an ordinary ChatGPT or Claude conversation. The model must return one fenced json block containing the complete definition. Paste that block into the workbench, add credentials separately, and validate it against a real preview.

For an MCP-connected agent, use the Homarr Custom Widget skill instead.