Preview System

Preview playable ads in real-time with SSE integration, device simulation, and zoom controls

Overview

The Preview System lets you see your playable ad exactly as it will appear on target devices. Changes made in the Parameter Editor are reflected instantly in the preview panel using Server-Sent Events (SSE) for real-time synchronization.

Split-View Layout

The customization page uses a split-view layout:

Left panel -- Parameter Editor with category sidebar
Right panel -- Live preview of the playable ad

The divider between panels is draggable, so you can adjust the preview width to match your workflow. Drag it left for a wider preview or right for more editing space.

Real-Time Updates via SSE

PlayableLabs uses Server-Sent Events (SSE) to push parameter changes to the preview in real-time:

You edit a parameter in the editor
The change is sent to the server
The server broadcasts the update via an SSE connection
The preview iframe receives the event and updates instantly

This eliminates the need to manually refresh the preview. The SSE connection is authenticated using your session credentials and scoped to your organization.

Connection Status

A connection indicator in the preview header shows the SSE status:

Connected -- Real-time updates are active
Reconnecting -- Temporary disconnection; the system will retry automatically
Disconnected -- Manual refresh may be needed

Device Simulation

The preview can simulate how your playable ad will look on different devices.

Selecting a Device

Click the device selector dropdown above the preview
Choose from available device presets with realistic device frames
The preview resizes to match the selected device's screen dimensions

Available device categories include:

Mobile phones — iPhone 17 Pro Max, iPhone 16 Pro, and more
Tablets — iPad, Android tablets
Desktop — Standard desktop viewport sizes

The device selector shows only devices with frame images for realistic preview. Devices are sorted by newest first (iOS 17 → 16 → 15) with Pro Max and Pro variants prioritized.

Orientation

Mobile and tablet devices support both portrait and landscape orientations. Click the rotate button (smartphone icon) to toggle between them. Desktop devices do not support rotation.

When you rotate the device, the preview automatically adjusts dimensions and the device frame updates to match the new orientation.

Zoom and Audio Controls

Zoom Controls

For detailed inspection or to fit larger device frames on screen:

Zoom slider — Drag to adjust zoom level from 100% to 200%
Numeric input — Enter a specific zoom percentage (100-200)
Pan mode — When zoomed in (>100%), hold Space and drag to pan around the preview

The zoom controls are located in the preview toolbar and are hidden on mobile devices to save space.

Audio Controls

Control audio playback in the preview:

Mute/Unmute — Click the volume icon to toggle audio
Volume slider — Adjust volume level from 0% to 100%

Audio changes apply immediately to the preview iframe without requiring a refresh.

Click Preview Export in the export dialog
Select the target network (e.g., Meta, Google Ads)
The preview renders the playable ad with network-specific constraints (file size, format)

This helps catch issues before generating the final export.