Slots and Portals

Frontend plugins can render UI in two ways:

Slots render wherever the app includes <PluginSlot name="..." />. The default host already renders the global slot in app/lib/plugins/PluginHost.tsx.

const plugin: FrontendPlugin = {
  name: 'banner',
  slots: {
    global: () => (
      <div className="fixed left-4 bottom-4 rounded bg-black px-3 py-2 text-white">
        New plugin loaded
      </div>
    )
  }
};

Portals let plugins mount components into any DOM selector via mounts. The runtime uses a MutationObserver to wait for the element.

const plugin: FrontendPlugin = {
  name: 'checkout-badge',
  mounts: [
    {
      selector: '[data-checkout-summary]',
      component: () => <span className="ml-2 text-xs">Verified</span>,
      once: true,
      order: 20
    }
  ]
};

Selector and ordering tips

Prefer stable data- attributes for selectors.
once: true stops observing after the first successful mount.
order controls rendering order when multiple plugins target the same element.