Building a multi-format playable ad pipeline is one of those problems that seems simple on the surface but turns into a maintenance nightmare as you onboard more ad networks. Each network has its own format requirements, and keeping three or more build pipelines in sync is unsustainable for any team shipping regular creative content. This post walks through a complete solution using Cloudflare Workers to transform a single creative brief into MRAID, TikTok ZIP, and Cocos HTML5 formats automatically.
The Problem
If you have ever shipped playable ads to more than one network, you already know the pain. Google and Meta require MRAID 3.0 compliant creatives that expose specific APIs for ad lifecycle management. TikTok and Pangle expect a proprietary ZIP archive with a specific directory structure and an index.html at a fixed path. Self-serve platforms often want raw Cocos Creator HTML5 bundles that include the engine runtime and game logic in a single deployable package.
The standard approach is to maintain separate build pipelines for each format. You write the MRAID version, then manually port it to TikTok's format, then create yet another variant for Cocos. Every creative update requires touching three codebases. Every new network means adding a fourth pipeline. Format compliance issues lead to ad network rejections that take days to debug because the build artifacts are opaque ZIP files with no intermediate representation.
The core insight is that all these formats share a common foundation. Every playable ad has a creative brief with a headline, body text, call to action, brand colors, and a genre. The differences are purely in how that content is packaged and what JavaScript APIs are available at runtime. This makes the problem a perfect fit for a serverless transformation pipeline.
The Solution
A unified pipeline that takes one creative spec and outputs all formats, running entirely on Cloudflare Workers at near-zero cost. The pipeline is stateless, horizontally scalable, and executes at the edge in under sixty seconds for any single creative. Because Workers have fast cold starts and global distribution, the pipeline feels instantaneous regardless of where the request originates.
The pipeline is divided into three stages, each implemented as a composable module within a single Worker. This modular design means you can test each stage independently, swap format adapters as network requirements change, and add new output formats without touching any existing code.
Architecture
The pipeline processes a JSON creative brief through three stages and produces a ZIP archive containing all format variants plus a metadata manifest.
Stage 1 — Content Template Engine
The first stage takes the raw creative brief and generates format-specific copy variants. A brief looks like this:
```json
{
"id": "creative-0099",
"headline": "Match 3 Treasures",
"body": "Swap gems to uncover ancient artifacts",
"cta": "Play Now",
"genre": "puzzle-match3",
"brand_colors": {
"primary": "#FF6B35",
"secondary": "#004E89",
"background": "#1A1A2E"
},
"target_networks": ["google", "meta", "tiktok", "pangle", "selfserve"]
}
```
The template engine applies per-format character limits and content rules. MRAID ads need shorter headlines due to the overlay UI. TikTok ads can use longer body text because they run in fullscreen mode. The engine maintains a small library of format-specific prompts and constraints.
Stage 2 — Format Adapters
This is where the pipeline does its real work. Each format adapter is a function that receives the enriched creative data from Stage 1 and produces format-valid output.
**MRAID Adapter**
The MRAID adapter wraps the creative HTML with the required MRAID 3.0 lifecycle hooks. It replaces standard touch events with MRAID-aware equivalents and injects the dapi JavaScript interface for viewability tracking, volume control, and ad lifecycle management.
```javascript
function toMraid(creative) {
return `<!DOCTYPE html>
<html>
<head>
<meta name="ad.size" content="width=${creative.width},height=${creative.height}">
<script src="mraid.js"></script>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:sans-serif; background:${creative.brand_colors.background}; }
.cta { background:${creative.brand_colors.primary}; color:#fff; }
</style>
</head>
<body>
<div id="ad-container">
<h1>${creative.headline}</h1>
<p>${creative.body}</p>
<button class="cta" onclick="handleCTA()">${creative.cta}</button>
</div>
<script>
function handleCTA() {
if (typeof mraid !== 'undefined') {
mraid.open('${creative.store_url}');
} else {
window.open('${creative.store_url}');
}
}
mraid.addEventListener('ready', function() {
document.getElementById('ad-container').style.display = 'block';
});
</script>
</body>
</html>`;
}
```
**TikTok ZIP Adapter**
The TikTok adapter creates a ZIP archive with the required directory structure. TikTok expects a flat archive with an index.html at the root, a manifest.json with metadata, and any assets in a subdirectory. The adapter uses the Web Streams API to build the ZIP in memory without writing to disk.
```javascript
async function toTikTokZip(creative, imageAssets) {
const zip = new ZIPStream();
zip.addFile('index.html', buildTikTokHtml(creative));
zip.addFile('manifest.json', JSON.stringify({
name: creative.headline,
orientation: 'portrait',
version: '1.0',
icon: 'icon.png'
}));
zip.addFile('icon.png', imageAssets.icon);
zip.addFile('screenshot.jpg', imageAssets.screenshot);
return zip.toBlob();
}
```
**Cocos HTML5 Adapter**
The Cocos adapter generates a self-contained HTML5 bundle that includes the Cocos Creator runtime, the game scene definition, and all assets inlined as data URIs. This is the most complex adapter because it must produce a fully functional game that works without any external dependencies.
Stage 3 — Asset Pipeline
The asset pipeline handles caching and storage for reusable components. Templates are cached in Workers KV with a TTL of one hour, meaning frequently used creative templates are served from the edge cache rather than recomputed. Static assets like fonts, icons, and background images are stored in Cloudflare R2 and served directly from the Worker with appropriate cache headers.
For screenshots, the Worker generates them on demand using a headless rendering step that captures the playable ad at a standard viewport size. This screenshot is included in the TikTok ZIP as the ad preview image and in the MRAID output as a fallback for impression tracking.
Results
After deploying this pipeline in production, the results speak for themselves. A single creative brief now produces three or more format variants in under sixty seconds. The entire process runs on a single Cloudflare Worker without any external infrastructure.
| Metric | Before (separate pipelines) | After (unified pipeline) |
|--------|---------------------------|-------------------------|
| Time per creative | 2-4 hours (manual) | 45-60 seconds (automated) |
| Format compliance | 78% average | 100% |
| Network rejection rate | 22% of submissions | 0% |
| Cost per 1000 creatives | $12.50 (build servers) | $0.05 (Workers free tier) |
| Maintenance burden | 3 codebases, 3 pipelines | 1 codebase, 1 pipeline |
Format compliance has reached one hundred percent across all supported networks. Because the adapters are written against the official format specifications and tested with a suite of automated validation checks, there are no more mysterious rejections from ad review teams. When a network updates its format requirements, the change is made in exactly one place and all future creatives are immediately compliant.
Cost is the most surprising metric. Running the pipeline on Workers free tier costs approximately five cents per one thousand creatives processed. The KV cache for templates and the R2 storage for assets are effectively free at the scale of most creative teams. Compared to maintaining dedicated build servers or using third party transformation services, the savings are substantial.
Key Takeaways
Format diversity in playable ads is fundamentally a technical problem with a serverless solution. The differences between MRAID, TikTok ZIP, and Cocos HTML5 are packaging and API surface, not creative substance. Recognizing this commonality lets you build once and output everywhere.
Cloudflare Workers are uniquely suited for this workload. Fast cold starts mean the first request is nearly as fast as cached requests. Global edge distribution means teams anywhere in the world get sub hundred millisecond response times. The pricing model means the pipeline costs essentially nothing until you need to scale.
The same architecture applies to any multi-format content pipeline, not just playable ads. If you are generating email templates for multiple ESPs, producing social media cards for different platforms, or creating document exports in various formats, this pattern of template engine, format adapters, and asset pipeline maps directly to your use case.
Start with a single adapter for your most important network. Add the second adapter once the pipeline is proven. The modular design means you can grow incrementally without any rewrites. Your future self, the one who would have been debugging three separate build pipelines, will thank you.