Exporting Designs

Render your design to PNG or MP4 — the rasterize step happens at export, not during iteration

You only render to a flat file when you’re done iterating. Until then, every layer stays editable and motion replays from JSON, not from a baked clip. This page covers what you get when you click Export.

Static designs → PNG

For designs without animation:

1. Click Export in the top-right of the editor.
2. Pick PNG.
3. The file downloads at the artboard’s native dimensions (1:1 pixel ratio with what you see on the canvas).

PNG export is client-side — Fabric.js rasterizes the canvas and triggers a browser download. No server round-trip, no queue.

Animated designs → MP4

For designs with any layer animation:

1. Click Export in the top-right of the editor.
2. Pick MP4.
3. A render job submits to the Remotion render worker.
4. The worker bundles the canvas state, plays the same animation runtime server-side, captures every frame, and encodes to MP4.
5. The file lands in your project’s media library and downloads automatically.

Render time depends on duration and resolution. A typical 5-second 1080×1080 design renders in ~30-90 seconds.

MP4 export is a queued job, not a synchronous download. You’ll see a progress indicator. You can keep editing the design while it renders — the exported MP4 is a snapshot at the moment you clicked Export.

What the MP4 captures

The render worker uses a CanvasComposition Remotion component that maps Fabric primitives to Remotion equivalents:

Fabric primitive	Renders as
Text layer	Remotion <AbsoluteFill> with the text styled via inline CSS
Rectangle / circle	SVG shape
Image	<Img> from the same S3 URL the canvas loads
Animation property	Remotion interpolation over the timeline

Because the render worker reads the same animation schema your canvas plays, the exported MP4 is frame-accurate to what you saw in the editor. There’s no drift, no “looks different in Remotion than in Fabric.”

What the MP4 doesn’t capture (current limitations)

• Audio — animated designs are visual only today. Audio tracks and voiceovers are on the roadmap.
• GIF format — MP4 only for now. Email teams who need GIF can convert via FFmpeg (-vf fps=15,scale=480:-1:flags=lanczos); native GIF export is on the roadmap.
• Multi-clip timeline — one canvas exports as one continuous MP4. Sequencing multiple designs into a multi-scene Reel is on the roadmap.

For these cases today, export to MP4 and finish in CapCut / Premiere / iMovie.

Recommended dimensions

The artboard size is locked when you create the design. If you’re not sure what to pick:

Surface	Dimensions	FPS	Typical duration
Instagram post	1080×1080	30	3-15s
Instagram Story / Reel	1080×1920	30	5-15s
TikTok	1080×1920	30	9-30s
YouTube / LinkedIn video	1920×1080	30	5-30s
Email banner	600×200	24	3-5s (loop)
Display ad (web)	Standard IAB sizes (728×90, 300×250, 160×600)	24	5-15s

The Animation panel shows total canvas duration in milliseconds. Set it to match the platform’s expected length before you export.

How MP4 rendering works

Behind the scenes:

1. Builder serializes the canvas (layers + animation metadata + canvas-level config) to JSON
2. POST to /api/marketing/design/[id]/export-video on the builder
3. Builder forwards the JSON to the Remotion render worker (hiveku_remotion_worker, hosted on Render.com)
4. Worker bundles a Remotion composition with CanvasComposition as the root
5. Worker invokes @remotion/renderer with Puppeteer + Chromium under the hood
6. MP4 is uploaded to your project’s S3 bucket
7. Builder receives the S3 URL via SSE and triggers the download

This is the same render worker that powers legacy generate_motion_graphic baked-MP4 generation. The difference is the input: legacy mode renders a hardcoded Remotion template with prop slots; export mode renders your canvas state as the source of truth.

Versioning and re-export

Every design saves continuously to builder_code_versions as you edit. The MP4 you exported is a snapshot at the moment of export — if you keep editing and want a new version, click Export again. Older MP4s stay in your media library; nothing is overwritten.

This means you can:

• A/B export two variations of the same design
• Roll back to an older edit if something goes wrong
• Share the MP4 with a teammate while continuing to iterate

What’s coming

Roadmap items relevant to export:

GIF export

FFmpeg post-step on the worker for email-friendly looping animations

Audio + voiceover

ElevenLabs voiceover generation, drop on canvas as audio track, mix into MP4

Multi-clip timeline

Sequence multiple designs into a single Reel with drag-to-reorder and trim

Per-clip mute toggle

Audio defaults to muted in editor; per-clip unmute on export

When these ship, this page updates.