Value Widget

Show a channel KV value that updates live.

Quick setup

1. Open the Synchra Dashboard.
2. Go to Widgets.
3. Create a Value widget, or choose the Death Counter preset.
4. Select the KV key to display.
5. Set the label and fallback value.
6. Click Widget URL and add it to OBS as a Browser Source.

Command counters

The Death Counter preset displays the deaths command counter. Use Count variables to update, reset or read it from chat commands.

Fallback

The fallback is shown when the key is missing, expired or null.

Custom CSS

CSS order: built-in CSS, Theme CSS, then Widget CSS.

<section class="value-widget">
  <span class="value-widget__label">Deaths</span>
  <span class="value-widget__value">5</span>
</section>

Class	Description
.value-widget	Root container.
.value-widget__label	Optional label text.
.value-widget__value	KV value or fallback.

Variable	Controls
--value-widget-label-color	Label color.
--value-widget-value-color	Value color.
--value-widget-background-color	Background color.
--value-widget-border-color	Border color.
--value-widget-border-width	Border width.
--value-widget-border-radius	Corner radius.
--value-widget-padding	Inner spacing.
--value-widget-gap	Space between label and value.
--value-widget-label-font-family	Label font.
--value-widget-value-font-family	Value font.
--value-widget-label-font-size	Label size.
--value-widget-value-font-size	Value size.
--value-widget-min-width	Minimum width.
--value-widget-max-width	Maximum width.

Custom font

Get a font import, then:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

.value-widget {
  --value-widget-label-font-family: "Roboto", sans-serif;
  --value-widget-value-font-family: "Roboto", sans-serif;
}