Embed Rive in HTML

What is a Rive .riv file?

A .riv file is an interactive animation file created in Rive. Unlike many traditional animations, Rive can include interactivity (for example, hover effects, toggles, and state machines) and is rendered in real time.

What you need

A canvas element where Rive will draw the animation.
The Rive web runtime script.
A public URL to your .riv file.

This is the simplest working example. It loads the Rive runtime, points it at your .riv file URL, and starts playing automatically.

See the Pen Embed Rive in HTML by Motio Pix (@motiopix) on CodePen.


<!-- Canvas is where Rive renders. Give it a visible size. -->
<canvas id="mp-rive" width="320" height="320" style="width:320px;height:320px;"></canvas>

<!-- Load the Rive runtime once per page -->
<script src="https://unpkg.com/@rive-app/canvas@latest"></script>

<script>
  // Insert your hosted .riv URL here
  var RIVE_URL = "https://dev.motiopix.com/files/rive.riv";

  // Create the Rive instance
  new rive.Rive({
    src: RIVE_URL,
    canvas: document.getElementById("mp-rive"),
    autoplay: true // true = start playing immediately, false = start paused
  });

  // Tip: If your .riv contains multiple animations or state machines,
  // you can specify them (names must match your Rive file):
  // animations: "Animation 1"
  // stateMachines: "State Machine 1"
</script>

How autoplay works

autoplay: true means the animation starts playing as soon as the file loads.
autoplay: false means the animation loads but stays paused until you play it with code.

Responsive sizing (recommended for websites)

Rive draws into a canvas. A common beginner mistake is setting CSS size but not canvas size. This example sets both and keeps the animation responsive inside a square area.


<div style="max-width:420px;width:100%;">
  <canvas id="mp-rive-responsive" style="width:100%;aspect-ratio:1/1;"></canvas>
</div>

<script src="https://unpkg.com/@rive-app/canvas@latest"></script>

<script>
  // Insert your hosted .riv URL here
  var RIVE_URL = "https://dev.motiopix.com/files/rive.riv";

  var canvas = document.getElementById("mp-rive-responsive");

  // Match the canvas internal resolution to its displayed size (for crisp rendering)
  function resizeCanvas() {
    var rect = canvas.getBoundingClientRect();
    var dpr = window.devicePixelRatio || 1;
    canvas.width = Math.round(rect.width * dpr);
    canvas.height = Math.round(rect.height * dpr);
  }

  resizeCanvas();
  window.addEventListener("resize", resizeCanvas);

  new rive.Rive({
    src: RIVE_URL,
    canvas: canvas,
    autoplay: true
  });
</script>

Fit and alignment (so it doesn’t look cropped or stretched)

Rive supports “fit” modes similar to images in CSS. The most common options:

contain: show the full animation, may leave empty space.
cover: fill the area, may crop edges.
fill: stretch to fill, may distort (usually not recommended).


<canvas id="mp-rive-fit" width="320" height="320" style="width:320px;height:320px;"></canvas>
<script src="https://unpkg.com/@rive-app/canvas@latest"></script>

<script>
  // Insert your hosted .riv URL here
  var RIVE_URL = "https://dev.motiopix.com/files/rive.riv";

  new rive.Rive({
    src: RIVE_URL,
    canvas: document.getElementById("mp-rive-fit"),
    autoplay: true,
    layout: new rive.Layout({
      fit: rive.Fit.Contain,      // Try: Contain, Cover, Fill
      alignment: rive.Alignment.Center // Try: TopLeft, Center, BottomRight, etc.
    })
  });
</script>

Play and pause buttons

This adds simple UI controls. This is useful if you don’t want autoplay or you want users to control playback.


<canvas id="mp-rive-controls" width="320" height="320" style="width:320px;height:320px;"></canvas>

<div style="margin-top:10px;display:flex;gap:10px;">
  <button type="button" id="mp-rive-play">Play</button>
  <button type="button" id="mp-rive-pause">Pause</button>
</div>

<script src="https://unpkg.com/@rive-app/canvas@latest"></script>

<script>
  // Insert your hosted .riv URL here
  var RIVE_URL = "https://dev.motiopix.com/files/rive.riv";

  var r = new rive.Rive({
    src: RIVE_URL,
    canvas: document.getElementById("mp-rive-controls"),
    autoplay: false // start paused so Play/Pause makes sense
  });

  document.getElementById("mp-rive-play").addEventListener("click", function () {
    // Plays all animations currently set to play
    if (r && r.play) r.play();
  });

  document.getElementById("mp-rive-pause").addEventListener("click", function () {
    if (r && r.pause) r.pause();
  });
</script>

State machine example with clickable buttons

This example uses a Rive animation that was authored with listeners and a state machine. Unlike visual-only buttons, these buttons are wired inside the .riv file and respond to real user clicks on the web.

The animation contains a state machine that controls which animation plays.
The buttons are connected using listeners inside the Rive editor.
When a user clicks a button, the state machine transitions automatically.
No manual trigger firing is required in JavaScript.

This is the recommended setup when a Rive file includes clickable elements authored by the animator.

See the Pen Embed Rive in HTML - state machine inputs by Motio Pix (@motiopix) on CodePen.

Credit: Skills Demo created by JcToon https://rive.app/@JcToon


<!-- Canvas where the Rive animation is rendered -->
<canvas id="mp-rive-skills" width="420" height="420"
        style="width:520px;height:420px;display:block;"></canvas>

<!-- Load the Rive canvas runtime -->
<script src="https://unpkg.com/@rive-app/canvas"></script>

<script>
  // Insert your hosted .riv file URL here
  var RIVE_URL = "https://dev.motiopix.com/files/skills-demo.riv";

  // Create the Rive instance
  var riveInstance = new rive.Rive({
    src: RIVE_URL,
    canvas: document.getElementById("mp-rive-skills"),
    autoplay: true,

    // Insert the state machine name exactly as defined in Rive
    stateMachines: "skill-controller",

    onLoad: function () {
      // Important: aligns pointer events with the visual layout
      riveInstance.resizeDrawingSurfaceToCanvas();
    }
  });

  // Keep click areas correct when the window resizes
  window.addEventListener("resize", function () {
    riveInstance.resizeDrawingSurfaceToCanvas();
  });
</script>

How the interaction works

The canvas receives pointer events (mouse or touch).
Listeners inside the .riv file detect button clicks.
The state machine switches between Beginner, Intermediate, and Expert states.
The web code only needs to load the file and run the correct state machine.

Important notes

If a .riv file has no listeners or inputs, buttons will not respond to clicks.
State machine and artboard names must match exactly.
If clicks feel misaligned, always call resizeDrawingSurfaceToCanvas after load.

Common issues and fixes

If you see a blank area, confirm the canvas has a visible size (width/height in CSS and a non-zero layout area).
If the .riv URL returns 403/404, the animation cannot load. Open the URL in a browser to confirm it downloads.
If the animation looks blurry, use the responsive example that sets canvas width/height using devicePixelRatio.
If you use a strict Content Security Policy, you may need to allow scripts from unpkg.com.

Performance tip

Canvas animations can be heavier than simple icons. Avoid having many Rive canvases playing at once on one page, and pause animations that are off-screen.

Was this article helpful?

0 out of 0 found this helpful