OBS Overlay Drag-and-Drop Demo

This page is a demo of a simple widget you can drag from a website straight into OBS, no extra steps required.

Drag and drop demo animation

Try dragging one of these buttons into OBS v25.0 or newer

Generic Examples Size Examples
I'm just a regular webpage 800x600
I'm a fancy third party overlay 1280x720
  1280x1080

Note: This will not work if OBS is running as Administrator.

Supported Parameters

These are standard URL parameters. They will define the initial state of the source once it's in OBS. You can then customize it as normal.

Field name Description Fallback
layer-name Name of the source in the OBS list Domain of the URL
layer-width Width of the source in the canvas OBS Canvas width
layer-height Height of the source in the canvas OBS Canvas height

For Web Developers

There are a few ways you can use this on your website.

The most basic method is a simple anchor (<a href="">). The user drags the link into OBS, and OBS will parse the URL & parameters. Browser compatibility in this area is not perfect, but this means that existing links and buttons can be dragged into OBS without modification.

Recommended: For an advanced, fancy design, you want to use the DataTransfer API. Specifically, the dragstart event. Example code below:

let dragged;
// Configure an offset from the cursor for your drag icon
const pos = 30;

// Add an event listener
document.addEventListener("dragstart", e => {
    dragged = e.target;
    // Customize the visible 'thumbnail' while dragging
    e.dataTransfer.setDragImage(document.querySelector('#dragImage'), pos, pos);
    // Set the data type, and the value. You specifically want text/uri-list.
    e.dataTransfer.setData("text/uri-list", dragged.href);
});

// Optionally, remove the focus from the button
document.addEventListener("dragend", e => dragged.blur());

// If using an anchor, block the default behaviour
document.addEventListener("click", e => e.preventDefault());