The Application Manifest

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 usingwebpack or other build tool, you should provide the build artifacts folder via the buildPath property of the manifest. Do notprovide 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 usingwebpack or other build tool, you should provide the build artifacts folder via the buildPath property of the manifest. Do notprovide 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