What are Extensions?
Extensions are custom layer types that extend Vision’s functionality beyond the built-in layers. You can create your own extensions or use extensions that developers share with you.Extension Tabs
My Extensions
Extensions you’ve created.Installed
Extensions you’ve installed and can use in your overlays.Access
Extensions that developers have shared with you.Using Extensions
Once an extension is installed or shared with you, it appears as a layer type:1
Open your overlay
Go to the overlay editor
2
Add a layer
Click the + button
3
Find the extension
Scroll to find the extension or search by name
4
Add to overlay
Click to add the extension layer
5
Configure
Adjust the extension’s settings
Creating Extensions
Want to create your own extensions?1
Go to My Extensions
In the dashboard, click Extensions → My Extensions
2
Create Extension
Click Create Extension
3
Build your layer
Build your custom layer type
4
Share with others
Share your extension with specific users via the Access tab
Extension Types
Choose the format when creating your extension. Existing extensions keep their format.
Use the Vision SDK for React and platform components, Iframe for a complete
HTML app, or HTML, CSS & JavaScript for custom layouts and small widgets.
HTML, CSS & JavaScript deployments
Create a deployment and enter HTML, CSS and JavaScript for the overlay surface. Use Import files or ZIP in the fullscreen editor to load existing HTML, CSS, and JavaScript into the selected surface. You can also drop files onto the import button. Filename matching follows the custom-widget importer, including named.txt exports. Only matching code tabs are replaced; other surfaces keep their
code. Fields and Data are imported too. Their JSON can be edited in the editor’s
Fields and Data tabs. Bundled assets are not imported.
Overlay field definitions appear as grouped controls on the extension’s layer
card. Initial values come from each field’s value, then the Data file. Changes
on the layer card override those defaults for that layer only. The widget receives
the resolved values as event.detail.fieldData in onWidgetLoad; field edits
reload the widget, like custom-widget layers. Field buttons emit onEventReceived
with the event:test listener and a widget-button event.
Settings and interactive surfaces are optional. Each new deployment starts with
the latest deployment’s code. Promote a deployment to select the active version;
you can promote an earlier version to roll back. Until an active version is set,
the latest hosted deployment is used.
Code runs in an isolated iframe with DOM access. Put executable code in the
JavaScript field; script tags in the HTML field are not executed. Use absolute
URLs for external assets. This format provides shared extension storage:
SE_API are not included. The React SDK’s hooks and server functions remain
available through the React format.
Iframe deployments
Create a deployment and upload a ZIP withindex.html for the overlay,
settings.html for settings, and optionally interactive.html. The existing
supervisor bridge forwards get_storage and storage messages. For local testing,
use the deployment’s Switch to Test action with an HTTPS localhost URL.
Developer Docs: Extensions SDK
Learn how to build extensions with the Vision SDK
What Extensions Can Do
- Render custom graphics
- Accept configuration options
- Integrate with external APIs
- Respond to overlay events
Managing Extensions
Uninstalling
- Go to Extensions → Installed
- Find the extension
- Click Uninstall