🎮 Studio Platform Features

My Pie Studio is a real-time overlay designer for streamers. This guide is a complete reference for every element type, property, and keyboard shortcut available in the editor.

🎛️ Shared Element Properties #

Most visual elements (Text, Image, WebM, Timer, Ticker, iFrame) share a common set of properties in the right-hand Object Editor panel:

📍 Position & Size #

  • X, Y — Pixel coordinates on the canvas. You can also drag elements directly.
  • Width, Height — Dimensions in pixels. Drag corner handles to resize; hold Shift to lock aspect ratio. Minimum size is 20×20px.
  • Rotation — Degrees from 0° to 360°. Resize handles respect the current rotation angle.
  • Flip H / Flip V — Mirror the element horizontally or vertically (via scaleX / scaleY).

🎨 Appearance & Behavior #

  • Opacity — Transparency from 0.0 (invisible) to 1.0 (fully visible).
  • Layer Order — Use the "Bring Forward" and "Send Backward" buttons to move objects front or back.
  • Locking (🔒) — Prevents dragging, resizing, and keyboard movement. Locking a folder locks all children.
  • Visibility (👁) — Hide/show on the overlay. Hiding a folder hides all its children.

🎬 Animations #

Each visual element supports separate Intro and Outro animation types (e.g., Fade, Slide) with configurable durations in milliseconds.

📦 Element Types #

📝 Text #

Static or dynamic text labels with full typography control.

  • Content — Multi-line text input. The first 20 characters automatically become the layer name.
  • Font Family — Choose from curated Google Fonts (Roboto, Montserrat, Pacifico, etc.).
  • Font Size — Size in pixels.
  • Color — Text color picker.
  • Background — A colored box behind the text with a separate opacity slider (e.g., rgba(0,0,0,0.5)) for readability over video.

🖼️ Image #

Display static or animated graphics (PNG, JPG, GIF, WebP).

  • Direct Upload — Upload a local file. The system automatically compresses all images and animations for fast loading on stream without losing quality.
  • Load from URL — Paste any public image URL. The editor auto-detects GIFs and sets them as animated.
  • Name — A unique identifier for this image (used in the Layers panel).
  • Linked Audio — Assign an Audio element to play automatically whenever this image's intro animation fires.

🎬 WebM Video #

High-quality video files with transparent backgrounds. Best for animated stickers and complex moving effects.

  • URL — A direct link to a .webm file.
  • Loop — Toggle whether the video restarts automatically after ending.
  • Name — A unique layer name.

⏱️ Timer #

A live countdown to a specific date and time.

  • Target Date — The specific date and time to count down to.
  • End Text — Message displayed when the countdown reaches zero (default: "Time's Up!").
  • Font / Color / Background — Same typography controls as Text elements.

📰 Ticker (Scrolling Text) #

A running text string that continuously scrolls your message across the screen.

  • Text — The scrolling content. First 20 characters become the layer name.
  • Speed — Scroll speed from 10 (slow) to 500 (very fast). Default is 100.
  • Direction — left (default), right, up, or down.
  • Background — Colored bar behind the ticker with independent opacity.
  • Font / Color — Same typography controls as Text.

🌐 iFrame (Web Embed) #

Embed any web page directly in your overlay — chat widgets, donation panels, dashboards, etc.

  • URL — The web address to embed.
  • Content Width / Height — The internal document resolution (default 1920×1080). Change these to zoom in/out on the embedded page.
  • Scrolling — Toggle scrollbar visibility on the iframe.
  • Pan — Hold Alt + drag on the canvas to slide the internal page content within the frame.
  • Zoom — Hold Alt + scroll wheel to zoom in/out on the embedded content (min scale 0.1, zoom speed 0.05).
  • Manual Inputs — The editor also provides X, Y, Width, Height, Content Width, and Content Height number inputs for precise positioning.

🔊 Audio (Sound Alerts) #

Sound effects that can be triggered via webhooks or linked to visual elements. Audio has no visual representation on the canvas.

  • Audio URL — Direct link to an audio file (MP3, OGG, WAV, etc.).
  • Volume — From 0.0 (silent) to 1.0 (full). Default is 0.5.
  • Name — Must be unique among audio elements. Used in the webhook curl command.
  • Test Play — The "Play" button in the editor lets you preview the sound locally in your browser.
  • Webhook Trigger — Fire the sound remotely via the API. See the Webhooks Guide.

✨ Effect (Particles) #

Massive full-screen visual effects (snow, rain). These cover the entire screen and are displayed above other visual elements.

  • Type — snow (default), rain, or leafs.
  • Custom SVG — Paste your own custom design, and the system will turn it into falling particles.
  • Amount — Number of particles (default 100).
  • Speed — Movement speed (default 2).
  • Size — Particle size (default 3).
  • Direction — Fall direction: down (default), up, left, right.
  • Fade Out — Percentage of height where particles begin disappearing (default 100 = no fade).

📁 Folder #

Organizational containers for grouping layers.

  • Collapse/Expand — Toggle children visibility in the Layers panel.
  • Lock — Locking a folder recursively locks all children.
  • Visibility — Hiding a folder recursively hides all children.
  • Delete — Deleting a folder deletes all contents inside it.
  • Folders can be nested and dragged up/down within the Layers panel, but they cannot be visually dragged or resized directly on the canvas. Folders also cannot be triggered via webhooks.

🖥️ Workspace & Workflow #

🚀 Publishing (Dirty State) #

