CustomHTML

About 3 minexperimental

The CustomHTML component renders your own HTML and CSS inside a dashboard, wired to live data. Use it for bespoke layouts, custom cards, and visuals the built-in components don't cover — and as a fast way to drop in markup generated with an AI tool: paste the HTML and CSS, then bind live tag values with a few lines of script.

Experimental component

CustomHTML is currently an experimental component. Its behavior and settings may change in future releases.

Building HTML with AI

Ask an AI assistant for a self-contained HTML + CSS snippet (a KPI card, a status banner, a small table), paste the two parts into the HTML and CSS tabs, then use the Context tab to feed it live values (see Injecting live data). Keep the markup self-contained — the component renders it as a Vue template, not an isolated document (see Security and constraints).

Quick Start

Drag the CustomHTML component (in the Complex group) onto the canvas. Open Settings → Component Specific → Configure to open the editor, write your markup in the HTML and CSS tabs, and click Apply.

Generic Settings

Each IOTA component shares a set of generic settings. Expand each section below:

Workspace

These settings are applicable to the whole view.

Grid Properties

The grid is provided for convenience when developing dashboards as visual guides and snapping capability.

By default the work area grid is enabled and can be customized or even disabled in this menu.

Property Name	Description
Grid Color	Color of the grid
Grid Size	Size of the grid step
Snap to Grid	Enable/Disable snapping to the grid
Show Grid Lines	Show the grid as lines
Show Grid Dots	Show the grid as dots

Align Controls

The Align controls provides a means to align and distribute selected objects on the display.

Align Objects

You can align several components horizontally using the Align-left, Align-center or Align-right controls
You can align several components vertically using the Align-top, Align-vertical-center or Align-bottom controls

Distribute Objects

You can distribute several components on the vertical/horizontal axis by selecting them (select at least 3 components) and pressing Align-vertical/Align-horizontal
You can make all the selected components the same width/height by selecting them and pressing Adjust Width/Adjust Height

Tips

Hold the Ctrl button to select several components. The oldest component is used as a reference.

Anchor Points Options

The anchor points are eight squares around an object that allow you to resize the object. The anchor point options allow you to define the appearance of the anchor points.

Property Name	Description
Reference Point Color	Sets the color of the reference point (see Rotation and Position for more details)
Anchor Points Color	Sets the color of the rest of the seven anchor points
Point Options Color	Sets the color of the point options (only for Line and Bezier Curve)
Show Point Options	Show/Hide the point options

Locked View Options

These options define the appearance of the component border in the locked view for the selected component.

Property Name	Description
Active Border Fill	Sets the fill color of the border
Active Border Width	Sets the width of the border

Variable

Every component has a unique variable name. This variable name can be used to reference the component in multi-state configurations and other scripts.
On creation, every component is given a default name. This can be overwritten to be more user-friendly. To do so simply overwrite the value in the variable input field.

Arrange / Remove

Send Backward - move object one layer down
Bring Forward - move object one layer up
Send to Back - place object under all layers
Bring to Front - place object above all layers
To send/bring objects to the front/back use the first four buttons.
Any set of components can be deleted by either using the button or delete/del keyboard keys.

Rotation and Position

Reference Anchor Point - allows you to select one of the anchor points as a reference so that you can set an Angle (clockwise) of incline relative to this point.
By default the reference anchor point is the top left corner. You can also rotate the component by dragging one of the yellow corner points.
You can set the position of the component by setting the X and Y coordinates relative to theReference Anchor Point and the top-left corner of the work area.
You can drag any of the anchor points to change the width and height of the component, or you can set it manually by editing the Width and Height boxes.
Set Lock Aspect Ratio so that while changing width and height, the component width to height ratio stays the same
Transform allows you to view the component as a mirror or a reflection of itself

Actions

Actions or multi-states are programmable conditional states handled by user-generated code.

Note

Actions that have script handlers are marked with a circle

in the top right corner.

The currently supported actions are described in the table below:

Action	Trigger
OnCreate	When the component is created
OnFocus	When the component is selected
onClick	When the component is clicked or the selection is changed
onData	Each time the data changes for assigned channels
onTick	20 times per second
onDblClick	On mouse double click
onHover	When the mouse is over the component (and not when the mouse is not)

