Manifest

The manifest.json file is the entrypoint for all applications built for Streamlabs Desktop. Using the manifest you will describe your application name, version, how many pages it will render in Streamlabs Desktop, what permissions you need to operate, etc.

You need a manifest.json both while developing your app and for your eventual release bundle.

An example manifest.json is shown below:

{
  "name": "Streamlabs Example App",
  "version": "0.0.1",
  "buildPath": "build/",
  "permissions": ["slobs.scenes-sources", "slobs.obs-settings"],
  "supportedPlatforms": ["twitch", "mixer", "youtube", "facebook"],
  "icon": "streamlabs-logo.jpg",
  "sources": [
    {
      "type": "browser_source",
      "name": "Example Widget",
      "id": "streamlabs_example_widget",
      "about": {
        "description": "This widget will play a cool animation when a button is clicked",
        "bullets": [
          "Plays cool animations"
        ],
        "bannerImage": "colbert.gif"
      },
      "file": "widget.html",
      "initialSize": {
        "type": "relative",
        "width": 1,
        "height": 1
      }
    }
  ],
  "pages": [
    {
      "slot": "top_nav",
      "file": "settings.html",
      "popOutSize": {
        "width": 300,
        "height": 500
      }
    }
  ]
}

The complete structure and schema of the manifest.json is described below.

manifest.json contains these properties:

Property	Type	Description
name	string (required)	Name of your application the will be shown in Streamlabs Desktop
version	string (required)	Version of your application
buildPath	string	If you are using `webpack` or other build tools, you should provide the path where we can find your build artifacts. Detailed description: Code Submission and Deployment
permissions	array	Array of perrmissions if you are using Streamlabs Desktop API. Details: Streamlabs Desktop API
sources	array	Array of Streamlabs Desktop `sources`. E.g. user-facing alert widget that notifies about donations is a `source`. Each source your application exposes should have a unique `id` of your choosing.
pages	array	Array of pages that will be rendered in Streamlabs Desktop. `Page` is visible only for streamer, you should place your settings logic or logic that requires streamer attention here. E.g. `settings` section of your application is a `page`. Currently only `1` page per application is supported.
authorizationUrls	array	An array of URLs that are whitelisted to be loaded in an authorization window. For the purposes of matching against this list, query parameters are ignored.
supportedPlatforms	array (required)	An array of streaming platforms that your application supports (can process events, profiles, etc). `Required at least 1 element.` Application will be visible only to users of supported platforms. E.g. if application supports only `twitch`, then Mixer users will be unable to see or install this application. `You can not remove a support for platform if its already live, only add new platforms.` Allowed values: `twitch` - Twitch platform `youtube` - YouTube live streaming `facebook` - Facebook Live `mixer` - Mixer platform
mediaDomains	array	An array of domains that are supported CDNs for serving media that gets downloaded to the user's hard drive. Currently this is only required for stinger transition videos. The domains in this list must be the full hostname including sub-domains.
icon	string	A relative path to an app icon inside your app bundle. Your icon should be square, and we recommend an icon of at least `256 x 256`. A circular mask will be applied to your icon when it is displayed inside Streamlabs.

sources is an array that should contain objects with these properties:

Property	Type	Description
id	string (required) Min length: 6	Unique identifier of this `source`.
type	string (required)	Type of the source. Currently only `browser_source` type is supported.
name	string (required)	Name of the source. This name will be visible for clients during the `sources` installation process.
about	object (required)	Description of the source. Will be visible for clients
file	string (required)	Relative path to the file. This file will be opened as a source. Note: If you are using `webpack` or other build tool, you should provide the build artifacts folder via the `buildPath` property of the manifest. Do not provide the full path to file in this parameter! E.g. `dist/alerts.html` is wrong! You should set a `"buildPath": "dist/"` and pass only `alerts.html` to the `file` property.
initialSize	object	Scaling and default positioning of the `source`
redirectPropertiesToTopNavSlot	boolean (default: false)	If true, any time the user opens the Source Properties window on this source, they will be redirected to your `top_nav` page instead. The App Module provides a way to listen for this navigation occurring.

pages is an array that should contain these objects:

Property	Type	Description
slot	string (required)	Position on the nav bar where user can found a link to this page slot can have one of the following values: - `top_nav` - `chat`
file	string (required)	Relative path to the file. This file will be opened. Note: If you are using `webpack` or other build tool, you should provide the build artifacts folder via the `buildPath` property of the manifest. Do not provide the full path to file in this parameter! E.g. `dist/settings.html` is wrong! You should set a `"buildPath": "dist/"` and pass only `settings.html` to the `file` property.
persistent	boolean (default: false)	When enabled, this page will be loaded in the background when Streamlabs Desktop starts, and will always be running. This can be useful for listening to events in the background, but comes at the cost of decreased performance. If your page does not need to be continually available in the background, consider leaving this option off.
allowPopout	boolean (default: true)	Whether you allow this page to be popped out into an external window. Not all slots support popping out into an external window.
popOutSize	object (optional, `default: {width: 600, height: 500}`)	Size of the pop-out window with dimensions in pixels. You can also supply `minWidth` and `minHeight` here.

about is an object with these properties:

Property	Type	Description
description	string (required)	Short description of this `source`
bullets	array of strings	Short list of features that this `source` provides
bannerImage	string	Relative path to file

initialSize is an object with these properties:

This object describes the initial viewport size of the browser source. It supports 2 modes:

absolute: In this mode, width and height are specified in pixels
relative: In this mode, width and height are specified as a value between 0 and 1 representing a percentage of the end user's canvas resolution. For example, an initial size of { type: 'relative', width: 1, height: 1 } would take up the entire canvas.

Property	Type	Description
type	string (required)	Options: `absolute` `relative`
width	number	Width
height	number	Height

popOutSize is an object with these properties

This object describes the pop-out window size of the page. it contains width and height, both specified in pixels.

Property	Type	Description
width	number (default: `600`)	Width
Height	number (default: `500`)	Height