Overlay Editor Overview

The Scraplet Overlay Editor is a professional, browser-based, drag-and-drop studio designed for creating dynamic, interactive stream graphics. Built with a hardware-accelerated canvas engine, it allows you to customize layouts, bind live chat data, and craft complex keyframe animations.

1. Workspace Layout Panels

Our workspace is optimized to give you quick access to all essential controls:

Layers Panel (Left Sidebar)

Displays a nested hierarchical tree of all elements on your canvas. Drag to re-order layer stacking priority, toggle visibility, lock elements to prevent accidental canvas drags, or group them into Components.

Interactive Canvas (Center Panel)

Your live rendering viewport. Supports dragging, resizing, snapping, and rotation of elements. The canvas can be zoomed and panned freely to let you fine-tune tiny details.

Inspector Panel (Right Sidebar)

A dynamic control panel that changes based on the selected layer. Fine-tune absolute sizing/positioning, fonts, color gradients, border styles, drop shadows, and effect filters.

Sequencer & Markers (Bottom Panel)

A robust timeline to animate properties over time, customize cubic-bezier transition curves, and manage horizontal marker action pins (sound files, pauses, event triggers).

2. Core Canvas Concepts

To get the best results from the Scraplet editor, it's helpful to understand how the rendering engine works under the hood:

State Syncing via Websockets When you make changes in the editor and click Save, Scraplet pushes the updated state tree to our cloud server. Running OBS browser sources receive this layout payload in real-time via persistent, zero-latency WebSockets, applying visual updates instantly without requiring a manual source reload.

Positioning & Coordinates The canvas origin 0,0 is located at the top-left corner. Coordinates are pixel-exact. Holding Shift while resizing locks the aspect ratio of images, shapes, and containers.

Responsive Scaling Overlays default to 1920 x 1080, but our responsive runtime engine scales up or down automatically if your OBS source dimensions change, keeping text, container, and widget ratios mathematically proportional.

3. Keyboard Shortcuts

Boost your editing efficiency using our built-in keyboard hotkeys:

Shortcut	Action
`Ctrl + S`	Save workspace changes and push updates live
`Ctrl + Z` / `Ctrl + Y`	Undo or redo canvas action
`Ctrl + D`	Duplicate selected element(s) at offset position
`Delete` / `Backspace`	Remove selected element(s)
`Arrow Keys`	Nudge selected element by 1 pixel (Hold `Shift` for 10px nudges)
`Ctrl + [` / `Ctrl + ]`	Bring selected layer backward or forward in layer tree