Targets

The targets field in lumio.config.json declares which surfaces your extension renders on. Only listed targets are bundled and deployed.

Available targets

Target	Surface	Entry file	Purpose
"editor"	Dashboard sidebar	src/editor.tsx	Configuration UI for the streamer
"layer"	Browser Source	src/layer.tsx	Transparent visual overlay on stream
"interactive"	Standalone page /ext/\{slug\}	src/interactive.tsx	Audience interaction page
"designer"	Fullpage designer overlay	src/designer.tsx	Split-pane designer with live preview

Common combinations

{ "targets": ["editor", "layer"] }

The most common setup. The editor lets the streamer configure settings; the layer displays the overlay in the stream.

{ "targets": ["editor"] }

Configuration-only. Useful for bot modules or integrations that have no visual overlay output.

{ "targets": ["layer"] }

Layer-only widget. No custom editor UI — settings come from config_schema in lumio.config.json and the host auto-generates a settings panel. Most system extensions use this pattern.

{ "targets": ["editor", "layer", "interactive"] }

Full extension with audience participation. Viewers can interact via the standalone page.

{ "targets": ["editor", "interactive"] }

Interactive audience experience with editor configuration, but no overlay layer.

{ "targets": ["layer", "designer"] }

Layer with a fullpage designer. The designer provides a split-pane view with live preview alongside configuration fields. Designer fields can be defined via designer_schema in lumio.config.json (host-side form) or via a custom designer.tsx using SDK Editor Components.

Minimum requirement

At least one target is required. An extension with no targets is invalid.

Entry files

Each listed target requires a corresponding entry file:

Target	Required file	Called by
"editor"	src/editor.tsx	Dashboard overlay editor sidebar
"layer"	src/layer.tsx	Browser Source iframe
"interactive"	src/interactive.tsx	Lumio webapp /ext/{slug} route
"designer"	src/designer.tsx	Fullpage designer overlay

If a target is listed in lumio.config.json but the entry file is missing, the build fails with an error.

Adding targets later

You can add targets to an existing extension by:

1. Adding the target to "targets" in lumio.config.json
2. Creating the corresponding entry file
3. Running lumio build and lumio deploy

Removing a target from "targets" removes the surface from the deployed bundle. Existing Browser Sources pointing to the removed layer surface will show an error until the user removes them.