Widgets¶

A widget is a kind of element you can put on an overlay: a text, a chat box, a goal bar, a prize wheel. CroStream comes with 27 built-in widgets. Each one you place on an overlay is an element with its own settings, so you can have three Text elements that all look different.

This page covers the Widgets library (sidebar → Media → Widgets), then lists every built-in widget with what it's for and every setting it has.

The Widgets library¶

The page has two lists:

• Your widgets: widgets you made, cloned or imported. Click one to open it in the widget editor. Each card says which overlays use it.
• Built in: the 27 widgets that come with CroStream, with a live preview of each.

Use Search widgets to find one by name, description or tag, and click tags to filter by them.

You don't need this page to use widgets: every widget is in the overlay editor's Add menu. Come here when you want to change how a widget works inside, or share one.

Clone a built-in widget¶

A built-in widget has settings for the usual changes (fonts, colors, sizes, frames). When you want more, such as a different layout or extra pieces, clone it: you get your own copy whose HTML, CSS and JavaScript you can change.

1. Find the widget under Built in and click Clone.
2. Give your copy a name and click Clone.
3. The widget editor opens. Change it, then click Save.

Your copy appears under Your widgets and in the overlay editor's Add menu under Your widgets. The built-in stays as it was.

Editing a widget's code is covered in Development → Write your own widgets.

Make your own¶

New widget starts an empty widget and opens the widget editor. The editor has tabs for the HTML, CSS and JS, the Fields (the settings streamers see in the inspector), Data & sample, Settings (name, icon, tags, size) and History (earlier saved versions you can restore), with a live preview beside them. The code tabs are a real code editor: it colours the code, suggests names as you type, underlines mistakes (hover one to see what's wrong and, often, the fix), and tidies messy code with Format. The full guide is Development → Write your own widgets, and its code editor section covers every check and shortcut.

Share a widget¶

Click ⋯ on one of your widgets (or right-click it):

To use a widget someone sent you, click Import at the top of the page and choose the .slwidget file (you can pick several). It's added to Your widgets and the overlay editor's Add menu.

On Linux¶

The Linux desktop app can't safely run the code of your own widgets, so those elements show a note in the editor instead of their content: Custom widget code doesn't run in the Linux desktop app. They work normally in OBS, and you can preview them in the browser UI (browser mode). Built-in widgets work everywhere.

Built-in widgets¶

Every widget shares the common settings in the inspector (Name, position, size, Rotation, Opacity, Hidden, Locked, CSS; see The inspector). The tables below list what each widget adds, by the section it's under in the inspector.

Many settings can follow the overlay's theme. Text settings have a full Effects panel, and Frame, Plate, Box and Row frame settings open the frame editor. A "plate" or frame left empty draws nothing.

Placeholders in braces, like {user}, are replaced with real values on stream. Each widget lists the ones it understands.

Text¶

Text drawn by the browser, so it stays sharp at any size.

To change the words from a macro, use Set overlay text.

Rectangle¶

A filled box with an optional border and round corners: Fill, border Width and Color, and Corner radius. For anything fancier, use a Frame.

Frame¶

A styled box for panels, webcam frames, speech bubbles, HUD corners or your own frame image. It has one setting, Frame, which opens the full frame editor with its presets.

Line¶

A line or divider. Its width is the line's length; rotate the element for other angles.

Image¶

A picture from your media library: Image, Fit (Fit inside, Fill and crop or Stretch) and Corner radius. Animated GIFs play.

Video¶

A video from your media library.

Its sound goes to OBS when the browser source has Control audio via OBS on. To restart it from a macro, use Play media or fire an effect.

Sound¶

A sound from your media library: Sound, Play when shown, Loop, Volume. It's invisible in OBS (the editor shows a marker). Use it in a group with other elements to play a sound when the group shows, or play it from a macro with Play media or fire an effect.

Icon¶

A single icon: a platform logo (Twitch, YouTube, Kick, Discord, X, TikTok, Instagram, Facebook, Threads, Bluesky, GitHub, Patreon, Ko-fi, PayPal, Spotify, Steam, Xbox, PlayStation, Nintendo, Website) or a symbol (heart, star, bolt, crown, trophy, gift, music, microphone, camera, gamepad, chat, fire).

Settings: Icon, Color (leave it empty to use the brand's own color for logos), Glow and Glow color, and a Plate behind it, for example a circle.

Alert¶

A ready-made alert: a picture or video, a headline, a message and a sound. Keep it Hidden in the design; the Show an alert action brings it up. The easiest way to make one is the alert wizard.

Placeholders are the ones of the event that shows the alert. See Alerts.

Latest event¶

The newest follower, subscriber, cheer and so on, for example "Latest follower: haliebug13".

Counter¶

A number that your macros change with the Change a counter action, such as deaths, wins or hugs.

Goal bar¶

A bar that fills toward a goal as a counter grows. For a sub goal, make a macro that adds 1 to a counter on every sub, and point the goal bar at that counter.

Event list¶

The latest follows, subs, cheers and raids, newest first.

Chat box¶

Your Twitch chat on stream.

Leaderboard¶

Your top supporters.

Points and watch time come from your viewer database.

Stream info¶

Your stream's title, category, uptime and viewer count, from Twitch.

Hype train¶

The running Twitch hype train: its level and progress toward the next.

Poll¶

The current Twitch poll or prediction, with a live bar for each choice.

Credits¶

An end-of-stream roll of this stream's followers, subscribers, gifters, cheerers, raiders and chatters, like film credits. Put it on your "Ending" scene.

Timer¶

A countdown, a stopwatch, or a countdown to a time of day.

A countdown or stopwatch runs when a macro starts it with Control a timer (start, pause, resume, reset, set, add, subtract). For a subathon, add time on every sub or cheer and set Longest countdown as a cap. A countdown to a time runs by itself. Until Count down to holds a time it can read, it shows --:--, and on the overlay editor's canvas a note says Set a target time (the note never shows on stream).

From 24 hours on, every format shows the days first: 3d 04:12:09, or 3 d 4 h 12 min 9 s in words.

Clock¶

The time and/or date on your PC.

Prize wheel¶

A wheel of prizes. The Spin the wheel action picks a slice and every overlay showing the wheel spins to it. The bigger a slice's weight, the likelier it wins. Later steps in the macro can use {result}.

Particles¶

Confetti, sparkles, fireworks, snow, hearts or emoji. Make it as big as the whole canvas.

Chat emotes¶

The emotes people use in chat rain, float, bounce or burst across this element. Size it over the whole canvas or part of it.

Settings: Motion (Rain down, Float up, Bounce around, Burst out), Size, Unicode emoji (also throw emoji people type), Most at once, Stays for and Speed.

Slideshow¶

The pictures and videos of one media library folder, one after another. Pictures show for the interval; videos play to their end. Sounds in the folder are skipped.

Ticker¶

A scrolling line of your own messages and, if you like, your latest follows, subs and cheers.

Socials¶

Your social handles with their icons, one at a time or all at once.

Related¶

• Overlays: placing, arranging and styling elements
• Alerts: the alert wizard and the alert queue
• Media library
• Development → Write your own widgets
• Development → Overlay data: the live data widgets read