Widget
Each widget has its own function, such as displaying tip messages, reaching goals, countdown timers, and much more. Let's explore the widgets!
Copy the widget URL and paste it into the source on the OBS browser to display the widget on your stream screen. See the steps here.
Custom Themes
Beautify your widget with theme customization settings that allow you to change the widget's appearance. There are many available stock templates to match your stream's branding. These stocks can also be further adjusted. Press ctrl+s to save.
Theme settings will be applied uniformly to all widgets with the same theme. Create and express your creativity through your widget's appearance.
| Feature | Description |
|---|---|
| Color | Set the background, text, highlight, and border colors. Use at least two or more different colors for these four color inputs and avoid using the same color for the background and text. |
| Border | Border radius controls how rounded the edges are. Border thickness determines how thick the widget's outer lines are. |
| Font | The font uses the Google Fonts library. Choose a font family, then select the variant and size. |
Font size will determine the size of the widget. Sometimes, enlarging the widget in the OBS browser source can make the widget look pixelated. Use the font size to anticipate this.
Collections
You can add collections that allow you to display different widget themes without manually changing them repeatedly. Have several series on your stream? Tired of using the same design style? Just create a new one or choose from the templates. You can open the widget collection on the editor page by pressing ctrl+o.
Canvas
Preview the widget's appearance.
| Feature | Description |
|---|---|
| Canvas settings | In the canvas settings, you will find width and height options to adjust the canvas size. You can also drag the canvas directly. Other settings include the background color to change the canvas background. |
| Zoom in/out canvas | Use mouse scroll up/down, and to reset to fit size, press shift+f. |
| Realtime/Preview Mode | To indicate which data is currently being displayed. In some widgets (alert, leaderboard, goal), there are settings for preview data. |
When you are on the settings tab, the canvas shows preview data (preview mode). When you are on the control tab, the canvas shows realtime data (realtime mode). You can also switch between them by clicking the preview/realtime button.
Control
This section is for managing widgets; you can perform live tests here to see how the widgets work and look.
Widget URL
Copy-paste this URL into OBS Custom Docks for easy widget control without having to open an external browser. Learn how to use it here.