ui — Interfaces

Show dialogs and build small interfaces with the virtual DOM.

Table of content
  1. Main methods
  2. Supported controls
  3. Limits

Capability: ui · Available in: workspace and live preview.

Main methods

Method Purpose
this.ui.openDialog(options) Open a dialog with a title and optional confirm/cancel callbacks
this.ui.hasDOMTarget(name) Check whether a virtual DOM target is available
this.ui.getVirtualDOM(target, label, metadata) Create an interface in dialog, workbench, or a registered note-block target

Dialogs and virtual DOM roots provide createElement(tag, options) and appendChild(element). Elements support text, values, styles, attributes, children, and event listeners.

const dialog = await this.ui.openDialog({
  title: 'Hello',
  confirmText: 'Done'
});
const text = await dialog.createElement('p', { text: 'Hello from a plugin.' });
await dialog.appendChild(text);

Supported controls

Tags: div, span, p, h2, h3, strong, em, ul, ol, li, button, label, input, textarea, select, option, and br.

Events: click, input, change, DialogConfirm, and DialogCancel. Input events provide the control's current value.

Styles: color, backgroundColor, fontSize, fontWeight, padding, margin, borderRadius, display, gap, flexDirection, and alignItems.

Limits

Raw HTML, scripts, host CSS classes, and JSS are unavailable. Style values cannot load external URLs. Stop removes the plugin's rendered interface.