All changes you make are only visible to you. Once your design is ready, click Publish and the system will instantly update the overlay on your live stream. The Revert button will discard any unsaved edits.

📐 Canvas Resolution #

Click Canvas Settings in the toolbar to change resolution. Choose from presets (Desktop 16:9, Mobile 9:16) or enter custom dimensions. Use the Swap button to quickly switch between landscape and portrait. The overlay scales dynamically to fit any OBS Browser Source size.

🧲 Grid & Snapping #

Toggle the alignment grid and smart snapping from the toolbar. Snapping uses an 8px threshold and targets canvas edges, canvas center, and other objects' edges and centers.

🖼️ Canvas Background #

Upload a background image or fetch your current Twitch stream thumbnail directly from the toolbar. This is for design reference only — the background is not rendered on the OBS overlay.

⌨️ Keyboard Shortcuts #

Shortcuts are active when the canvas is focused (not when typing in editor fields). They do not apply to locked objects, folders, or effects.

Movement & Deletion

  • ← → ↑ ↓ — Move selected element by 1px.
  • Shift + Arrows — Move selected element by 10px.
  • Delete / Backspace — Delete the selected element (with confirmation dialog).

Modifier Keys

  • Shift + corner resize — Lock aspect ratio while resizing.
  • Alt + drag on an iFrame — Pan the internal web page content.
  • Alt + scroll wheel on an iFrame — Zoom the embedded page content in/out.
💡 Tip: Shortcuts only fire when no text input, textarea, or select field is focused. Click the canvas once to regain keyboard control.

🎛️ OBS Remote Control #

My Pie Studio can control your OBS directly from the web editor — switch scenes, start/stop streaming, manage recordings, and more. This works through the OBS Browser Source API: no plugins, no OBS WebSocket server needed.

OBS Control Panel — Full Access: Streaming/Recording status, Scene Control, Stream/Record buttons, Replay Buffer, and Virtual Camera

⚠️ Required: Page Permissions in OBS #

By default, OBS does not allow browser sources to control it. You must enable this manually:

  1. Open OBS → Sources panel → right-click your MyPie browser source → Properties
  2. Scroll down to "Page permissions" (also called "Control Access Level")
  3. Set it to "Advanced access" or "Full access"
  4. Click OK

If "Page permissions" is set to the default (no access), the OBS panel will show a "📡 OBS Not Detected" message with a Check Again button. The studio detects the permission level automatically when the overlay connects.

📊 Permission Levels #

🔒 No Access (Default)

The OBS panel shows a "📡 OBS Not Detected" fallback with a Check Again button. No controls are available.

This happens when OBS Page Permissions are left at the default, or when OBS isn't running. The OBS button is still visible (if enabled in Dashboard), giving the user guidance on how to connect.

⚡ Advanced Access (Level 4)

The OBS panel shows active controls. Your team can:

  • See streaming and recording status (ON/OFF + duration timer)
  • View a live list of all OBS scenes
  • Switch the active scene (Program)
  • Switch the preview scene (in Studio Mode)
  • Refresh scenes list

Cannot start/stop streaming, recording, replay buffer, virtual camera, or change transitions.

🔓 Full Access (Level 5)

Everything from Advanced, plus complete OBS control:

  • Stream — Start / Stop streaming
  • Recording — Start / Stop / Pause / Resume recording
  • Replay Buffer — Start / Stop / Save replay
  • Virtual Camera — Start / Stop virtual camera
  • Transitions — Browse available transitions, set active transition, fire transition (Studio Mode)
  • Studio Mode — When OBS Studio Mode is enabled, the panel automatically shows Preview Scene and Transition controls

🔧 How It Works #

The flow is entirely through your existing browser source — no extra setup:

  1. Your overlay (the browser source in OBS) detects window.obsstudio — the native CEF API exposed by OBS
  2. It reports the permission level back to the server via WebSocket
  3. The studio editor shows/hides controls based on that level
  4. When you click "Set Scene" in the editor → command goes via WebSocket → overlay executes obsstudio.setCurrentScene() → OBS switches

Commands travel: Studio Editor → Server (WebSocket) → OBS Browser Source → OBS CEF API → OBS

Everything happens in under 100ms on a local network.

👥 Per-User Access Control #

As the studio owner, you control who can see OBS controls with a simple toggle:

  1. Go to Dashboard → Team
  2. Each accepted manager has an OBS toggle (green = enabled, gray = disabled)
  3. New managers start with OBS access disabled — you must enable it explicitly
  4. When enabled, the OBS button appears in the manager's studio footer — even if OBS is not running. If OBS is offline, the panel shows a "📡 Not Detected" message with a retry button
  5. When disabled, the OBS button is completely hidden and all OBS commands are blocked server-side

This gives you two independent layers of security:

  • Dashboard toggle — controls who can see the OBS button (per-user)
  • OBS Page Permissions — controls what actions are available (scene-only vs full control)

⚠️ Critical: Add Overlay to All Scenes #

The overlay browser source is your team's only connection to OBS. If someone switches to a scene where the overlay source doesn't exist, the WebSocket disconnects and all OBS controls stop working.

Always add the MyPie overlay to every scene in OBS. You can make it the lowest layer or hide it behind other sources — the important thing is that it exists in every scene so the connection is never broken.

💡 Tip: If you change the permission level in OBS Properties while the overlay is running, the studio will detect the change automatically and update the UI — no need to refresh.