Widget API

Every widget runs with the Breezy Widget API already loaded. There is nothing to import: the API is exposed as globals on the widget's page.

Global	What it gives you
breezy	Fields, media, palettes, models and control over widgets in the overlay.
twitch	The Twitch API and EventSub events for the connected channel.
BreezyReact	A provider and hooks for widgets written with React.
ModelType	The model type constants.
ObjectClassificationModelObserver	Watches an object classification model and reports when labels are detected.

Reference

• Fields — read the values the streamer configured for your widget.
• Media — load images, videos and sounds from the streamer's library.
• Palettes — extract colors from an image.
• Models — read models and react to their predictions.
• Widgets — move, resize, show and hide widgets in the overlay.
• React — hooks that re-render your widget when its data changes.
• Twitch — the Twitch API and events.

Modes

A widget runs either inside the overlay editor or live on stream. Use breezy.mode to tell them apart, for example to show placeholder content while the streamer is designing.

breezy.mode.design: boolean
breezy.mode.stream: boolean

if (breezy.mode.design) {
	showSampleAlert()
}

Types

The API is fully typed. Common types used across the reference:

type ID = string

interface Dictionary<T> {
	[index: string]: T
}

type Size = {
	w: number
	h: number
	width: number
	height: number
}

type Point = {
	x: number
	y: number
}

type Frame = {
	x: number
	y: number
	w: number
	h: number
}

type Selector = string | HTMLElement | ArrayLike<HTMLElement>