Documentation

Complete guide to creating professional playable end cards

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 the visual editor at /editor
  3. The editor loads with a default scene 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 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 allow you to preview at different scales

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

3. 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

Solid color or image background. Always at z-index 0.

Properties: Color/Image, Opacity, Rotation, Scale, Blend Mode

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 that navigate to iOS/Android URLs.

Properties: Text, Colors (Background/Text), Font (Family/Size/Weight), Borders (Width/Color/Radius), Opacity, Rotation, Scale, Blend Mode. Automatically uses export modal URLs for clicks.

Complete Property Reference

Common Properties (All Objects)

  • Position: X, Y coordinates
  • Size: Width, Height
  • Transform: Rotation (degrees), Scale X, Scale Y
  • Effects: Opacity (0-1), Blend Mode
  • Layering: Z-index
  • Visibility: Show/Hide toggle

Text-Specific Properties

  • Content: Text string (multi-line supported)
  • Typography: Font Family, Font Size, Font Weight
  • Spacing: Line Height, Letter Spacing
  • Styling: Text Color, Text Align, Text Decoration, Text Transform
  • 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
  • Borders: Border Width, Border Color, Border Radius
  • Alt Text: Accessibility text

Button-Specific Properties

  • Content: Button Text
  • Styling: Background Color, Text Color
  • Typography: Font Family, Font Size, Font Weight
  • Borders: Border Width, Border Color, Border Radius
  • Click Action: Automatically uses iOS/Android URLs from export modal (device detection)

Editing Objects

  • Select: Click on an object in the canvas or scene panel
  • Move: Click and drag the selected object
  • Resize: Drag the purple corner handles
  • Properties: Edit in the right panel (Position, Properties, Animation tabs)
  • Delete: Hover over object in scene panel and click delete icon
  • Duplicate: Hover over object and click duplicate icon

Asset Management

For objects with assets (images, videos, audio):

  • Name: Display name shown in the properties panel
  • Change: Click "Change" button to upload a new asset
  • Delete: Click "Delete" button to remove the asset
  • All changes are saved immediately

4. 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

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

Shake

Horizontal shaking animation

Animation Settings

  • Duration: How long the animation takes (in milliseconds, default: 1000ms)
  • Delay: Wait time before animation starts (in milliseconds, default: 0ms)
  • Easing: Animation timing function (linear, ease-in, ease-out, ease-in-out, bounce, elastic)
  • Loop: Enable infinite looping for continuous animations

5. Exporting Playable Ads

Export Process

  1. Click "Export" button in the top header
  2. Fill in iOS App Store URL and Android Google Play URL (these URLs are used for button clicks)
  3. Select ad networks you want to export for
  4. Check the estimated size - warnings appear if file exceeds 3.5MB (performance) or 5MB (limit)
  5. Use "Compress assets" if needed to reduce file size
  6. Optionally enable "Web Preview" for testing
  7. Click "Start build" to generate files (export blocked if over 5MB)
  8. Download single HTML files (one per network, or ZIP if multiple networks selected)

Export Format

Single HTML File

Each network export is a single, self-contained HTML file:

  • All assets embedded as base64 (no external dependencies)
  • Fully inline CSS with all animations as keyframes
  • Fully inline JavaScript with device detection
  • No minification (readable code for debugging)
  • Responsive scaling for different screen sizes
  • Button clicks automatically route to iOS/Android URLs

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

Automatic Compression

The export engine automatically compresses images to meet ad network requirements:

  • Intelligent quality reduction (starts at 90%, reduces as needed)
  • Resolution downscaling if quality reduction isn't enough
  • Network-specific target sizes (Google: 150KB, Meta: 500KB, etc.)
  • Guaranteed to meet file size requirements

Export Features

  • Single HTML File: Everything in one file, no folder structure
  • 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

6. 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
TikTok / 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

* 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.)

7. 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