​
Runtime Variables

SBCanvas.vars is an in-memory key-value store that persists across widget re-renders but resets when the overlay disconnects. Use it for runtime state that doesn’t need server persistence. For data that should survive disconnects, use SBCanvas.store instead.

​
Setting Variables

SBCanvas.vars.set('comboCount', 0);
SBCanvas.vars.set('lastTipper', 'SomeUser');
SBCanvas.vars.set('theme', { bg: '#1a1a2e', accent: '#8B5CF6' });

​
Reading Variables

const count = SBCanvas.vars.get('comboCount');
const all = SBCanvas.vars.getAll(); // { comboCount: 0, lastTipper: 'SomeUser', ... }

​
Deleting Variables

SBCanvas.vars.delete('comboCount');
SBCanvas.vars.clear(); // remove all

​
Example: Combo Counter

SBCanvas.ready(() => {
  SBCanvas.vars.set('combo', 0);

  SBCanvas.activities.on('subscribe', (activity) => {
    const combo = (SBCanvas.vars.get('combo') || 0) + 1;
    SBCanvas.vars.set('combo', combo);
    document.getElementById('combo').textContent = combo;

    if (combo >= 10) {
      SBCanvas.confetti({ count: 150 });
      SBCanvas.vars.set('combo', 0);
    }
  });
});

​
Example: Cross-Widget State

Widget A sets a variable: 
SBCanvas.vars.set('currentSong', 'Artist - Title');
Widget B reads it: 
SBCanvas.setInterval(() => {
  const song = SBCanvas.vars.get('currentSong');
  if (song) display.textContent = song;
}, 1000);

​
API Reference

MethodReturnsDescription
vars.set(key, value)voidStore a value
vars.get(key)anyRetrieve a value
vars.delete(key)voidRemove a key
vars.getAll()objectGet all variables as a plain object
vars.clear()voidRemove all variables

​
Vars vs Store

varsstore
Persists across re-rendersYesYes
Persists across disconnectsNoYes
AsyncNoYes
Server-backedNoYes
Use forTemporary runtime statePermanent widget data