Overview
The Zone Editor is the heart of Staged. It lets you create zones on your virtual display where apps will be positioned. Think of zones as designated areas - each zone can hold one app, and apps snap to their assigned zones automatically.
Zone Editor Features
- Drag-and-drop zone creation
- Resize and reposition zones
- Color coding for easy identification
- Save as reusable presets
- Snap-to-grid alignment
- Built-in preset library
Opening the Zone Editor
To open the Zone Editor:
- Open Staged from the system tray or Start Menu
- Click the Zone Editor
- Or use the keyboard shortcut: Ctrl + E
The Zone Editor shows a preview of your display with any existing zones. The Game Stage (where your game will run) is shown as the central area.
Creating Zones
Drag to Create
The easiest way to create a zone is by dragging:
- Click and hold anywhere on the preview area (outside the Game Stage)
- Drag to define the size of your zone
- Release to create the zone
- A new zone appears with a default name like "Zone 1"
Add Zone Button
You can also click the + Add Zone button in the toolbar. This creates a new zone at a default size that you can then resize and reposition.
Quick Presets
For common layouts, use the Quick Presets feature:
- Left + Right - Two zones on either side of the Game Stage
- Left Only - Single zone on the left
- Right Only - Single zone on the right
- Bottom Bar - Horizontal zone below the Game Stage
- L-Shape - Left zone + bottom zone
- Surround - Zones on all four sides
Editing Zones
Selecting Zones
Click on any zone to select it. Selected zones show resize handles and a properties panel. You can select multiple zones by holding Shift and clicking.
Resizing Zones
To resize a zone:
- Select the zone
- Drag any of the corner or edge handles
- Hold Shift while dragging to maintain aspect ratio
- Hold Ctrl to disable snap-to-grid temporarily
Moving Zones
To move a zone:
- Select the zone
- Drag from the center (not the handles)
- The zone snaps to grid lines and other zone edges
- Use arrow keys for pixel-perfect positioning
Zone Properties
Each zone has configurable properties:
| Property | Description |
|---|---|
| Name | A friendly name like "Discord" or "OBS Preview" |
| Color | Visual color for identification in the editor |
| Assigned App | Which app should snap to this zone |
| Browser URL | Optional URL to open in browser zones |
| Dim Level | How much to dim this zone in Game Mode (0-100%) |
| Auto-Launch | Whether to launch the app automatically |
Deleting Zones
To delete a zone:
- Select the zone and press Delete or Backspace
- Or right-click the zone and select "Delete Zone"
- Or click the button in the zone properties panel
Working with Presets
Saving Presets
Once you’ve created a zone layout you like, save it as a preset:
- Click Save Preset in the toolbar
- Enter a name for your preset (e.g., "Streaming Setup", "Casual Gaming")
- Optionally add a description
- Click Save
Loading Presets
To load a saved preset:
- Click Load Preset in the toolbar
- Browse your saved presets or the built-in library
- Click a preset to preview it
- Click Apply to use it
Preset vs Current Layout
Loading a preset replaces your current zone layout. If you have unsaved changes, Staged will ask if you want to save them first.
Built-in Presets
Staged includes presets optimized for common use cases:
Gamer Standard
Discord on left, YouTube on right. Perfect for 4K TVs and large monitors.
Streamer Pro
OBS preview + chat on left, Twitch chat on right. Optimized for ultrawide.
Minimal
Single zone on the right for quick glances. Maximizes game area.
Retro 4:3
Centered 4:3 game stage with zones on both sides. Great for classic games.
Tips and Tricks
Use Grid Snap
Keep grid snap enabled for cleaner layouts. Zones will align perfectly with each other and the display edges. You can adjust grid size in Settings.
Color Code Your Zones
Use colors that match the apps - blue for Discord, purple for Twitch, red for YouTube. This makes it easy to identify zones at a glance.
Set Browser URLs
For browser zones, set specific URLs like your Twitch chat popout or YouTube playlist. These open automatically when you start a game.
Create Game-Specific Presets
Different games might need different layouts. Create presets for competitive games (minimal distractions), casual games (more apps visible), and streaming.
Duplicate Zones
To create similar zones, select a zone and press Ctrl + D to duplicate. The new zone copies all properties except position.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Ctrl + E | Open Zone Editor |
| Ctrl + N | New zone |
| Ctrl + D | Duplicate selected zone |
| Delete | Delete selected zone |
| Ctrl + S | Save preset |
| Ctrl + Z | Undo |
| Ctrl + Y | Redo |
| Arrow keys | Nudge selected zone by 1px |
| Shift + Arrow keys | Nudge selected zone by 10px |
Next Steps
Now that you know how to create zones, learn about Game Mode to understand how Staged handles cursor lock and dimming during gameplay: