Compose and publish a full overlay

Choose simple or full

Simple overlays remain independent browser sources. Their saved configuration becomes live immediately. You do not need to convert them to use a full overlay.

Open Overlays → Editor in the dashboard for a separate document, draft and publication history. Its browser URL is different from a simple overlay URL.

• Simple browser sources

Start an editable document

1. Select your channel, then open Overlays → Editor.
2. Choose Blank, Stream companion or Community progress. Each creates an unpublished document with a fresh browser-source key.
3. Name the document. Starter headings, HTML and CSS are ordinary editable source, not a locked template.
4. Select a layer, or open the Toolbox icon in Visual mode and search widgets or Text / HTML. Adding selects the new layer and reveals its inspector. Confirm destination setup for starter widgets before expecting live data.

Native widgets

Guessing, cue player, giveaway, event feed, viewer queue, community goal and viewer-funded bounty reuse their existing channel tools.

Other widgets

Ordinary Text / HTML edits the document; Isolated HTML keeps its own HTML and CSS separate. Add a sandboxed web page, uploaded image/audio/video or a declared plugin widget. Toolbox shows plugin readiness for this channel; unready declarations can still be added as drafts.

Repeated widgets

Instances retain independent settings, style and audio. Repeated event-feed widgets with the same binding share one feed queue; use distinct bindings for distinct queues.

Edit canvas and source together

1. Ctrl-click canvas layers or Layers rows to toggle the selection. Alt-drag selects every visible mapped layer intersecting the rectangle, including parents and children. A plain click selects one layer; dragging a selected layer keeps the set.
2. Move and arrow-key nudge affect unlocked selected roots. Delete removes the selection, including locked layers, in one undoable Visual change. Style, resize, widget configuration, audio and duplicate affect only the active layer. Selecting a parent and child moves the parent once; a locked descendant can travel with it without changing its own placement settings.
3. Canvas drag and arrow-key nudge keep in-flow layers’ layout space and never change the HTML hierarchy. Return to layout removes current placement: a flow layer loses its visual translate; an absolute/fixed layer returns to static positioning with neutral edges and translate. It does not restore historical styling. Style and size remain active-layer settings. Move in HTML or a Layers row drop deliberately places selected roots before, inside or after a valid layer, or at the named overlay root. Keyboard destination controls offer the same operation. The source and Layers tree update immediately in one undoable edit.
4. Middle-drag pans the view; use Pan view for touch. Zoom and pan only inspect the scene. Shift temporarily bypasses optional snapping. Focus fills the application window; the same control restores the normal app shell. Full screen enters the browser's fullscreen mode; Escape or the same button exits it.
5. Choose HTML/CSS, then HTML or CSS, to edit the authoritative source. Your visual edits are already included; there is no Apply or Sync step. Return to Visual without losing unsaved or incomplete source, the selected source buffer or its caret. Visual edits change only intended source ranges; comments, scripts and unfamiliar syntax remain yours.
6. The toolbar names the current Visual, HTML or CSS history. Undo and Redo follow that history. Each editor has its own history. A newer overlapping edit is kept and reported as a conflict; undo that edit in its editor before retrying.

<!-- A widget's stable anchor belongs to this document. -->
<section data-blokebot-widget="YOUR-WIDGET-GUID"></section>

Style, motion and audio

The document CSS is arbitrary browser CSS. HTML scripts and event handlers execute in an isolated browser frame, not on the server or with dashboard credentials.

Native source Appearance CSS is a separate, restricted setting inherited from simple overlays. It is scoped to that widget instance; do not use it as a replacement for full document CSS.

Motion presets write editable CSS. These presets respect reduced-motion preferences. A changed widget state can trigger motion; an unchanged heartbeat does not.

Set document audio and each widget's mute/volume independently. Browser autoplay policy can prevent sound until interaction; a visual preview does not prove audible playback.

Cue-player widgets use the existing overlay-level cue owner. Advancement is duration-derived, not a guarantee that every media element played or that every widget acknowledged completion.

• Cue configuration and queue policy

Preview an unsaved draft

1. Choose Sample or Live preview to freeze the current working document, including unsaved source, widget settings and audio.
2. Inspect the actual rendered result marked Unsaved. This is not your live publication. Editing refreshes preview from a new frozen candidate; Replay repeats it without consuming production work.
3. Read diagnostics for absent source anchors, missing media, unresolved setup or failed widgets. A failed widget does not replace unrelated content.

Save and publish deliberately

1. Save stores the working draft without changing the current live publication. Incomplete drafts can be saved.
2. Use Save and publish to save and select the candidate for live delivery together. Check publication diagnostics first; ordinary unresolved content can remain visible as warnings.
3. If another editor changed the saved revision, keep your working edits and resolve the reported conflict instead of silently overwriting it.
4. Open History & live URL to retrieve the same live URL while authorized. Paste it into an anonymous OBS browser source. OBS does not need a dashboard login.

Rollback and manage history

1. Open History to inspect retained publications. Select a retained version directly to roll live delivery back without rebuilding its content.
2. Manage retention explicitly. Forgetting a retained publication does not rewrite the current draft. Later publication numbers may have gaps after live-selection changes.
3. Duplicate copies the current saved draft into an unpublished document with a new live key, preserved audio and no copied publication history. Export the working candidate instead when you need unsaved edits.
4. Archive stops live delivery; restore resumes the retained live selection. Permanent deletion requires confirmation and makes that document's key unavailable.

Transfer a working document and current media

Raw HTML/CSS/script URLs remain unchanged. They are not downloaded, rewritten or promised portable. Only managed media widgets carry uploaded bytes; historical media versions and historical publications do not transfer.

Application-managed credentials, history, private viewer data, runtime state, installation settings, storage and plugin package authority are excluded structurally. Authored source remains verbatim.

Plugin fields transfer only when their current declarations explicitly mark them portable. Destination bindings, withheld or undeclared values and unknown-plugin configuration need manual setup; widget identity, layout, audio and source are retained.

The decompressed document/manifest entry is limited by the server's existing configured per-file upload limit (50 MiB by default). Oversize imports are rejected, not truncated. This import-only rule does not limit existing drafts, ordinary Save, preview or export, and does not change media quotas.

Rejected imports commit no destination document or media changes. A committed import with a notification follow-up is already applied; do not import again to retry that notification.

1. Export from the editor to freeze its current working document, not just its last saved baseline. The ZIP contains verbatim HTML/CSS/scripts and current bytes for referenced uploaded image/audio/video widgets.
2. Select the destination channel and import the ZIP. A successful import creates one unpublished document with a fresh key, retained widget IDs/anchors and remapped managed-media references.
3. Complete each widget's destination setup, including optional withheld plugin fields. Confirm setup explicitly; changing style or audio alone does not bind source-host IDs.
4. Preview, save and publish on the destination when ready.

• Uploaded media
• Plugin widget declarations