Overlays¶

An overlay is a see-through picture that sits on top of your stream: your webcam frame, the chat box, a goal bar, a "Starting soon" screen, the alert that pops up when someone cheers. You build overlays in CroStream, and OBS shows them with a browser source (an OBS source that displays a web page). CroStream serves that page from your PC, so everything you change in the editor appears in OBS straight away, and your macros can change what an overlay shows while you're live.

Open Overlays in the sidebar, under Media.

Words used on this page¶

See also the glossary.

Create an overlay¶

1. Open Overlays and click New overlay.
2. Type a Name, such as Just chatting.
3. Under Start from, pick Blank or one of the ready-made templates (see the table below).
4. Pick the Orientation: Landscape 16:9 for a normal stream, or Portrait 9:16 for vertical video.
5. Pick the Resolution. When OBS is connected, the list starts with OBS's own canvas and output sizes, so you can match OBS exactly.
6. Click Create. The overlay opens in the editor.

Templates work at any resolution: CroStream scales them to the size you pick. Everything in a template is a normal element you can change or delete.

Which size to pick¶

Make the overlay the same size as your OBS canvas (OBS → Settings → Video → Base (Canvas) Resolution). Most streams are 1920 × 1080.

• Sizes are 16:9 or 9:16 only: 1280 × 720 (720p), 1920 × 1080 (1080p), 2560 × 1440 (1440p) and 3840 × 2160 (4K), and the same four turned on their side for portrait.
• OBS can show an overlay at a different size of the same shape. The page scales evenly, so text and shapes stay sharp, but pictures are resized and may look soft.
• You can change the size later in the editor (Canvas size, with nothing selected). Elements keep their pixel positions, so you may need to move them.

The Overlays page¶

Each card shows a live preview, the overlay's size and shape, how many elements it holds and when it was last changed. Click a card to open it in the editor. Click ⋯ on a card (or right-click it) for:

Add it to OBS¶

Every overlay has its own address. OBS loads that address in a browser source. There are two ways to set it up.

The easy way: Add to OBS¶

This needs CroStream connected to OBS. See OBS Studio.

1. On the Overlays page, click ⋯ on the overlay's card, then Add to OBS.
2. Pick the Scene to add it to.
3. Check the Source name. It starts as the overlay's name.
4. Leave Width and Height at the overlay's size.
5. Leave Control audio via OBS on, so alert sounds and videos go through OBS's audio mixer and your viewers hear them.
6. Click Add source.

CroStream creates the browser source in that scene with the right settings (listed under By hand). If OBS isn't connected, the dialog says Connect OBS first and links to the OBS page. If OBS already has a source with that name, pick another name.

By hand¶

1. Copy the address: ⋯ → Copy OBS URL on the card, or Copy OBS URL at the top right of the editor.
2. In OBS, click + under Sources, choose Browser, give it a name and click OK.
3. Paste the address into URL.
4. Set Width and Height to the overlay's size (shown on its card and in the editor's toolbar, for example 1920 × 1080).

5. Use these settings, the same ones Add to OBS uses:

   OBS setting	Set it to	Why
   URL	The address you copied	The overlay's page.
   Width / Height	The overlay's size	One overlay pixel is one OBS pixel.
   Control audio via OBS	On	Alert sounds and videos appear in OBS's mixer and reach viewers.
   Use custom frame rate	Off
   Shutdown source when not visible	Off	The overlay keeps running, so alerts and timers are ready the moment the scene shows.
   Refresh browser when scene becomes active	Off	Not needed: the overlay updates by itself.
   Page permissions	Leave at the default	Your own custom widgets need it.

6. Click OK.

The address looks like this:

http://127.0.0.1:62689/overlay/overlay-01K7…

127.0.0.1 means "this PC", so OBS must run on the same PC as CroStream. When CroStream runs in browser mode, the address uses that server's address instead, and Copy OBS URL copies the right one.

The editor¶

Click an overlay to open the editor. It has four parts:

