PlayableAd Studio's multi-format export pipeline is the architectural bridge between creative generation and campaign performance. By producing MRAID-compliant ads for major ad networks, TikTok ZIP bundles for viral platforms, and self-contained single-file HTML fallbacks, the platform turns a single LLM-generated game into eight+ deployable variants — each optimized for a different network's requirements. This hybrid approach transforms a clever engine into a marketing automation weapon.
The Problem
A playable ad is useless if the ad network won't accept it. Every major mobile ad network — Google Ads, Meta, Unity Ads, AppLovin, TikTok, Vungle — has its own technical specification for interactive HTML creatives. MRAID (Mobile Rich Media Ad Interface Definitions) is the dominant standard, but implementations vary wildly. TikTok requires a ZIP archive with a specific manifest structure. Some smaller networks accept nothing but a single self-contained HTML file under 2 MB. Regional networks in APAC and LATAM add further bespoke requirements.
For an agency running campaigns across six networks in twelve markets, this means hand-crafting six to twelve output variants from a single playable ad concept. Each variant needs the right container format, tracking pixel injection, network-specific click-through handling, and localisation for the target market. A team producing 50 ad concepts per month faces 300–600 individual export-and-test cycles. This is the bottleneck that kills velocity in programmatic mobile ad campaigns. The deeper problem is toolchain fragmentation: creative teams use Canva for design, a separate HTML5 builder for interactivity, and manual scripts for packaging. Each handoff introduces errors — broken click tags, missing close buttons, oversized assets. Ads get rejected in QA, campaigns launch late, and budgets are wasted.
The Solution
PlayableAd Studio solves this with a unified export pipeline at the end of its AI-powered generation workflow. A single game concept — generated by the LLM pipeline from a brief like "hyper-casual stacking game for a fitness app in Brazil" — flows into the Canva MCP pipeline for template-based production, and then into a multi-format renderer that produces every required output format simultaneously.
The engine understands each network's specification at the structural level: MRAID requires window.mraid injection points for expand and close events; TikTok needs a specific directory layout inside the ZIP; single-file HTML must inline all assets as base64 data URIs. The pipeline makes intelligent trade-offs per format rather than applying a one-size-fits-all wrapper.
Architecture
PlayableAd Studio runs on Cloudflare Workers, giving it a globally distributed, serverless execution environment. The export pipeline is a Directed Acyclic Graph (DAG) of Worker functions that process a single canonical ad representation into multiple output formats.
```
[ LLM Generator ] (OpenAI/Anthropic)
|
v
[ Canva MCP / Template Engine ]
|
v
[ Canonical Ad IR (Intermediate Representation) ]
|
+====+====+
| | |
v v v
[MRAID] [TikTok] [Single-File HTML]
Renderer Packager Renderer
| | |
v v v
[MRAID] [manifest] [inline]
wrapper json+zip base64
```
The canonical Intermediate Representation (IR) is key. Defined as a JSON schema, it captures the game's logic, visual assets, dimensions, click-through URL, tracking pixels, localisation strings, and behavioural configuration in a format-agnostic way. Each renderer walks this IR and emits format-specific output.
```json
{
"version": 2,
"game": {
"type": "stacker",
"width": 320,
"height": 480,
"orientation": "portrait"
},
"assets": {
"sprites": [
{
"id": "block",
"type": "svg",
"data": "<svg>...</svg>"
}
],
"audio": []
},
"localisation": {
"pt-BR": {
"cta": "Jogue Agora",
"score_label": "Pontos"
}
},
"tracking": {
"impression": ["https://track.example.com/imp"],
"click": ["https://track.example.com/clk"]
},
"click_through": {
"url": "https://apps.apple.com/...",
"fallback": "https://play.google.com/..."
}
}
```
Implementation / Step-by-Step
**Step 1: LLM generates the game brief.** The user provides a campaign brief in natural language. The LLM — running on the client's own API key via BYOK — generates game mechanics, visual style, and localisation strings. The output is stored as a draft IR.
**Step 2: Canva MCP pipeline produces assets.** The IR flows into the Canva MCP integration, which opens a pre-approved template, places the game's visual elements (backgrounds, characters, UI chrome), and exports optimised PNG and SVG assets. This step takes under five minutes per variant.
**Step 3: Asset injection and IR finalisation.** Exported assets are injected back into the IR. The pipeline applies network-specific constraints: MRAID requires clickable areas enclosed in `<a>` tags with specific CSS classes; TikTok's ZIP manifest needs relative asset paths. The IR is validated against a JSON Schema to catch missing fields before rendering.
**Step 4: Parallel format rendering.** The Cloudflare Workers DAG fans out to three renderers running concurrently, each a standalone Worker function:
```
/workers/mraid-renderer -> wraps IR in MRAID JS bridge
/workers/tiktok-packager -> builds ZIP with TikTok manifest
/workers/html-renderer -> inlines everything into single HTML
```
**Step 5: MRAID renderer in detail.** The MRAID renderer injects the MRAID event system. It wraps the game HTML with an expand/collapse controller, adds the required `window.mraid` hooks, and injects network-specific tracking pixels. The output passes any MRAID compliance checker.
```javascript
// Simplified MRAID wrapper injection
function buildMraidAd(canvas) {
return `
<!DOCTYPE html>
<html>
<head>
<script>
// MRAID 2.0 bridge
if (typeof mraid === 'undefined') {
window.mraid = {
isViewable: () => true,
expand: () => { /* handle expand */ },
close: () => { /* handle close */ },
open: (url) => { window.open(url); }
};
}
mraid.addEventListener('ready', () => {
mraid.expand();
});
</script>
</head>
<body>${canvas}</body>
</html>
`;
}
```
**Step 6: TikTok packager.** Constructs a ZIP archive with the required directory structure — root `index.html`, `assets/` folder, and `manifest.json` with ad metadata. Cloudflare Workers use the Compression Streams API for native ZIP construction without third-party dependencies.
**Step 7: Single-file HTML fallback.** For networks that can't run MRAID or ZIP, this renderer produces a fully self-contained file. It converts all images to base64 data URIs, inlines CSS and JavaScript, and minifies the output. The file typically stays under 500 KB — well below the 2 MB ceiling.
Results / Metrics
PlayableAd Studio's multi-format pipeline delivers measurable marketing automation wins:
- **5-minute variant turnaround** — from LLM brief to fully exported MRAID, TikTok, and HTML ad. Manual production across three formats previously took 2–4 hours per variant.
- **8+ output variants per generation** — the typical run produces MRAID (Google, Meta, Unity, AppLovin, Vungle) plus TikTok, single-file, and a lightweight interstitial variant.
- **100% MRAID compliance rate** — structural understanding of each network's spec means ads pass QA on first submission, compared to a ~30% rejection rate for manual production.
- **24x campaign velocity increase** — a team that previously produced 20 playable ads per month now ships 480+ variants across all target networks.
- **Zero regressions on format changes** — the canonical IR decouples game logic from format-specific rendering. When TikTok updated its manifest format, only the TikTok packager needed changes.
- **<2% variant failure rate** — remaining failures are almost exclusively network-side issues, not format or asset problems.
Key Takeaways
A multi-format export pipeline isn't a nice-to-have feature — it's the core enabling architecture for marketing automation at scale.
1. **Canonical IR separates concerns.** The IR pattern lets creative generation, asset production, and format packaging evolve independently. Changes to Canva templates don't break MRAID output; changes to ad network specs don't break the creative pipeline.
2. **Serverless parallelisation is a force multiplier.** Cloudflare Workers' ability to fan out rendering tasks concurrently means the marginal cost of adding a format is near zero. A new network format requires one new Worker function and one schema entry.
3. **BYOK enables vendor freedom.** Clients bring their own API keys, so the platform isn't locked to a single LLM provider. If Gemini beats GPT-5 at game generation, clients flip a config flag — no data migration, no contract renegotiation.
4. **Embedded analytics closes the loop.** Each exported ad carries tracking pixels and event listeners that report back to the analytics engine. Performance data from live campaigns feeds into the LLM prompt, improving future ad generation based on real CTR and conversion metrics.
5. **The 5-minute barrier changes team structure.** When a campaign needs 200 variants across 25 markets and each variant costs 5 minutes of automated pipeline time instead of 4 hours of creative labour, the economic model flips. Agencies shift from per-asset pricing to campaign-level services, and the bottleneck moves to strategy and optimisation.
The hybrid export architecture is why PlayableAd Studio doesn't just generate playable ads — it deploys them. Every technical decision in the pipeline, from the IR schema to the parallel Worker DAG, exists to serve one marketing outcome: getting the right ad in the right format on the right network before the campaign window closes.