Overview
The Alert Designer was rebuilt in v1.2.58 with a new canvas engine based on react-moveable. It provides a full visual editor for creating stream alerts — the pop-up graphics and sounds that play when someone follows, subscribes, gifts, or triggers a custom event.
Alerts are rendered by a standalone alert engine that runs on VMSC’s overlay server. You embed the alert URL in OBS as a browser source, and VMSC pushes alerts to it in real time.
Canvas Editor
The canvas is the primary workspace where you lay out alert elements. The react-moveable integration provides professional-grade manipulation tools:
Drag, Resize & Rotate
- Drag — Click and drag any element to reposition it on the canvas.
- Resize — 8-direction handles (corners + midpoints) let you scale elements precisely.
- Rotate — A rotation knob above the selection box lets you rotate elements to any angle.
Multi-Select
Hold Shift and click multiple elements to select them as a group. Grouped elements can be moved, resized, and rotated together.
Zoom & Pan
Use the scroll wheel to zoom in and out of the canvas. Hold Space and drag to pan the viewport. The current zoom level is displayed in the bottom-right corner.
Snap Guidelines
As you drag elements, snap guidelines appear when edges or centers align with other elements or the canvas boundaries. This helps you achieve pixel-perfect alignment without manually entering coordinates.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Ctrl+C / Ctrl+V | Copy / Paste selected elements |
| Delete | Remove selected elements |
| Ctrl+Z / Ctrl+Y | Undo / Redo |
| Ctrl+A | Select all elements |
| Arrow keys | Nudge selected elements by 1px (hold Shift for 10px) |
File Drag-and-Drop
Drag image or video files from your desktop directly onto the canvas. VMSC uses
saveAssetFromBuffer to persist the file into the assets directory, then creates
the corresponding element on the canvas at the drop position. Supported formats include PNG,
JPG, GIF, WebP, MP4, and WebM.
Alert Inspector
When you select an element on the canvas, the AlertInspector panel opens on the right side. The inspector is divided into color-coded sections based on the property type:
| Section | Color | Properties |
|---|---|---|
| Transform | Cyan | X, Y, Width, Height, Rotation, Scale |
| Text | Purple | Font, Size, Weight, Color, Alignment, Line Height, Letter Spacing |
| Image | Green | Source, Fit, Opacity, Border Radius |
| Video | Orange | Source, Autoplay, Loop, Mute, Volume |
| Shape | Pink | Type (rect/circle/polygon), Fill, Stroke, Stroke Width |
| Style | Blue | Opacity, Shadow, Blur, Border, Background |
Only the sections relevant to the selected element type are visible. For example, selecting a text element shows Transform, Text, and Style — but not Image, Video, or Shape.
Layers Panel
The Layers panel on the left side lists every element in the alert, ordered by z-index. You can:
- Drag layers to reorder them (higher = in front).
- Toggle the visibility icon to hide/show individual elements without deleting them.
- Click a layer to select the corresponding element on the canvas.
- Double-click a layer name to rename it.
Animations
Each element can have an enter animation and an exit animation. VMSC ships with a large library of built-in animations:
Enter Animations (25+)
Enter animations play when the alert appears. Examples include: Fade In, Slide In Left, Slide In Right, Slide In Up, Slide In Down, Zoom In, Bounce In, Flip In X, Flip In Y, Rotate In, Elastic In, Back In, Light Speed In, Roll In, Swing In, Tada, Pulse, Wobble, Jello, Rubber Band, Head Shake, Hinge, Jack In The Box, Flash, and Heart Beat.
Exit Animations (16+)
Exit animations play when the alert is dismissed. Examples include: Fade Out, Slide Out Left, Slide Out Right, Slide Out Up, Slide Out Down, Zoom Out, Bounce Out, Flip Out X, Flip Out Y, Rotate Out, Back Out, Light Speed Out, Roll Out, Hinge Out, Shrink, and Dissolve.
Each animation can be configured with a duration (ms) and a delay (ms) to fine-tune the timing.
Standalone Alert Engine
Alerts are rendered by a standalone engine served at:
/alerts/{instanceId}?alert={alertId}This URL is what you add as a browser source in OBS. The engine handles:
- Sequential queue — Multiple alerts are queued and played one at a time in order.
- Sound sync — Alert sounds are synchronized with the enter animation so they play at the right moment.
- Template variables — Use placeholders like
{user},{amount}, and{message}that are replaced with real event data at render time. - Cloudflare tunnel — The alert URL works through the tunnel, so OBS on a remote machine can use it.
Auto-Triggers from Stream Events
Alerts can be linked to stream events so they fire automatically. For example, you can configure a follow alert to play every time a new viewer follows, or a gift alert that triggers only for gifts above a certain value. Event binding is configured in the alert settings panel.