The Widget Editor

The widget editor is where you build and refine widgets. It has a live preview on one side and a set of tabbed panels on the other for editing code, managing data, and configuring settings.

Layout

The editor is split into two resizable areas:

• Left panel — Tabbed panels for editing (see below). You can drag the divider to resize.
• Right area — Live preview of your widget in an isolated iframe. Updates automatically as you edit.

A vertical toolbar on the far left lets you switch between panels.

Panels

Code

The main editing panel with four sub-tabs:

• HTML — Your widget's markup. Write standard HTML here.
• JavaScript — Data fetching and DOM manipulation code. This runs inside an async wrapper, so you can use await directly.
• Chart.js — Optional. If you're using Chart.js, put chart creation code here. It runs after the JavaScript section and shares the same scope, so you can reference variables from the JS tab.
• CSS — Styles scoped to your widget.

All four sections combine into a single HTML document for the preview. See Using getData() for how to fetch data in the JavaScript section.

Data

Manage which data connections your widget uses. You can:

• Add connections from the list of available connections in your organization
• Remove connections you no longer need
• See the connection type (Tulip, SQL, MQTT, Static) and field details

The connection name you assign here is what you pass to getData("connectionName") in your code.

Inputs

Define input parameters that dashboards can pass into your widget. Each input has a key, a type (text, number, date, etc.), and an optional list mode for multi-value inputs. See Widget Inputs for details.

Settings

• Max Width and Max Height — Set maximum dimensions (in grid units) for when the widget is placed on a dashboard.
• Owner — Reassign ownership of the widget.

Console

Shows console.log, console.warn, and console.error output from your widget code. Useful for debugging without opening browser developer tools.

AI Agent

An AI assistant that can help you write or modify widget code. Describe what you want in plain language, and the agent generates code based on your widget's current state and connected data. See The AI Agent for more.

Where Used

Lists the dashboards that include this widget. Helpful for understanding the impact of changes before you make them.

Toolbar actions

At the top of the editor:

Action	Description
Refresh	Reload the widget preview and re-fetch all data
Copy	Duplicate this widget as a new widget (disabled if the widget uses SQL connections)
Edit / View	Toggle between edit mode and read-only view mode
Save	Save your changes
Save and Back	Save and return to the widget list

Admins also see a Save as Example button to mark or unmark a widget as an example for other users.