Lighter than video
For the same explainer — no heavy clip to host, buffer, or stream for every single view.
Embed guide & integration reference
Embed AnimJS animations in your site
Put a playable explainer in a hero or section without hosting a video file. Download the JSON, add the AnimJS player once, and the animation draws live in the browser — free to embed, easy to update when the product or lesson changes.
Why embed
Data in the browser, not video pixels
Three reasons to drop an explainer into your page instead of streaming a clip.
Update without re-exporting
Change a line, a label, or a number, then replace the small JSON file on your site. No video to re-render or re-upload.
Free to embed on every plan
Playable and scrubbable in place with captions built in. No embedding fees or feature gates.
Live player component
Inspect hero.json → See it rendered live in the page
The card below renders the shipped <explainer-player> element directly from hero.json.
<explainer-player src="/player/hero.json" autoplay loop> Integration options
Deployment models
Self-host the JSON and player scripts on your own domain (available today).
Self-host
Host JSON + player scripts on your own domain
Download the animation .json from Studio, serve it alongside your site assets, and load the four player scripts in order. Fonts load from CDN by default, or locally when self-hosting.
<!-- Optional: to serve fonts locally instead of CDN, host fonts/ next to scripts and set: -->
<!-- <script>window.EXPLAINER_FONT_LOCAL = true;</script> -->
<!-- 1. Load the four player scripts in order -->
<script src="/player/explainer-metrics.js"></script>
<script src="/player/explainer-schemas.js"></script>
<script src="/player/explainer-core.js"></script>
<script src="/player/explainer-player.js"></script>
<!-- 2. Place the web component (natural height) -->
<explainer-player
src="/player/hero.json"
autoplay
loop
style="width:100%;display:block">
</explainer-player> Font delivery: By default the player fetches its pinned fonts from cdn.jsdelivr.net (allow it in font-src under a CSP). To serve fonts yourself, host fonts/ next to the scripts and set window.EXPLAINER_FONT_LOCAL = true first.
How to embed
Step-by-step self-hosting
From Studio export to a working section in four steps.
Download your animation
Export your animation as a .json file from AnimJS Studio. Downloading is free on every plan.
Format check: The file is a valid schema-checked JSON document containing objects, timeline beats, and text labels.
Add the player scripts once
Include the player scripts in your page template. You only need to load the player scripts once per page, even if your page contains several different explainer sections.
Asset dependencies: Load the four scripts in order. Pinned fonts load from CDN by default, or locally from
fonts/ (see font delivery note above for CSP and EXPLAINER_FONT_LOCAL details).
Place the element and point to your JSON
Add <explainer-player src="/path/to/animation.json"></explainer-player> exactly where the animation should render on the page.
CORS requirement: If you host the JSON file on a separate CDN or domain, configure your server to return
Access-Control-Allow-Origin headers so the browser's fetch() can load it.
Publish and check mobile
Deploy your page. Confirm the animation plays and scrubs smoothly, and check responsive display on phones and tablets.
Responsive sizing: Host caption and links in a sibling container below the player so the custom element can use its natural height (SVG stage plus controls). Reserve layout with a wrapper that does not clip controls over captions.
API Reference
Player element attributes
Configurable HTML attributes supported by the shipped <explainer-player> custom element (from PLAYER-API.md).
| Attribute | Type | Default | Description |
|---|---|---|---|
src | string (URL) | — | URL of the animation document (plain JSON). Loading is schema-validated before drawing. |
base | string (URL) | doc folder | Base folder used to resolve relative image references inside the document. Defaults to the document's own URL base. |
loop | boolean | false | When present, the timeline wraps back to the beginning upon reaching the end instead of stopping. |
autoplay | boolean | false | Automatically begins playback when the document finishes loading. Automatically suppressed if the user prefers reduced motion. If browser autoplay policy blocks sound, a "Tap for sound" button appears. |
nocontrols | boolean | false | Hides the built-in playback bar (play/pause toggle, timeline scrubber, and time display). Controls show by default. |
noaudio | boolean | false | Disables spoken narration playback and hides the Mute button. |
audio-base | string (URL) | page URL | Base URL used to resolve relative beat.audio clip URLs. Must be an absolute URL (or omit the attribute to default to the page URL); relative bases like a single-dot path are not supported currently and will fail to resolve clips. |
edit | boolean | false | Editor mode: suppresses the interactive overlay so clicking an entity on stage selects it instead of triggering interaction (narration is also off). |
track | boolean | false | Emits DOM explainer-event custom events for timeline beats, hovers, taps, state changes, jumps, and holds. |
film | boolean | false | Export / rendering mode: every frame renders the lowered document at time t without overlays or running timers. |
link-hosts | string | "" | Space-separated list of approved hostnames that https: jumps can open directly without prompting the user. |
Controls and audio behavior: Play, pause, and scrubber UI show by default (there is no
controls attribute; use nocontrols to hide). When an animation JSON includes beat.audio narration clips, the player plays them via an internal audio element and shows a Mute toggle (unless noaudio or edit is set). If setting audio-base, must be an absolute URL (omitted defaults to the page URL; relative bases like a single-dot path are not supported). The HTML muted attribute is not observed by the web component (observed attributes are only src and nocontrols); mute control is handled through the player’s Mute UI button or JS property (player.muted = true), or by passing the noaudio attribute.
Audio & Narration
Captions and spoken narration
Captions are always rendered as part of the animation. When an animation document includes beat.audio clips, the web player plays spoken narration and provides a Mute button (or use noaudio). For standalone video files with narration, export an MP4.
Note: The web player plays spoken narration when beat.audio clips are present, with built-in Mute UI controls (or configure via noaudio and audio-base; audio-base requires an absolute URL, as relative bases like a single-dot path are not supported and omitted defaults to the page URL). Many scenes remain silent without audio clips. Note that the HTML muted attribute is not an observed attribute on the web component, and controls display by default without a controls attribute. For packaged video narration in standalone media files, export an MP4.
Best Practices
Page speed and accessibility checklist
Ensure smooth performance, zero layout shift, and accessible experiences for all visitors.
Script loading: Load player scripts with defer, and lazy-load animations located below the fold.
Prevent layout shifts: Reserve container space or display a poster frame so layout does not jump, while allowing natural height for the player stage and controls.
Accessible descriptions: Provide a text description or caption near the animation for people who cannot see it. Captions are drawn into the animation.
Respect reduced motion: Start paused for visitors who set prefers-reduced-motion and offer an explicit play trigger.
Platform compatibility
Works anywhere that allows custom HTML
Works anywhere that allows custom HTML with <script> tags. Use absolute URLs to where you host the player files.
Add the player scripts to your page template or embed container, and reference the player files and animation JSON with absolute URLs.
Licensing & Hosting
Hosting freedom and ownership
Clear rules on ownership and self-hosting options.
Self-host today
Host the .json and player yourself with no call-home requirements. Self-hosting works today and is free on every plan.
Client sites & templates
Embed animations in client projects and website templates with full control over hosting and display.
Schema-validated JSON
Every animation exports as a portable, schema-validated JSON document rendered by a standalone web component.
Make your ideas move.
Free plan: 5 AI drafts a month. Editing, embedding and sharing always free. See pricing →