Quick Start

Plugins are important tools for extending XSplit Broadcaster. XJS wraps host capabilities in a JavaScript API so plugin authors can build source visuals, extension windows, dialogs, scene tools, and integrations.

This quick start mirrors the original path: install XJS, create a source plugin, create an extension plugin, then move into deeper tutorials and examples.

Installing XSplit JS Framework

Use the latest official XSplit Broadcaster build when testing XJS plugins.

Download XSplit Broadcaster

For browser-script usage, place the browser bundle in your plugin project and load it from your HTML:

<script src="js/xjs.js"></script>
<script src="js/main.js"></script>

For bundled projects, install the package and import the framework entry from your application code:

npm install @splitmedialabs/xjs

import * as xjs from '@splitmedialabs/xjs';

xjs.ready().then(() => {
  // XJS calls are safe here.
});

If your plugin is intentionally written as browser-script code, the browser bundle still exposes the historical CommonJS-style loader:

const xjs = require('xjs');

xjs.ready().then(() => {
  // XJS calls are safe here.
});

All host-facing calls should happen after xjs.ready() resolves. That includes environment checks, window initialization, source or scene lookup, and extension setup.

Creating Your First Source Plugin

Source plugins are browser-backed visuals that can be added to a scene and included in streams or recordings. A small source can listen for stream events and update its rendered state:

<div id="stream-status">Stream is not Live</div>
<script src="js/xjs.js"></script>
<script src="js/main.js"></script>

const xjs = require('xjs');

xjs.ready().then(() => {
  xjs.ChannelManager.on('stream-start', () => {
    document.getElementById('stream-status').textContent = 'Stream is Live';
  });

  xjs.ChannelManager.on('stream-end', () => {
    document.getElementById('stream-status').textContent = 'Stream is not Live';
  });
});

For source visuals, keep the page background transparent when the scene should show only your rendered content:

body {
  background-color: transparent;
  color: white;
}

Add the page to Broadcaster by dragging the HTML file onto the stage or by adding the hosted page through Sources > Other > Webpage URL.

Creating Your First Extension Plugin

Extension plugins control or inspect Broadcaster itself. A simple extension can enumerate scenes and create buttons that switch the active scene:

const xjs = require('xjs');

xjs.ready()
  .then(() => xjs.Scene.getSceneCount())
  .then((count) => {
    for (let i = 1; i < count + 1; i += 1) {
      xjs.Scene.getById(i).then((scene) => {
        const button = document.createElement('button');
        button.textContent = `Scene:: ${i}`;
        button.addEventListener('click', () => xjs.Scene.setActiveScene(scene));
        document.getElementById('scene-id').appendChild(button);
      });
    }
  });

Add custom extensions through Extensions > Add custom extension…. Extension windows are not rendered into the scene; they are controller UIs for inspecting or manipulating Broadcaster.

Sample Snippets

Many APIs are most useful from an extension or a source properties window:

xjs.Dialog.createDialog('https://www.xsplit.com/')
  .setSize(300, 300)
  .setTitle('Sample dialog')
  .setBorderOptions(true, false)
  .setButtons(true, true)
  .show();

output.startBroadcast();
output.stopBroadcast();

if (source instanceof xjs.MediaSource) {
  source.setPlaying(true);
}

Use the generated API reference to confirm which host context can call each API.

What’s Next?

• Read the tutorial overview for source, extension, debugging, and advanced plugin topics.
• Check the API Reference for generated TypeScript API pages.
• Open Components for tested documentation component fixtures used by the regression harness.

Sample Plugins

The original documentation linked several small plugins that are still useful as examples of plugin shape:

• Scene Rotator demonstrates an extension that switches scenes on a timer.
• Source Toggler demonstrates a source plugin manipulating item layout.
• Twitch Chat Viewer demonstrates adapting an existing webpage with injected JavaScript and CSS.