Properties

The properties menu for Channels allows you:

to modify the Label of the DataSource
to set UOM, lower and upper values
to choose number format and displayed digits
to adjust the line formatting for trend line components
to configure the additional regression lines that can be plotted for supported components

Title settings are suppressed

The Text, Title, and Label Position generic controls are hidden — the component renders your markup, not a label of its own.

CustomHTML Settings

Visual Properties

Border color, border width, background color (including gradients), and drop shadow apply from the standard visual settings and sit behind your markup.

To pick color of your interest

To change color for specific visual property, click on the color box next to property description. The color picker dialog will be displayed.
Visual Properties: Color Picker Dialog
Pick the color of interest. The video below shows how to choose a solid, gradient or theme color.
Color Picker Dialog: Workspace
You can add Gradient Stops by double clicking and to remove - by pulling it up.
To close the color-picker dialog - click on the property color box (Step 1).
Closing color-picker dialog
Clicking on the workspace area instead of Settings Tab area -
component settings will disappear since component focus will be lost.
Color Picker Dialog: Workspace

Component Specific — the Configure editor

The Component Specific section holds a single Configure button that opens a full-screen editor with four tabs, each a code editor:

Tab	Language	What it holds
Context	TypeScript / JavaScript	A script whose return value becomes the data available to your markup. Runs on load and on every Apply.
HTML	HTML	The markup — compiled as a Vue template, so it supports `{{ }}` interpolation, `:attr` / `v-bind`, `v-for`, `v-if`, and `:style`.
CSS	CSS	Styles applied to the markup.
Output	—	A read-only console showing log and error messages from the Context script.

Click Apply to run the script and save all three fields, or Close to discard.

Injecting live data

Data flows in through the Context script, not a placeholder-binding UI. The script returns an object; every key on that object is then available in the HTML tab by name.

Context tab — resolve a tag's current value and return it:

// tagSearch(dataSource, mask) → tagSnapshot(tags) returns current values
const tags = await tagSnapshot(await tagSearch('Site PI AF', 'HEX01.Heat Duty'));
return {
  heatDuty: tags[0]?.value,
  unit: 'kW',
};

HTML tab — reference the returned keys with Vue template syntax:

<div class="card">
  <h2>Heat Duty</h2>
  <p class="value">{{ heatDuty }} {{ unit }}</p>
</div>

CSS tab:

.card { padding: 16px; border-radius: 8px; background: #1e272e; color: #fff; }
.value { font-size: 32px; font-weight: 700; }

The Context script has access to the same data helpers used elsewhere in scripting — including tagSearch, tagSnapshot, getComponent (read another component's data), callDriver / getDriver, and the navigation helpers — plus the view variables (_VIEW_ID_, _VIEW_NAME_, _VIEW_PATH_). By default it returns { item: this.item }, exposing the component's own channel data as item. For the full function list, see the Scripting Guide and Component Scripts.

Security and constraints

Trusted-builder feature

CustomHTML runs arbitrary JavaScript (the Context script) and renders un-sanitized markup with full access to the app. There is no iframe sandbox, HTML sanitizer, or tag allow-list. Only use markup and scripts you trust.

Script runs; inline <script> does not. Executable logic belongs in the Context tab. A literal <script> tag in the HTML tab is treated as template markup and is not executed.
CSS is global (not scoped). There is no Shadow DOM isolation, so styles in the CSS tab can leak to — and be affected by — the rest of the page. Scope your selectors (e.g. prefix with a wrapper class) to avoid collisions.
Manage your own data freshness. The Context script runs on load and on each Apply — there is no built-in polling. For live-updating values, wire reactivity in the script (for example with ref / computed, or by reading a component that already updates via getComponent).
Errors surface in the Output console and, on a render error, as a red error block in place of the markup.

Migrating PI Vision Custom Symbols — convert a PI Vision custom symbol to a Custom HTML component
Scripting Guide — the data functions available in the Context script
IFrame — embed an external web page instead of authoring markup
SubView — embed a saved IOTA view instead of custom markup