1. Toolbar (top): add elements, undo, zoom, snapping, alerts, the live preview, the save status and Copy OBS URL.
2. Layers (left): every element and group, top layer first.
3. Canvas (middle): the overlay at its real proportions. A checkerboard shows the see-through parts.
4. Inspector (right): the settings of whatever is selected, or of the overlay itself when nothing is selected.

Your changes save themselves a moment after each edit. The toolbar shows Saving…, then Saved.

The toolbar¶

Add elements¶

Click Add in the toolbar. The menu is in groups:

• Basics: Text, Rectangle, Frame, Line, Image, Video, Sound, Icon, and Group (an empty group).
• Alerts & data: Set up an alert… (the alert wizard), then Alert, Latest event, Counter, Goal bar, Event list, Chat box, Leaderboard, Stream info, Hype train, Poll and Credits.
• Time: Timer and Clock.
• Fun: Prize wheel, Particles, Chat emotes, Slideshow, Ticker and Socials.
• Your widgets: widgets you made or imported, and Make your own widget… (or Manage widgets…), which opens Widgets.

The new element lands in the middle of what you can see, already selected. For an image, video or sound, the media picker opens so you can choose a file from your media library.

What every element does and all its settings: Widgets.

Select, move, resize and rotate¶

• Click an element on the canvas or in Layers to select it. Click empty canvas or press Esc to select nothing.
• Drag it to move it. Hold Shift to move in a straight line.
• Drag a corner or edge handle to resize. Pictures, videos, icons and the prize wheel keep their proportions; hold Shift to change that while you drag. Hold Alt to resize from the center.
• Drag the round handle above the element to rotate it. Hold Shift to turn in 15° steps.
• Arrow keys nudge the selection 1 pixel; with Shift, 10 pixels.
• While you drag, a small label shows the position, size or angle.

Snapping pulls edges and centers onto the canvas edges, its center lines and the other elements, and draws a guide line when it does. Hold Ctrl (Cmd on a Mac) while dragging to skip snapping once, or turn it off with the magnet button.

Zoom and pan: Ctrl + mouse wheel zooms at the pointer. The mouse wheel on its own scrolls the view; hold Space and drag, or drag with the middle mouse button, to pan.

The inspector¶

With nothing selected, the inspector shows the overlay's own settings:

• Name.
• Canvas size.
• OBS browser source: the address, Copy URL, and the size to set in OBS.
• Theme: the overlay's colors and fonts. See Theme.
• Overlay CSS: your own styling for the whole overlay. See Custom CSS.

With an element selected, it shows, from the top:

For a group, the inspector shows its name, position, opacity and the Hidden and Locked switches; its size comes from what it holds.

Layers and groups¶

The Layers list shows every element, top layer first: what's higher in the list is drawn over what's below.

• Drag a layer up or down to change the order, or onto a group to put it inside.
• Double-click a name to rename it.
• The eye button hides or shows a layer; the lock button locks it.
• ⋯ (or right-click, on the list or the canvas) opens the layer menu:

A group moves, fades and hides everything inside it at once. That's ideal for things you show together: a "Be right back" panel with its text and picture, or a custom alert. Groups can hold groups, up to 8 levels deep. An overlay holds up to 1,000 layers.

Keyboard shortcuts¶

On a Mac, use Cmd instead of Ctrl.

Theme¶

Each overlay has a theme: eight colors (Primary, Secondary, Accent, Text, Muted, Panel, Border, Highlight) and two fonts (Heading and Body). Select nothing to see it in the inspector.

Many settings can follow a theme color or font instead of using a fixed one. Most built-in elements do this out of the box. Change the theme's Primary color, and every element that follows Primary changes with it. So you can re-color a whole overlay in seconds, or copy an overlay and give the copy a different theme.

Reset to default theme puts the original colors and fonts back.

Fonts¶

Click any Font setting to open the font picker. It lists, in one searchable list:

