Exporting to files

Every animation in the editor can be exported as a file you own — PNG, SVG, GIF, MP4, or WebM — with no server round-trip. Open the editor, compose, hit Export & Share, pick a format. The file lands in your downloads folder in a second or two.

Exports are the right choice when you want:

• A file you control (slide deck, video essay, marketing asset, tarball).
• No external dependencies — the image/video is self-contained; no network fetch at view time.
• Platforms that don't render remote images (some CMSes, some email clients, offline docs).

If instead you want a URL that stays updatable and tracks view analytics, see the Embedding guide. The two are complementary — exports for owned-asset workflows, embeds for living documents.

Formats at a glance

Pick based on where the file is going:

• Paste into a GitHub README / docs site? SVG.
• Drop into a slide deck or video editor? MP4.
• Send in a Slack message? GIF (Slack freezes animated SVG previews).
• Put on an extension Marketplace listing? GIF (the Marketplace sanitizer strips SVG animation).
• Use as an email header or static thumbnail? PNG.

How exports run

All export rendering happens in your browser. The pipeline is:

1. The live DOM canvas is captured frame-by-frame (via html-to-image).
2. Frames are encoded client-side: PNG is a one-frame snapshot; GIF uses the gifenc encoder; MP4 and WebM go through WebCodecs
   • mediabunny.
3. A Blob is assembled and handed to the browser as a download.

No upload, no queue, no server-side encode. We never see your code during an export. (We do see the snippet metadata if you also hit Save — that's a separate action.)

SVG is the exception: it's rendered on our edge Cloudflare Worker when you hit Copy embed, because the same SVG needs to be served by URL later. For Export → SVG, the same worker renders once and streams the file to your browser.

Browser support

Single-frame PNG, SVG, and GIF work everywhere a modern browser runs. Video formats depend on WebCodecs + codec availability:

Firefox users clicking MP4 or WebM see an inline alert offering GIF instead; the rest of the editor is unaffected.

Free tier vs. Pro

Both tiers get the full format menu. The difference is finish and scale:

The watermark is deliberately subtle — ~10px, 35% opacity. If you're evaluating before committing to a plan, free exports are usable in public posts; for anything polished (a slide deck, a launch video, a Marketplace listing), upgrade first and skip the mark.

Troubleshooting

"My MP4 looks glitchy in VS Code's video preview." VS Code's built-in video preview uses a reduced codec profile. Open the file in QuickTime / VLC / Chrome instead — or re-export as WebM for in-editor preview.

"The GIF has color banding." GIF is a palette format (256 colors). Busy themes with many similar shades will quantize visibly. Switch to MP4 or SVG if quality matters more than compatibility.

"Export button is disabled." You've hit the monthly quota. Upgrade to Pro, or wait for the counter to reset on the first of the month. The exact count is visible in your dashboard.

"The file opens blank in a web browser." For SVG exports: some older browsers need xml:space="preserve" on the SVG root, which we already include. Check the file extension — some download managers strip it. For video: confirm the browser supports H.264 or VP9 decode.

See also: Embedding guide — for URL-based sharing · API reference — for programmatic exports via POST /api/snippets?output=svg.