Exporting Designs

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.

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.

​

What the MP4 captures

The render worker uses a CanvasComposition Remotion component that maps Fabric primitives to Remotion equivalents: 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: 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: When these ship, this page updates.