​
Preview Modes

Overlays can run in three modes depending on the URL parameters. Use preview mode to test widgets without affecting live viewers.

​
Modes

ModeURL ParameterDescription
live(none)Production overlay receiving real events
editor?preview=editorWidget editor preview
studio?preview=studioFull overlay studio with test panel

​
API

SBCanvas.preview.isActive  // true if mode is 'editor' or 'studio'
SBCanvas.preview.mode      // 'live' | 'editor' | 'studio'

​
Skipping Side Effects in Preview

SBCanvas.activities.on('follow', (activity) => {
  showFollowAlert(activity);

  if (!SBCanvas.preview.isActive) {
    SBCanvas.chat.send(`Thanks for the follow, ${activity.username}!`);
  }
});

​
Immediate Readiness

In preview mode, SBCanvas.ready() fires immediately without waiting for a backend WebSocket connection. In live mode, readiness depends on session authentication — but preview skips this entirely so test events can fire instantly.

​
Mode-Specific Behavior

SBCanvas.ready(() => {
  if (SBCanvas.preview.mode === 'editor') {
    document.querySelectorAll('.drag-handle').forEach(el => {
      el.style.display = 'block';
    });
  }

  if (SBCanvas.preview.mode === 'studio') {
    document.getElementById('debug-panel').style.display = 'block';
  }
});

​
Conditional Data Loading

SBCanvas.ready(async () => {
  if (SBCanvas.preview.isActive) {
    SBCanvas.vars.set('leaderboard', [
      { name: 'TestUser1', score: 100 },
      { name: 'TestUser2', score: 75 }
    ]);
  } else {
    const data = await SBCanvas.store.get('leaderboard');
    SBCanvas.vars.set('leaderboard', data || []);
  }
});

​
API Reference

PropertyTypeDescription
preview.isActivebooleantrue if not in live mode
preview.mode'live' | 'editor' | 'studio'Current preview mode
preview.injectTestEvent(type, data)voidInject simulated event (see Test Events)