Alert Designer Quick Start

Opening the Alert Designer

The Alert Designer is a built-in visual editor for creating overlay alerts.

1. In the VMSC sidebar, click Alert Designer.
2. The editor opens with a blank canvas. Existing alerts are listed in the left panel — click one to edit it, or click New Alert to start fresh.

Adding Elements

Click the + Add Element button in the toolbar to insert one of the following element types onto the canvas:

Each element appears as a layer in the left panel. Drag layers to reorder the z-index.

Using the Canvas

The canvas is the central work area where you position and size alert elements.

• Drag an element to move it. Hold Shift to constrain movement to horizontal or vertical axes.
• Resize by dragging a corner or edge handle. Hold Shift to preserve aspect ratio.
• Rotate by hovering just outside a corner handle until the rotate cursor appears, then drag.
• Multi-select by clicking elements while holding Ctrl, or draw a selection box by clicking empty space and dragging.
• Zoom with the scroll wheel. Pan by holding Space and dragging.
• The canvas resolution matches the configured alert size (default 1920 × 1080). Change it in Alert Settings > Canvas Size.

Inspector Panels

Select an element on the canvas to reveal its inspector panels on the right side. The panels available depend on the element type.

Transform

Position (X, Y), size (W, H), rotation (degrees), and anchor point. Available for all element types.

Text

Font family, size, weight, color, alignment, line height, letter spacing, text stroke, and drop shadow. Supports multi-line text and template variables.

Image

Source file or URL, fit mode (cover, contain, stretch), border radius, and opacity.

Video

Source file or URL, autoplay, loop, muted toggle, and playback speed.

Shape

Shape type (rectangle, ellipse, custom path), fill color, stroke color and width, border radius, and opacity.

Style

Shared visual properties: opacity, blend mode, CSS filters (blur, brightness, contrast, saturate), and box shadow. Available for all element types.

Enter and Exit Animations

Each element can have an enter animation (how it appears) and an exit animation (how it disappears).

1. Select an element and open the Animations panel in the inspector.
2. Choose an Enter animation from the preset list (e.g., Fade In, Slide Up, Bounce, Scale Up, Spin In).
3. Choose an Exit animation (e.g., Fade Out, Slide Down, Shrink, Fly Out).
4. Configure Duration (ms), Delay (ms), and Easing curve for each.

Template Variables

Text elements can include template variables that are replaced with real data when the alert fires. Wrap variable names in curly braces.

Variables that have no value for a given event are replaced with an empty string.

Previewing Alerts

Click the Preview button (play icon) in the Alert Designer toolbar to simulate the alert with sample data.

• The preview plays the full animation sequence: enter → hold → exit.
• Template variables are filled with placeholder values so you can see the layout with realistic text lengths.
• Adjust the Hold Duration (how long the alert stays on screen between enter and exit) in Alert Settings.

Adding to OBS as a Browser Source

Alerts are served by the VMSC overlay server and displayed in OBS via a browser source.

1. In OBS, add a new Browser Source.
2. Set the URL to: http://localhost:7890/alerts/{instanceId}?alert={alertId}
   • {instanceId} — your VMSC instance ID (shown in Settings > General).
   • {alertId} — the alert's unique ID (shown in the Alert Designer left panel).
3. Set the width and height to match your alert canvas size (e.g., 1920 × 1080).
4. Check Shutdown source when not visible to save resources.
5. Check Refresh browser when scene becomes active to ensure a clean state.

Auto-Trigger from Stream Events

To display an alert automatically when a stream event occurs, create a rule with a Show Alert action:

1. Open the Rules page and create a new rule.
2. Set the Trigger to the desired event (e.g., gift, subscribe, cheer).
3. Add an action: Show Alert.
4. Select the alert you created in the Alert Designer from the dropdown.
5. Save the rule. When the event fires, the alert plays in the OBS browser source.

Sound Synchronization

Alerts can include a synchronized sound effect that plays alongside the visual animation.

• In the Alert Designer, open Alert Settings > Sound.
• Select a local audio file (MP3, WAV, or OGG) or leave empty for a silent alert.
• Adjust the Volume slider (0–100%).
• Set an optional Sound Delay (ms) to offset the audio relative to the enter animation start. Use this to sync a sound hit with a specific moment in the animation.
• Sound is played through the OBS browser source audio, so make sure your OBS audio monitoring is configured to capture browser source output.