Documentation

Professional reference for the Video and Image editors — exact features, limits, and export specs

Table of Contents

1. Getting Started

Launching the Editor

  1. Click "Start Creating" or "Get Started Free" on the homepage
  2. You'll be taken to Choose your editor at /editor
  3. Pick Video editor (playable ads with video, breaks, overlays) or Image editor (static end cards and banners)
  4. The editor loads with a new project or template ready for editing

Understanding the Interface

Left Panel

Scene panel with object hierarchy and add object controls

Center Canvas

Visual editor where you design your end card

Right Panel

Properties panel for editing selected objects

2. Editor Comparison: Video vs Image

Playable End Card Maker offers two editors at /editor: the Video editor (/editor/video) for playable ads with video backgrounds, mid-roll breaks, and overlays; and the Image editor (/editor/image) for static end cards and banners. Both share the same object types, animations, export pipeline, and ad network support—the difference is workflow and video-specific features.

FeatureVideo EditorImage Editor
BackgroundColor, image, or video (portrait & landscape)Color or image only
Video upload limit3.5 MB max per video (MP4 recommended)—
TemplatesNone — starts with blank project6 templates (Play Now, Download Now, Join Millions, Get It Free, Install Now, Play Today)
Breaks & overlaysYes — time-based breaks, end screen, permanent overlayNo
Path animation (break completion)Yes — ellipse, rectangle, infinity shapes; touch-to-follow path to resume videoNo
Autosave / draftEvery 2 seconds to localStorage; restores on returnOptional; toggle on/off
Default viewport375×667 (portrait) / 667×375 (landscape)375×667 / 667×375 (same)
Object typesBackground, Text, Image, Button (shared)Background, Text, Image, Button (shared)
AudioOne per scene (OGG, MP3)One per scene (OGG, MP3)
ExportSame — pre-validation, compression, progress, cancelSame
Ad networksGoogle, Meta, TikTok, Unity, IronSource, Mintegral, Moloco, AppLovin, Liftoff, Pangle, Vungle, Chartboost, InMobiSame

Video Editor — In-Depth

Video Background

One video per orientation (portrait + landscape). MP4 recommended; max 3.5 MB per file. Video pauses during breaks and resumes when user completes the break action.

Overlay Types

  • Break: Pauses video at a time; user resumes by click, hold, or double-click
  • Break Hold Path: Pauses video; user must trace a path (ellipse, rectangle, infinity) with finger; default 85% completion to resume (configurable 70–100%)
  • End Screen: Appears at video end (milliseconds before); typical CTA overlay
  • Permanent Overlay: Shown during a time range; supports jump-to-time on buttons

Break Resume Options

  • Click: Single tap resumes video
  • Hold: User holds for configurable seconds (e.g. 2s)
  • Double click: Double-tap to resume
  • Path: User traces path; path completion threshold 70–100% (default 85%)

Video Triggers (Actions)

Triggers run at: On video start, At time (seconds), On video end, On loop restart. Actions: show object, hide object, unlock interaction, set text, animate. Target: any image, button, or text in the scene.

Scene Interaction Modes

  • CTA button: User taps a designated button for install/play
  • Tap anywhere: Any tap → CTA
  • Tap to continue: Tap advances flow
  • Hold-to-fill: Hold 1–10 seconds (configurable) to fill bar
  • Multi-tap: Tap 2–10 times (configurable) to trigger

Delayed interaction: 0, 1, or 1.5 seconds before taps unlock (UA best practice).

Break Content

Break overlays have their own content: color/image background (portrait + landscape), text, images, buttons, audio. Buttons can resume video or jump to time (seek to seconds). Break Hold Path uses path animation (hand sprite follows path); no button/audio in break content for path type.

Image Editor — In-Depth

Templates (6): Play Now – Casual, Download Now – Action, Join Millions – Social Proof, Get It Free – Minimal, Install Now – Bold, Play Today – Balanced. Each includes: background (portrait + landscape), logo, headline, subtitle, detail line, CTA button, hand pointer, audio. Default viewport 375×667 (portrait) / 667×375 (landscape).

Background: Solid color or image; backgroundSize (cover, contain, stretch), backgroundPosition (center, top, bottom, etc.), blur (0–30px), darken (0–100%). No video.

