@obslysdk/devtools

This library adds an in-app Devtools overlay (floating button + panel) for the @obslysdk/browser SDK.

It is designed to be development-only.

Features

• Debugging Tools: Provides a set of tools for debugging and analyzing the application.
• Automatic Start (when present): When enabled via @obslysdk/browser config, the SDK will start Devtools automatically if this package is loaded.

How it works

@obslysdk/devtools is a side-effect module:

• When you import "@obslysdk/devtools", it registers a global window.ObslySDKDevtools (with setConfig, startDevtools, stopDevtools, notifyRefresh).
• @obslysdk/browser (internally, @obslysdk/core) will look for that global and start/stop Devtools based on your config.devtools.enable value.

Because of that, you typically want to load devtools before calling init() (so the SDK can find the module during initialization).

Installation

To enable this functionality, simply install the @obslysdk/devtools package as a development dependency:

npm install --save-dev @obslysdk/devtools

Usage

Since this library is intended for development use only, we recommend using a dynamic import to ensure it is not included in your production bundle.

Recommended (Conditional Import + single init)

This pattern ensures that @obslysdk/devtools is only loaded during development and that you don’t duplicate your init() call.

import { init } from '@obslysdk/browser'

const isDev = import.meta.env.DEV // For Vite
// const isDev = process.env.NODE_ENV === 'development'; // For Webpack/CRA

async function initObslySDK() {
  if (isDev) {
    // Dev-only: keeps Devtools out of production bundles
    await import('@obslysdk/devtools')
  }

  await init({
    ObslyKey: 'YOUR_KEY',
    instanceURL: 'YOUR_URL',
    config: {
      devtools: { enable: isDev }
    }
  })
}

initObslySDK()

Recommended project structure (obslysdk-init.ts)

In apps, we recommend putting the SDK bootstrap logic in one place and importing/calling it from your app entry point.

obslysdk-init.ts:

import { init } from '@obslysdk/browser'
import '@obslysdk/rules'

const isDev = import.meta.env.DEV

export async function initObslySDK() {
  if (isDev) await import('@obslysdk/devtools')

  await init({
    ObslyKey: 'YOUR_KEY',
    instanceURL: 'YOUR_URL',
    config: { devtools: { enable: isDev } }
  })
}

main.tsx:

import { initObslySDK } from './obslysdk-init'
initObslySDK()

Simple (Static Import)

Warning: Using a static import will include the Devtools code in your production bundle, increasing its size.

import '@obslysdk/devtools'
import { init } from '@obslysdk/browser'

init({
  // ... configuration options
  config: {
    devtools: { enable: true }
  }
})