> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](#how-mp4-rendering-works).
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.

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

## 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](#whats-coming).
* **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`](/design/motion-graphics#when-motion-isnt-the-right-answer) 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:

<CardGroup cols={2}>
  <Card title="GIF export" icon="film">
    FFmpeg post-step on the worker for email-friendly looping animations
  </Card>

  <Card title="Audio + voiceover" icon="microphone">
    ElevenLabs voiceover generation, drop on canvas as audio track, mix into MP4
  </Card>

  <Card title="Multi-clip timeline" icon="timeline">
    Sequence multiple designs into a single Reel with drag-to-reorder and trim
  </Card>

  <Card title="Per-clip mute toggle" icon="volume-xmark">
    Audio defaults to muted in editor; per-clip unmute on export
  </Card>
</CardGroup>

When these ship, this page updates.