3. Editor Overview

Viewport Settings

Adjust the canvas size to match your target ad dimensions:

  • Common sizes: 320×50, 300×250, 320×480, 375×667 (iPhone), 414×896
  • Use the top bar to set width and height
  • Zoom controls (50%–200%); Fit (100%) and Zoom to selection (150%) to focus on the selected object

Left Panel — Scene Panel

Object hierarchy and scene list. Add objects; reorder (move up/down); duplicate; delete; lock/unlock; show/hide. Video editor: breaks and triggers in timeline; add Break, Break Hold Path, End Screen, Permanent overlay.

Editor Tools (Both Editors)

  • Undo/Redo: Ctrl+Z (undo), Ctrl+Y (redo); history up to 50 steps
  • Autosave: Video editor saves every 2s to localStorage and restores on return; Image editor has optional autosave
  • Keyboard shortcuts: Delete/Backspace (delete object), Escape (clear selection), Ctrl+C/V (copy/paste), Arrow keys (nudge; Shift for fine nudge)
  • Copy/Paste: Ctrl+C to copy, Ctrl+V to paste across scenes or within scene
  • Zoom: 50%–200%; Fit (100%); Zoom to selection (150%)
  • Grid: 2×2, 3×3, 4×4, 10×10; toggle on/off

Scene Management

Organize your end card with multiple scenes:

  • Create multiple scenes for different states or variations
  • Switch between scenes using the scene panel
  • Each scene can have its own objects and animations

Object Hierarchy

Manage objects using the hierarchy view:

  • View all objects in a tree structure
  • Objects are sorted by z-index (layer order)
  • Click objects to select and edit them

4. Creating Objects

Adding Objects

  1. Click "Add New Object" in the left panel
  2. Select an object type from the modal
  3. The object appears on the canvas at the center
  4. Use the properties panel to customize it

Available Object Types

🖼️ Background

Color, image, or (Video editor only) video. Always at z-index 0.

Video: portrait + landscape; max 3.5 MB per video (MP4). Properties: Color/Image/Video, Opacity, Rotation, Scale, Blend Mode, Size/Position

T Text

Text elements with customizable fonts, colors, and alignment.

Properties: Content, Font (Family/Size/Weight), Line Height, Letter Spacing, Text Decoration/Transform, Borders, Opacity, Rotation, Scale, Blend Mode

🖼️ Image

Upload and display images with full control.

Properties: Image Source, Object Fit (Cover/Contain/Fill), Borders (Width/Color/Radius), Opacity, Rotation, Scale, Blend Mode

🔘 Button

Interactive buttons; main scene uses iOS/Android URLs; break overlays use resume or jump-to-time.

Properties: Text, Button Image, Colors, Font, Borders, Button Action (resume/jump to time), Jump to Time (seconds).

🔊 Audio

Scene-level audio (one per scene). OGG or MP3.

Properties: Autoplay, Loop, Volume, Muted. Embedded as base64 in export.

Complete Property Reference

Common Properties (All Objects)

  • Position: X, Y (pixels); per-orientation: xPortrait, yPortrait, xLandscape, yLandscape
  • Size: Width, Height; per-orientation variants for text/images
  • Transform: Rotation (degrees), Scale X, Scale Y
  • Opacity: 0–1
  • Blend Mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion — per orientation
  • Z-index: Layer order; higher = on top
  • Visibility: Show/Hide toggle

Background-Specific Properties (Video & Image Editors)

  • Type: color, image, or (Video only) video
  • Background Size: cover, contain, auto, 100% 100% (stretch)
  • Background Position: center, top, bottom, left, right, top left, top right, bottom left, bottom right
  • Blur: 0–30 px, per orientation (portrait/landscape)
  • Darken: 0–100%, per orientation
  • Video: portrait + landscape URLs; max 3.5 MB per file; MP4 recommended

Text-Specific Properties

  • Content: Multi-line text string
  • Typography: Font Family, Font Size, Font Weight (normal, bold)
  • Spacing: Line Height, Letter Spacing
  • Text Align: left, center, right
  • Text Decoration: none, underline
  • Text Transform: none, uppercase, lowercase, capitalize
  • Drop Shadow: blur, offset X, offset Y, color
  • Stroke: width (px), color
  • Word Wrap: enable/disable; width when wrapped
  • Borders: Border Width, Border Color, Border Radius

