How to add Rive animations to WordPress, with or without a plugin

Add Rive animations to WordPress with a plugin or with a few lines of code. Works in Gutenberg, Elementor, Bricks and Divi. Copy-paste snippets included.

Rive in WordPress

Most WordPress sites get built in a page builder. Elementor, Bricks, Divi, the block editor. You drag in a section, drop in an image, adjust the padding, hit publish. It works, and it's why so many developers and site owners never touch a theme file.

Then you try to add a Rive animation, and WordPress has no idea what a .riv file is. The Media Library refuses the upload. There's no Rive block in the inserter. And almost every Rive tutorial out there assumes you're writing React.

This guide is for the people in between: developers who build client sites in a builder, and site owners who are fine pasting a snippet but don't want to write a theme. You'll get two routes. One uses a plugin. The other is a block of code you paste once, after which adding an animation to any page takes a single line of HTML.

What you need before you start

A .riv file, first of all. If you downloaded a template from Hoverine, you already have one.

You also want the name of the file's state machine. Open the .riv in the Rive editor (the free account is enough) and look at the animations list on the left. State machines are what make Rive animations react to hovers, clicks and form input. If you load the file without naming one, it will usually just play a default timeline, and the interactive parts sit there doing nothing. We covered why that matters in our Rive vs Lottie breakdown.

Last thing: admin access to the site. A staging copy is better, since one of the steps below adds code.

Step one: get the .riv file into WordPress

WordPress only accepts file types it recognizes, and .riv isn't one of them. Try uploading it to the Media Library and you'll get "Sorry, you are not allowed to upload this file type."

Some of the plugins below fix this for you. If you're going the no-plugin route, add this snippet with a code snippets plugin like WPCode, or paste it into your child theme's functions.php:

// Allow administrators to upload .riv files to the Media Library
add_filter( 'upload_mimes', function ( $mimes ) {
    if ( current_user_can( 'manage_options' ) ) {
        $mimes['riv'] = 'application/octet-stream';
    }
    return $mimes;
} );

The current_user_can check limits uploads to administrators. .riv files are binary, and there's no good reason to let every author or subscriber account upload arbitrary binary files.

A few hosts and security plugins run their own file-type checks and will still block the upload. If that happens, skip the Media Library. Upload the file over SFTP to something like /wp-content/uploads/rive/ and use that URL instead.

Whichever way you go, copy the file's full URL. You'll need it in a minute.

Option 1: use a plugin

Fair warning: Rive support in WordPress is young. There are only a handful of plugins, and most have small install counts. That doesn't make them bad. It does mean you should test on staging before putting one on a client site.

MotionPlayer for Rive (free, block editor only)

MotionPlayer for Rive is a free plugin in the WordPress.org directory. It adds a single block to the block editor, lets you pick a .riv file from the Media Library, and registers the .riv file type so uploads just work.

It bundles Rive's WebGL2 runtime inside the plugin, so nothing loads from an outside CDN. That's a plus for privacy and for sites with strict content security policies. The block settings right now are canvas width, canvas height and an accessible name. It only works in the block editor, and at the time of writing it's on version 0.1.5 with fewer than 10 active installs.

Good pick if: you build in Gutenberg and want the shortest path from file to page.

Rive plugin from Spline for WordPress (paid; Elementor, Bricks, Divi 5)

This is the most builder-friendly option we found. It's a paid plugin with single-site and unlimited-site licenses, and it works inside Elementor, Bricks and Divi 5. It has a settings toggle that enables .riv uploads, an in-editor preview, and triggers for scroll, hover, click and page load. It also reads your file's state machine variables so you can wire up interactions without code.

For developers, it exposes every Rive instance on the page through window.riveInstances, which is handy when a client asks for something the settings panel can't do.

Good pick if: you build client sites in Elementor or Bricks and want interactivity without writing JavaScript.

GreenShift's Rive block (block editor)

