Export + Snippets

RAV can export self-contained HTML demo files and generate canonical web instantiation snippets for embedding animations in your codebase.

What Gets Exported

• The .riv binary, base64-encoded and embedded
• The selected runtime (Canvas or WebGL2) bundled inline
• The selected runtime semver baked in
• The current artboard, playback target, and active live source mode
• Only the checked or changed ViewModel / state-machine values
• The generated canonical instantiation snippet (CDN and local variants)
• Canvas sizing mode (auto or fixed pixel dimensions)
• Complete styling for standalone viewing

Snippet & Export Controls

The export dialog is shared by snippet generation and standalone export. It provides:

• Tree checkboxes — branch checkboxes select entire nested sections, leaf checkboxes select individual controls
• Presets — CHANGED ONLY (default), SELECT ALL, CLEAR
• Package source — CDN vs LOCAL (see below)
• Snippet mode — COMPACT vs SCAFFOLD (see below)
• Inline preview — live code preview with COPY button
• GENERATE SNIPPET — copies the snippet to clipboard
• EXPORT — saves a standalone HTML file

Package source: CDN vs LOCAL

Controls how the generated snippet pulls in the Rive runtime.

• CDN (default) — emits a runtime <script> tag pointing at the pinned @rive-app/webgl2 or @rive-app/canvasversion on jsDelivr, then attaches helpers to window.ravRive. Drop-in for static HTML, design tools, prototypes, and CodePen.
• LOCAL — emits ES-module import statements that resolve against your project’s node_modules (e.g. import { Rive } from "@rive-app/webgl2"). Pick this when you’re inside a bundler — Vite, Next.js, Webpack — so version pinning, tree-shaking, and TypeScript types come from your own package.json.

Snippet mode: COMPACT vs SCAFFOLD

Controls how much of the bound control surface ends up in the snippet body.

• COMPACT (default) — only the controls you ticked in the tree appear, with their current live values inlined. Smallest, ready-to-paste form for a finished embed where you just want this one configuration to render.
• SCAFFOLD — emits every available control on the loaded animation, but comments out the unselected ones with their default values. Ideal as a starter template — you can uncomment lines later to expose more controls without re-opening RAV. Pairs well with SELECT ALL or CHANGED ONLY presets when you want a documented map of the full control surface.

These two axes are independent — CDN + COMPACT is the default for prototyping embeds, LOCAL + SCAFFOLD is the most useful when you’re pulling the snippet into an app and want all controls documented. MCP clients can drive both via thepackage_source and snippet_mode arguments ongenerate_web_instantiation_code and rav_export_demo_visual.

Exporting Workflow

1. Load and configure your animation in RAV
2. Adjust playback, runtime, controls, and canvas sizing to the desired state
3. Click EXPORT in the toolbar
4. Use the dialog to curate which controls are serialized
5. Copy the snippet directly or save a standalone HTML file

Canvas Sizing in Exports

When the viewer is pinned to a fixed canvas size, exported demos and generated snippets preserve those exact pixel dimensions. The canvas stays centered in the viewport rather than pinning to the upper-left corner.

Limitations

• WebGL2 exports require a browser with WebGL2 support
• File size depends on the embedded .riv animation