Image-Specific Properties

  • Source: Image URL (base64 embedded in export)
  • Object Fit: cover, contain, fill, none, scale-down
  • Tint: Sprite color overlay (hex), per orientation
  • Anchor/Pivot: X and Y (0–1) for rotation center, per orientation
  • Borders: Width, Color, Radius
  • Alt Text: Accessibility text

Button-Specific Properties

  • Content: Button text
  • Button Image: Optional custom image (replaces text styling)
  • Styling: Background Color, Text Color; Font Family, Size, Weight
  • Borders: Width, Color, Radius
  • Click Action (main scene): Uses iOS/Android URLs from export modal (device detection)
  • Button Action (break overlays): resume (unpause video), jump to time (seek to seconds)
  • Jump to Time: Seconds to seek when "Jump to time" is selected

Editing Objects

  • Select: Click on an object in the canvas or scene panel; Escape to clear selection
  • Move: Click and drag the selected object, or use Arrow keys to nudge (Shift for fine nudge)
  • Resize: Drag the purple corner handles
  • Properties: Edit in the right panel (Position, Properties, Animation tabs)
  • Delete: Select object and press Delete or Backspace, or use delete icon in scene panel
  • Duplicate / Copy-Paste: Ctrl+C to copy, Ctrl+V to paste; or use duplicate icon in scene panel

Asset Management

For objects with assets (images, audio):

  • Name: Display name shown in the properties panel
  • Change: Click "Change" (or the asset field) to open the Asset Picker
  • Asset Picker: Choose from default images and sounds in a grid, or use "Upload your own" for custom files
  • Delete: Click "Delete" button to remove the asset
  • All changes are saved immediately

7. Portrait / Landscape & Asset Picker

Portrait and Landscape

Playables adapt to device orientation. The editor supports both orientations with full control:

  • Preview toggle: Switch Portrait/Landscape in the top bar to edit and preview each orientation
  • Per-orientation position: xPortrait, yPortrait, xLandscape, yLandscape — objects can have different positions per orientation
  • Per-orientation size: widthPortrait, heightPortrait, widthLandscape, heightLandscape for text/images
  • Per-orientation blend: blendModePortrait, blendModeLandscape
  • Backgrounds: Separate background images/videos for portrait and landscape
  • Path animation: pathPortrait, pathLandscape — independent path data per orientation
  • Exported playables detect orientation and render the correct layout automatically

Asset Picker — Full Spec

When you add or change an image, video, or sound, the Asset Picker modal opens:

  • Default assets: Built-in images (backgrounds, logos, hands, buttons) and sounds in a grid; click Select to use
  • Upload images: JPG, PNG, WebP. Resized to fit viewport on add (max 50% of canvas).
  • Upload video: MP4 recommended; max 3.5 MB per file (Video editor only)
  • Upload audio: OGG, MP3. One audio per scene; autoplay, loop, volume configurable.
  • All assets embedded as base64 in export; no external URLs or CDN

5. Animations

Adding Animations

  1. Select an object in the canvas
  2. Go to the "Animation" tab in the properties panel
  3. Enable animation and choose a type
  4. Set duration, delay, and easing
  5. Click "Play" in the status bar to preview

Animation Types (12 total)

All exported as CSS keyframes. Duration and delay in milliseconds; easing: linear, ease-in, ease-out, ease-in-out, bounce, elastic.

Fade In

Object fades in from transparent

Fade Out

Object fades out to transparent

Slide Up

Object slides up from bottom

Slide Down

Object slides down from top

Slide Left

Object slides in from right

Slide Right

Object slides in from left

Scale In

Object scales from 0 to full size

Scale Out

Object scales from full to 0

Rotate In

Object rotates while scaling in

Bounce

Bouncing entrance animation

Pulse

Pulsing scale effect (supports loop)

Shake

Horizontal shaking animation