• Installed: fonts installed on this PC;
• Google Fonts: free fonts downloaded on demand. Picking one downloads it once into a Fonts folder in your media library, so it works on stream even without internet;
• My fonts: font files in your media library (TTF, OTF, WOFF or WOFF2).

The picker can also filter to In this overlay, Recently used and the theme's fonts (Theme heading, Theme body). Each row previews in its own font; type your own Sample text to try it.

Text effects¶

Every text setting (text elements, alert headline and message, latest event, counter, goal, event list, chat and more) has an Effects panel:

• Fill: a solid color, a gradient, or an image showing through the letters.
• Outline: up to two.
• Shadows: up to six, each with its own offset, blur and color.
• Glow and 3D depth.
• Highlight: a marker-pen band behind the words.
• Decoration: underline styles.
• Blend: how the text mixes with what's under it (Multiply, Screen, Overlay…).
• Layout: shrink to fit the box, a single line with "…", skew and stretch.
• Animation: looping effects for the whole text (Pulse, Float, Shake, Shine, Rainbow) or per letter (Wave, Bounce, Jitter, Typewriter).

Presets give you a finished look in one click: Clean outline, Neon, Gold, Retro 3D, Comic, Glass, Fire, Ice, Marker and Rainbow. Made a look you like? Save as preset to reuse it on any overlay.

Frames and lines¶

A frame is a styled box. You get one as the Frame element, and the same frame settings style the box behind many other elements: the chat box and each message, the event list and its rows, the alert's box, the goal bar's track and fill, and the "plate" behind texts like the counter.

Ten built-in frame presets get you started: Minimal, Glass, Neon, Sci-fi HUD, Esports cut, Retro pixel, Cozy rounded, Webcam frame, Speech bubble and Ticket. Save your own as presets too.

The Line element draws a line or divider: solid, dashed or dotted, with an optional gradient, ends (arrow, dot, diamond, round, square), a glow and a flowing or pulsing animation. Its width is the line's length; rotate the element for other angles.

Make overlays react to your stream¶

Overlays come alive with macros. Any macro can use the Overlays actions:

The animations are Fade, Slide up, Slide down, Slide left, Slide right, Zoom, Pop and None. Full details: Actions reference.

Data elements also update by themselves: the Counter and Goal bar show counters that the Change a counter action changes, and Latest event, Event list, Chat box and the others follow your Twitch channel.

Live state¶

What macros change is the overlay's live state. It sits on top of your design and doesn't change it:

• what a macro showed, hid or rewrote stays that way, also after you restart CroStream, until another macro changes it or you reset it;
• alerts leave nothing behind: they hide again when they're done;
• your design in the editor stays as you made it.

To go back to the design, use Reset an overlay in a macro, or the Reset live state button in the editor (it appears while Live is on). Resetting also ends an alert that's on screen.

Live preview¶

Click Live in the toolbar to see on the canvas exactly what's on stream right now: alerts as they play and what macros changed. A red Live tag shows on the canvas while it's on. Click it again to see only your design. Testing an alert turns Live on for you, so you see it play.

Custom CSS¶

If you know a little CSS you can restyle anything. Select an element and open CSS at the bottom of the inspector to style only it, or select nothing and use Overlay CSS to style the whole overlay. Many elements have named Parts you can target (turn on Show on canvas to see them), and Starters insert ready-made snippets. The box colours your CSS, suggests property names as you type, and underlines mistakes such as a misspelt property; hover the underline to see what's wrong.

The full guide is in Development → Custom CSS.

Where overlays are stored¶

Each overlay is one file in the overlays folder of CroStream's config folder. Deleted overlays go to overlays/trash. See Where files are kept and Backups.

Troubleshooting¶

Related¶

• Widgets: every built-in element and its settings
• Alerts: follower, sub, cheer and raid alerts
• Media library: the pictures, sounds, videos and fonts overlays use
• Macros and Actions reference
• OBS Studio
• Tutorial: Build an alerts overlay