Skip to content

Plugin modals API

api.ui.openModal(options) opens a trusted plugin workflow and returns a function that closes it.

ts
type PluginModalOptions = {
  id?: string
  title: string
  description?: string
  size?: 'small' | 'medium' | 'large' | 'fullscreen'
  closeLabel?: string
  closeOnBackdrop?: boolean
  closeOnEscape?: boolean
  render: PluginModalRenderCallback
}

Defaults

FieldDefault
idA generated plugin modal ID
sizemedium
closeLabelDefault localized close label
closeOnBackdroptrue
closeOnEscapetrue

Render context

ts
type PluginModalRenderContext = {
  id: string
  pluginId: string
  close: (reason?: PluginModalCloseReason) => void
}

The render callback receives an HTMLElement body container and the context. It can return cleanup for listeners, observers, timers, and rendered content.

Close reasons

ts
type PluginModalCloseReason =
  | 'api'
  | 'close-button'
  | 'backdrop'
  | 'escape'
  | 'native'
  | 'plugin-dispose'
  | 'replaced'
  | 'render-error'

Only one plugin modal is active at a time. Opening another closes the current plugin modal with the replaced reason. Unregistering its owner closes it with plugin-dispose.

Events and diagnostics

modal:opened contains id, pluginId, title, and size. modal:closed adds the close reason. The active public snapshot contains id, pluginId, title, size, and openedAt.

See Open a plugin modal for a complete example.

Icon Visualizer developer documentation