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 embedded raster catalog used by each image property's single source select
• The raw applied editor config and lifecycle callbacks when Editor mode is active
• 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 importstatements 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

Applied editor callbacks and non-toolbar config execute in the exported standalone page after its binding and snapshot-restore lifecycle. Changes still marked as an unapplied draft remain out of the export. The 2.4.3 release was exercised with a live marker in an exported page, confirming that the applied script executes outside RAV.

ViewModel Control Parity

Standalone exports rebuild the live ViewModel list-label resolver and embedded-image catalog. Authored list labels therefore follow the same direct-name or unique canonical-string rule, with ambiguous items falling back to Row N, and image properties retain one full-width select containing every embedded raster asset,Open file…, and Clear, backed by a hidden file input. The catalog preserves uniqueFilename identity, magic-byte MIME detection, and duplicate-name disambiguation.

Canvas Sizing in Exports

When the viewer is pinned to a fixed canvas size, exported demos and generated snippets preserve those exact pixel dimensions. In RAV, overflow-safe auto margins keep a fixed canvas centered while it fits; once it exceeds the viewport, those margins collapse so scrolling starts at the authored top-left origin.

Limitations

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