Widgets

A widget is a single element you place on an overlay in the Overlay Editor — a piece of text, an image, an alert, a progress bar, a chat box, and so on. You position, size and style widgets on the canvas, and they render live in OBS through your overlay's browser source.

There are three things to know about widgets in Streamerly:

	What it is	Where it lives
Primitives	First-party building blocks that ship with Streamerly. Available to everyone, no install needed.	Add Widget → Primitives
Custom widgets	Widgets built in the Widget Creator — by you, or by other creators you install from.	Add Widget → Custom widgets
The Workshop	A gallery where creators publish their widgets and you install widgets made by others.	Sidebar → Widget Workshop
The Widget Creator	The in-app editor where you build your own custom widgets in code.	Sidebar → Widget Creator

Pick your path

I just want to use widgets on my overlay. Start with the Primitives — Streamerly ships a full set of building blocks (Colour, Image, Text, Progress Bar, Alert, Group, and more). Drop them onto your overlay from Add Widget → Primitives and configure them in the panel on the right. No coding, no installs.

I want more widgets than the built-in ones. Browse the Widget Workshop — a growing gallery of widgets published by the community. Find one you like, install it, and it appears under Add Widget → Custom widgets ready to drop onto any overlay. See Installing widgets.

I want to build my own widget. Open the Widget Creator and write a widget in TypeScript with live preview, a property panel for the controls your viewers configure, and bindings to live stream events. New to it? Follow Build your first widget.

How the pieces fit together

                ┌─────────────────────┐
                │   Widget Creator    │   ← build a widget (code + properties + bindings)
                └──────────┬──────────┘
                           │  Build  →  Publish
                           ▼
                ┌─────────────────────┐
                │   Widget Workshop   │   ← others browse + install your widget
                └──────────┬──────────┘
                           │  Install
                           ▼
                ┌─────────────────────┐
                │   Overlay Editor    │   ← place it (alongside the Primitives)
                └─────────────────────┘

Whether a widget is a first-party Primitive, something you built, or something you installed, it behaves the same once it is on your overlay: you configure it through its properties and it renders live in OBS.

Next steps

• Primitives — the built-in widgets, available to everyone.
• Widget Workshop — browse, install and share widgets.
• Widget Creator — build your own.
• Tutorials — hands-on, start to finish.