Skip to main content

Managed UI

Target Audience: Intermediate Goal: Build extension UI surfaces with DI + messaging while keeping state ownership in background/content stores.

Managed UI configures popup/devtools/newtab/sidepane build + bootstrap for you. The CLI wires a UI DI container, registers tokens, and exposes HexaUIClient for typed messaging to background.

For advanced injected rendering patterns, this section also covers Shadow Views, where a HexaJS view extends HexaView, gets injected with @InjectView(), and mounts React into an isolated Shadow DOM root.

What Managed UI supports​

  • UI-scoped and general DI services.
  • Token injection through the generated UI container.
  • HexaUIClient request/response messaging.
  • React, Vue 3, Svelte 5, or SolidJS bindings (project-wide), via @hexajs-dev/ui/react, @hexajs-dev/ui/vue, @hexajs-dev/ui/svelte, and @hexajs-dev/ui/solid.
  • Shadow Views for isolated Shadow DOM rendering.

Choosing a framework​

Set ui.framework in hexa-cli.config.json to "react" (default), "vue", "svelte", or "solid". The choice applies to all managed surfaces (popup, devtools, newtab, sidepane) and the content @View shadow DOM. Mixing frameworks per surface is not supported.

{ "ui": { "framework": "vue" } }
{ "ui": { "framework": "svelte" } }
{ "ui": { "framework": "solid" } }

See React Integration, Vue Integration, Svelte Integration, and Solid Integration for the framework-specific patterns.

What Managed UI does not host​

  • No @State(...) UI store registration.
  • No HexaBackgroundStore or HexaContentStore in UI context.
  • No controller/handler endpoints in UI context.

When UI needs data, ask background through messaging and let state live in background/content store contexts.