​
Binding Sources

Binding expressions follow the format source.path.to.value. The first segment determines which data source is queried.

​
session.*

Maps to the live session state received from the backend: 
<span data-sbc-bind="session.follower_count"></span>
<span data-sbc-bind="session.subscriber_count"></span>
<span data-sbc-bind="session.channel_name"></span>
Updates trigger on session:update events from the WebSocket connection.

​
goals.*

Maps to goal progress data. Access goals by index or name: 
<span data-sbc-bind="goals.0.current"></span>
<span data-sbc-bind="goals.0.target"></span>
Updates trigger on goal:update events.

​
fields.*

Maps to widget custom field values. The first segment after fields is the widget type or ID: 
<span data-sbc-bind="fields.alert-box.color"></span>
<span data-sbc-bind="fields.goal-bar.title"></span>
Updates trigger on widget:field_change events (fired by SBCanvas.setField()).

​
vars.*

Maps to runtime variables set with SBCanvas.vars.set(): 
SBCanvas.vars.set('score', 42);
// <span data-sbc-bind="vars.score"></span> → "42"

SBCanvas.vars.set('player', 'CoolViewer');
// <span data-sbc-bind="vars.player"></span> → "CoolViewer"
Updates trigger immediately when vars.set() is called.

​
Resolution Order

When a binding expression doesn’t match any known prefix (session, goals, fields, vars), it falls back to resolving against the session state directly: 
<!-- These are equivalent -->
<span data-sbc-bind="session.follower_count"></span>
<span data-sbc-bind="follower_count"></span>
Prefer explicit prefixes for clarity.

​
Null Handling

If a binding resolves to null or undefined, the element’s textContent is set to an empty string. No error is thrown.