Counter
The Counter widget displays a number — a score, a stat, a vote count, a fundraising total — with three different ways of driving that number, plus shared formatting, an on-change animation, and conditional color/label states.
Adding a Counter
Click Counter in the Widgets panel in the sidebar — it's placed immediately at the centre of the canvas, already selected, defaulting to Manual mode.
Mode
Select the Counter and open its Design tab. Mode is the first choice, and determines which panel appears below it:
| Mode | Behavior |
|---|---|
| Manual | An operator controls the value live — via the control app, +/− steps, or typing a number directly |
| Auto | Animates from a start number to an end number over a fixed duration, once |
| Data | Polls a live JSON or REST feed and displays whatever value it returns |
Manual mode
| Field | Description |
|---|---|
| Current Value | The value the counter shows when it first goes on-air |
| Bounds (Min / Max) | Optional limits on how far an operator can step the value |
| Step Sizes | A set of step amounts, e.g. +1, +2, +3. Presets are provided for common sports: Soccer/Hockey (1), Basketball (1, 2, 3), American Football (1, 2, 3, 6, 7), Cricket (1, 2, 3, 4, 6), Rugby (3, 5, 7), Esports/kills (1) — or build a custom set. Tap a step to make it the default used by +/− and arrow keys. |
| Operator Permissions | Allow the operator to enter a custom step, or lock them to the defined step set |
| Reset Value | The value restored when the counter is reset |
Auto mode
| Field | Description |
|---|---|
| From / To | The start and end numbers |
| Duration | 0.5–60 seconds |
| Easing | Linear (constant speed), Ease Out (fast → slow), or Ease In-Out (slow → fast → slow) |
| Loop | Off by default — turn on to repeat the animation continuously |
Ease Out feels the most natural for most use cases — a number that slows down as it lands reads as more deliberate than one that stops abruptly.
Data mode
| Field | Description |
|---|---|
| Feed URL | Must return JSON or a plain numeric body. The endpoint's CORS policy must allow the browser source. |
| JSON Field | A dot-path into the response (e.g. data.candidate.votes) — leave blank if the body is a bare number |
| Poll Interval | 1–60 seconds |
| Fallback Value | Shown if the feed has been unreachable for 5+ poll cycles. Leave blank to keep the last known value. |
In Data mode, any manual +/−/Set an operator applies is temporary — it's overwritten by the feed's value on the next poll tick.
Number formatting
These apply regardless of mode:
| Field | Options |
|---|---|
| Format | Number, Percent, or Currency |
| Currency | Any of 18 supported codes (USD, EUR, GBP, JPY, and more) — only shown when Format is Currency |
| Decimal Places | Auto, 0, 1, 2, or 3 |
| Thousands Separator | Off, or comma / period / space style (e.g. 1,000) |
| Leading Zeros | Pad short numbers with zeros, 0–8 digits (e.g. 007) |
| Prefix / Suffix | Static text before/after the number, up to 8 characters each |
On-change animation
| Option | Description |
|---|---|
| None | The number updates instantly |
| Number Roll | Digits animate to the new value, 50–800ms (capped to stay legible during rapid updates) |
Threshold states
Add up to 5 rules that recolor the number, override its label, or pulse it when the value crosses a condition — for example, turning green and pulsing once a fundraising goal is hit. Each rule has:
- A comparison (
≥,>,=,<,≤, orbetween) and value(s) - Text color and background color
- A label override (replaces the suffix, e.g.
WINNER) - Pulse on enter and Fire once toggles
Rules are evaluated in order — the first match wins — and can be reordered.
Off-air behavior
What happens when the graphic goes off-air:
| Option | Description |
|---|---|
| Pause | No-op for counters — there's no continuous state to freeze |
| Continue | Keeps accepting updates while off-air — right for cumulative totals that span multiple takes |
| Reset | Restores the Reset Value — right for per-segment counters that should start fresh each time |
Bind
From the Bind tab, a Counter can expose Value, Reset value, Format, Prefix, and Suffix as operator controls or data bindings — plus the fields shared with other objects (Text, Font family, Font size, Background, Fill color, Stroke color, Stroke width). See Bind for how exposing, locking, and control types work.