​
Data Binding

Connect DOM elements to data sources and they update automatically when values change.

​
HTML Attribute Binding

Add data-sbc-bind to any element. The SDK scans for these on load and updates textContent whenever the bound value changes: 
<span data-sbc-bind="session.follower_count"></span>
<span data-sbc-bind="goals.tips.current"></span>
<span data-sbc-bind="vars.score"></span>

​
JavaScript Binding

const el = document.getElementById('follower-count');
SBCanvas.bind.bind(el, 'session.follower_count');

​
Auto-Scan

The SDK automatically scans the DOM on load. If you add elements dynamically, trigger a re-scan: 
document.getElementById('container').innerHTML = `
  <span data-sbc-bind="vars.combo"></span>
`;
SBCanvas.bind.scan(document.getElementById('container'));

​
Binding Expressions

Paths resolve against these data sources:
PrefixSourceUpdates on
session.*Session state (follower count, etc.)session:update
goals.*Goal progressgoal:update
fields.*Widget custom field valueswidget:field_change
vars.*Runtime variablesvars.set() calls
<p>Followers: <span data-sbc-bind="session.follower_count"></span></p>
<p>Goal: <span data-sbc-bind="goals.tips.current"></span> / <span data-sbc-bind="goals.tips.target"></span></p>
<p>Score: <span data-sbc-bind="vars.score"></span></p>

​
Cleanup

Remove all bindings under a root element: 
SBCanvas.bind.unbindAll(document.getElementById('my-widget'));
Or clear all bindings: 
SBCanvas.bind.unbindAll();
Bindings on removed DOM nodes are cleaned up automatically via MutationObserver.

​
Example: Live Stats Display

<div id="stats">
  <p>Followers: <span data-sbc-bind="session.follower_count"></span></p>
  <p>Subscribers: <span data-sbc-bind="session.subscriber_count"></span></p>
  <p>Viewers: <span data-sbc-bind="session.viewer_count"></span></p>
</div>
No JavaScript needed. Values update reactively when session data changes.

​
Example: Dynamic Binding with Vars

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

  SBCanvas.activities.on('subscribe', () => {
    const combo = (SBCanvas.vars.get('combo') || 0) + 1;
    SBCanvas.vars.set('combo', combo);
    // <span data-sbc-bind="vars.combo"></span> updates automatically
  });
});

​
API Reference

MethodDescription
SBCanvas.bind.bind(el, expression)Bind an element to a data expression
SBCanvas.bind.unbindAll(root?)Remove bindings under root (or all if omitted)
SBCanvas.bind.scan(root?)Scan for data-sbc-bind attributes under root