Entrance Animation Settings

  • Duration: Milliseconds (default: 1000ms)
  • Delay: Milliseconds before start (default: 0ms)
  • Easing: linear, ease-in, ease-out, ease-in-out, bounce, elastic
  • Loop: Infinite repeat for Pulse and other continuous effects

Advanced Animations (Image, Button, Text)

In addition to entrance animations, objects support style, position, scale, transparency, and rotation animations. Each has its own tab in the properties panel.

  • Style Animation: Tint (from/to hex color), blur (from/to px), brightness (from/to). Duration, easing, loop.
  • Position Animation: Move from (x1,y1) to (x2,y2). Duration, easing, loop, direction (normal/reverse/alternate).
  • Scale Animation: Scale from/to (X, Y). Duration, easing, loop.
  • Transparency Animation: Alpha from/to (0–1). Duration, easing, loop.
  • Rotation Animation: Rotate from/to degrees. Duration, easing, loop, direction.

Path Animation (Video Editor, Break Hold Path)

Used in Break Hold Path overlays. User traces a path with their finger; video resumes when path completion threshold is met.

  • Shapes: Ellipse, rectangle, infinity (lemniscate); or custom path (add/move/delete points)
  • Per-orientation: pathPortrait, pathLandscape — portrait and landscape paths are independent
  • Preview sprite: Optional hand/image that follows the path (upload in path panel)
  • Duration: How long the hand takes to traverse the path (ms)
  • Easing: linear, ease-in, ease-out, ease-in-out, bounce, elastic.out
  • Completion threshold: 70–100% of path user must trace to resume (default 85%)

6. Exporting Playable Ads

Export Process — Step by Step

  1. Click "Export" in the top header
  2. Enter iOS App Store URL and Android Google Play URL — at least one required; used for all button clicks (device detection)
  3. Pre-export validation: Runs automatically. Errors (e.g. missing assets, invalid URLs) block export; warnings (e.g. large size) do not block but advise action
  4. Select ad networks — build time increases with more networks
  5. Check estimated size: green <3.5MB; orange warning 3.5–5MB; red block ≥5MB
  6. Click Compress assets to open the compression modal; select assets and compress before exporting if over limits
  7. Enable Web Preview to test in browser (optional)
  8. Click Start build — progress bar shows steps; Cancel export to stop. Export blocked if ≥5MB or validation fails
  9. Download: one .html per network, or .zip if multiple networks selected

Export Format

Export Formats (Exact per Network)

  • Single HTML: Unity, IronSource, Meta (Facebook), Moloco, AppLovin, Vungle, Chartboost, InMobi — one self-contained .html file per network
  • HTML5 ZIP: Google Ads, Mintegral, TikTok, Liftoff, Pangle — .zip with index.html, main.js, (TikTok/Pangle) config.json
  • All assets embedded as base64; no external files
  • Inline CSS and JavaScript; device detection for iOS/Android URL routing

Button Click Behavior

Buttons automatically detect the user's device and navigate accordingly:

  • iOS Devices: Navigate to iOS App Store URL
  • Android Devices: Navigate to Android Google Play URL
  • Other Devices: Use iOS URL as fallback
  • URLs are configured in the export modal (not per-button)
  • No button-specific links needed

Compress Assets (Pre-Export)

Use the Compress assets button in the export modal to reduce file size before export. Exact specs:

  • Images: WebP quality 60; dimensions preserved; significant size reduction
  • Video: MP4 (H.264 + AAC); CRF 36; ~400k video / 64k audio bitrate; smallest practical size for playable ads
  • Audio: OGG/Opus; mono; 22050 Hz; 32 kbps VBR; aggressive compression
  • Compression runs once per session; use before exporting if size exceeds 3.5 MB

Automatic compression during export: intelligent image quality reduction (from 90% down as needed), resolution downscaling if required, network-specific targets (e.g. Google ~150 KB, Meta ~500 KB). Export blocked if final size exceeds 5 MB.

