SCRAPLET CONTROL STUDIO ISSUE #01 LOADING APPROVED
SYSTEM ONLINE • DEFENSES ARMED
SCRAPLET

OBS Studio Integration

Adding your Scraplet overlays to OBS Studio is straightforward, but configuring the settings correctly ensures that animations run smoothly at 60 FPS and audio alerts pass through your system mixer flawlessly.

1. Add Browser Source to Scenes

To inject your Scraplet layout overlay into your OBS workspace:

  1. Launch OBS Studio.
  2. In the Scenes list, select your target live layout scene.
  3. In the Sources dock, click the [+] icon and choose Browser.
  4. Name the source (e.g., Scraplet Alerts) and click OK.
  5. In the properties window, paste your Scraplet URL into the URL field: 
    https://scraplet.store/o/[your-unique-id]

2. Essential Settings & Dimensions

Ensure the following settings match your canvas editor profile to prevent clipping and performance stuttering:

Resolution Matching

Set the Width and Height in OBS to match your Scraplet canvas dimensions precisely. For a standard 1080p canvas, use Width: 1920 and Height: 1080.

Audio Routing via OBS

If you want to control your alert sound effects, TTS volume, or background tracks within the OBS audio mixer dock (e.g., to mute audio on certain scenes or route it to a virtual track):

  • Check the box labeled Control audio via OBS.
  • This adds a slider bar for the overlay in your OBS Audio Mixer window.
State Refreshing

Configure how the web view handles scene switching:

  • Shutdown source when not visible: Unchecked (recommended so the websocket remains active and background audio does not cut off).
  • Refresh browser when scene becomes active: Unchecked (to maintain connection state and variables).

3. Rendering Performance (Hardware Acceleration)

Scraplet overlays utilize advanced canvas rendering and GPU-accelerated CSS animations. To prevent high CPU loads or framerate drops:

  1. Open OBS Settings.
  2. Navigate to the Advanced category tab.
  3. In the Sources group, check the box labeled Enable Browser Source Hardware Acceleration.
  4. Click Apply and restart OBS Studio to apply the change.

Setup Complete! Now explore the Editor

With the entire system set up and connected, let's explore the advanced tool panels inside the visual editor to customize your overlay!

Overlay Editor Overview →