GreenShift includes a Rive block in its animation add-on. You configure the file in the editor, it lazy-loads the animation, and it creates global JavaScript variables for the state machine so other blocks on the page can talk to it. If you already use GreenShift, try this before installing anything new.

Animation Handler for Rive (free, Elementor, GitHub)

A small open-source Elementor widget. You set the file, the state machine name and the layout fit, and the animation starts when it scrolls into view. It's distributed through GitHub rather than the WordPress.org directory, which usually means you update it by hand.

So which plugin?

For block editor sites, MotionPlayer is the simplest free choice. For builder sites where the client wants hover and click effects, the Spline for WordPress plugin does the most. If you're comfortable pasting code, though, the next option gives you more control than any of them and costs nothing.

Option 2: embed Rive without a plugin

We lean toward this route for client work. One less plugin to update. You decide which version of the Rive runtime loads. And the same line of HTML works in Gutenberg, Elementor, Bricks and Divi, so switching builders later doesn't break anything.

There are two pieces. Part A goes in once, site-wide. Part B is what you paste every time you want an animation.

Part A: load the Rive runtime (once)

Add this as a PHP snippet in WPCode (set to run everywhere), or append it to your child theme's functions.php:

// Load the Rive runtime and a small helper that plays any <canvas class="rive-embed">
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'rive-runtime',
        'https://unpkg.com/@rive-app/webgl2@2',
        array(),
        null,
        true
    );
    wp_add_inline_script( 'rive-runtime', <<<'JS'
(function () {
  function init() {
    var canvases = document.querySelectorAll('canvas.rive-embed');
    if (!canvases.length || typeof rive === 'undefined') return;
    var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var live = [];
    var observer = new IntersectionObserver(function (entries, obs) {
      entries.forEach(function (entry) {
        if (!entry.isIntersecting) return;
        var canvas = entry.target;
        obs.unobserve(canvas);
        var r = new rive.Rive({
          src: canvas.dataset.src,
          canvas: canvas,
          stateMachines: canvas.dataset.stateMachine || undefined,
          autoplay: !reduceMotion,
          layout: new rive.Layout({ fit: rive.Fit.Contain }),
          onLoad: function () { r.resizeDrawingSurfaceToCanvas(); }
        });
        canvas.riveInstance = r;
        live.push(r);
      });
    }, { rootMargin: '200px' });
    canvases.forEach(function (c) { observer.observe(c); });
    window.addEventListener('resize', function () {
      live.forEach(function (r) { r.resizeDrawingSurfaceToCanvas(); });
    });
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
JS
    );
} );

Here's what it does, in plain terms.

It loads Rive's official web runtime from a CDN, in the footer so it doesn't block your page from rendering. The @2 in the URL gets you the latest version 2 release with bug fixes. If you'd rather nothing ever changes without you knowing, pin an exact version number instead.

It then looks for every canvas on the page with the class rive-embed. Each one only loads its .riv file when it's about to scroll into view, so an animation in the footer doesn't slow down your hero section.

It fixes blurry canvases on high-resolution screens (that's what resizeDrawingSurfaceToCanvas is for) and redraws them when the window is resized.

And it respects visitors who have "reduce motion" turned on in their operating system. For them, the animation loads and shows its first frame, but doesn't autoplay.

About the runtime choice: Rive now recommends its WebGL2 package for most projects, because it uses the same renderer as the Rive editor, so gradients, shadows and blend modes look the way the designer built them. The catch is that browsers limit how many WebGL canvases can run on one page. If you're building a grid of 20 animated icons, swap the URL to https://unpkg.com/@rive-app/canvas@2. Same API, so nothing else in the snippet changes.

If you only use animations on a few pages, you can wrap the whole thing in a condition like if ( is_page( 'pricing' ) ) so the runtime doesn't load site-wide.

Part B: place the animation (every time)

Now, anywhere you want an animation, paste this:

<canvas class="rive-embed"
  data-src="https://yoursite.com/wp-content/uploads/2026/09/login-bear.riv"
  data-state-machine="Login Machine"
  role="img"
  aria-label="Cartoon bear that watches the login form"
  style="display:block; width:100%; max-width:480px; aspect-ratio:1 / 1; margin:0 auto;">
</canvas>

Swap in your file URL, your state machine name and a short description of what the animation shows. Change the aspect-ratio to match the artboard (a 1200 by 600 artboard would be 2 / 1).

Where to paste it depends on your builder:

  • Block editor: add a Custom HTML block.

  • Elementor: drag in the HTML widget.

  • Bricks: use the Code element.

  • Divi: use the Code module.

Most builders won't show a preview in the editor, because the runtime only runs on the front end. Save, open the page in a new tab, and it should be playing.

Talking to the state machine

Hover and click interactions built into the file just work. The state machine listens to the pointer on its own.

If you want something else on the page to drive the animation (say, firing a success animation when a form submits), the helper stores each instance on its canvas. Give the canvas an id="signup-anim" and then:

var canvas = document.getElementById('signup-anim');
if (canvas && canvas.riveInstance) {
  var inputs = canvas.riveInstance.stateMachineInputs('Login Machine');
  var success = inputs.find(function (i) { return i.name === 'trigSuccess'; });
  if (success) success.fire();
}

Booleans and numbers work the same way, except you set .value instead of calling .fire(). Our React login tutorial walks through all three input types in more detail, and the concepts carry over to plain JavaScript one to one.

When it doesn't show up

The canvas is empty

Nine times out of ten, the canvas has no height. Builders love to collapse elements that have no content. The aspect-ratio in the snippet above prevents that, but if you removed it, give the canvas an explicit height.

It works logged in, but not for visitors

That's almost always a performance plugin. WP Rocket's "Delay JavaScript execution," LiteSpeed Cache, Perfmatters and similar tools hold scripts back until someone scrolls or clicks. Add @rive-app and rive-runtime to the plugin's exclusion list and clear the cache.

The file loads on one site but not another

If the .riv lives on a different domain or a CDN, the browser needs a CORS header allowing your site to fetch it. Files in your own Media Library don't have this problem, which is one more reason to keep them there.

It plays, but the hover effects don't do anything

The state machine name doesn't match. It's case-sensitive and space-sensitive: "Login Machine" and "login machine" are different names. Open the browser console. Rive usually logs a warning that tells you what went wrong.

A note on licensing for client work

If you build sites for clients, check that your plan covers the number of sites you're shipping to. A Hoverine license covers one template on one registered site or app, and plans differ by how many sites you can hold.

FAQ

Do I need a paid Rive account to use a .riv file in WordPress?

No. The web runtime that plays .riv files is free and open source. A template downloaded from Hoverine plays without any Rive account at all. You only need the Rive editor (free tier is fine) if you want to look inside the file or change it.

Will Rive animations slow down my WordPress site?

Less than you might expect. .riv files are small compared to video or GIFs, and the no-plugin snippet above only loads each file when it's about to scroll into view. The runtime itself is the biggest piece, so if animations only live on one or two pages, load the runtime only on those pages.

Can I use my Lottie plugin to play .riv files?

No. Lottie and Rive use different file formats and different players. You can run both on the same site without conflicts, though.

Does this work with Elementor, Bricks and Divi?

Yes. The no-plugin method works in any builder that lets you add raw HTML, and the Spline for WordPress plugin supports all three directly.

Can I just use Rive's share link as an iframe?

You can, if the file lives in your Rive account and you're happy with an iframe. You lose control over lazy loading, sizing and state machine inputs, and every view depends on Rive's servers. For anything past a quick demo, self-hosting the .riv is the better setup.

Start with one animation

Pick one spot on one page. A hero illustration, a button, a loading state. Get it working there first, then reuse the same line of HTML everywhere else. If you need something to start with, every template on Hoverine is a ready-to-use .riv file.