Export Features

  • Pre-export validation: Checks for missing assets, invalid URLs, and config issues; shows errors/warnings and disables Export until valid
  • Progress & cancel: Step-by-step progress bar during export; Cancel button to stop long builds
  • Single HTML or ZIP: Per-network format (single .html for most; ZIP with index.html + main.js for Google, Mintegral, TikTok, Liftoff, Pangle)
  • No Minification: Code is readable for easier debugging
  • Embedded Assets: All images as base64 (no external files)
  • Inline Everything: CSS and JavaScript are inline
  • Device Detection: Automatic iOS/Android URL routing
  • Animation Support: All animations exported as CSS keyframes
  • Looping Animations: Infinite loops supported
  • Responsive: Scales to fit different screen sizes

8. Ad Network Requirements

File Size Limits

Recommended Size: 1.5MB - 2MB

For optimal performance and fast loading times, keep your export size between 1.5MB and 2MB. Files in this range provide the best balance between quality and performance.

Maximum File Size: 5MB

All ad networks support a maximum of 5MB per HTML file. Exports exceeding this limit will be blocked to prevent rejection by ad networks.

Performance Warning (3.5MB+)

When your export exceeds 3.5MB, a performance warning appears. Large files may load slowly and impact user experience. Consider compressing assets to optimize performance.

Network Limit (5MB+)

When your export reaches or exceeds 5MB, export is blocked. You must reduce file size by compressing assets or removing content before exporting. Exports may be rejected by ad networks if they exceed 5MB.

Supported Networks

NetworkRecommended SizeMaximum SizeFormat
Google Ads1.5-2 MB5 MBHTML5 ZIP
Meta (Facebook)1.5-2 MB5 MBHTML5 ZIP
TikTok1.5-2 MB5 MBHTML5 ZIP
Pangle1.5-2 MB5 MBHTML5 ZIP
Unity Ads1.5-2 MB5 MBSingle HTML
IronSource1.5-2 MB5 MBSingle HTML
Mintegral1.5-2 MB5 MBHTML5 ZIP
Moloco1.5-2 MB5 MBSingle HTML
AppLovin1.5-2 MB5 MBHTML5 ZIP
Liftoff1.5-2 MB5 MBHTML5 ZIP
Vungle1.5-2 MB5 MBSingle HTML
Chartboost1.5-2 MB5 MBSingle HTML
InMobi1.5-2 MB5 MBSingle HTML

* Recommended range: 1.5MB - 2MB for optimal performance. While each network has specific recommended target sizes, all networks support up to 5MB maximum. However, files in the 1.5-2MB range provide the best balance between quality and loading speed.

Export Features

  • Single HTML file with all assets embedded as base64
  • No external dependencies (no CDN links, no separate files)
  • Fully inline CSS and JavaScript (unminified for debugging)
  • All animations exported as CSS keyframes with looping support
  • Device detection for automatic iOS/Android URL routing
  • Responsive scaling for different screen sizes
  • Button clicks automatically use export modal URLs
  • All object properties preserved (borders, transforms, blend modes, etc.)

9. Troubleshooting

Common Issues

Export file is too large

The export modal shows real-time size warnings:

  • Performance Warning (3.5MB+): Orange warning appears. Consider compressing assets to improve load times.
  • Network Limit (5MB+): Red error appears and export is blocked. You must compress assets or reduce content before exporting.

Solutions:

  • Use the "Compress assets" button in the export modal before exporting
  • Check the estimated size breakdown to identify large assets
  • Reduce the number of high-resolution images
  • Consider using lower quality images for backgrounds
  • Remove unnecessary objects or animations

Images not loading in exported file

All images are embedded as base64 in the HTML. If images don't load:

  • Check that images were successfully uploaded
  • Ensure images are in supported formats (JPG, PNG, WebP)
  • The fallback image will display if main image fails

Animations not working

Animations are exported as CSS keyframes. To ensure they work:

  • Enable animations in the Animation tab
  • Preview animations using the Play button
  • Animations start automatically when the playable loads

ClickTag not working

ClickTag is automatically configured. If clicks don't work:

  • Ensure you've entered valid iOS or Android URLs
  • Check that the ad network supports clickTag
  • The entire canvas is clickable by default

Best Practices

  • Keep image file sizes reasonable before uploading
  • Use web-safe fonts for better compatibility
  • Test your playable in the target ad network's preview tool
  • Keep animations simple and performant
  • Use the compression tool for large assets
  • Always include a fallback image

Ready to Start Creating?

Launch the editor and create your first playable end card

Launch Editor