How to use Rive animations in Hashnode blog

Rive is an animation runtime which uses WebAssembly to render high quality vector graphics on all screen sizes.

Featured on Hashnode

In my previous article, I discussed How to add LottieFiles animations in Hashnode blogs. In this article we will take this one step further and figure out a way to embed Rive animations in Hashnode.

What is Rive

Rive is an animation runtime, similar to LottieFiles, which uses JSON files to store the animation data. This allows the developers to run same animation on multiple devices without worrying about scaling it up or down. Embedding Rive turned out harder than expected as Rive uses WebAssembly to render its animations which does not work with Hashnode directly.

Understanding the problem

Getting started guide shows that we need to install a JavaScript dependency for running Rive. In my previous article, I came to a conclusion that the <script> tag does not work in Hashnode. Unlike LottieFiles, Rive does not provide any embed or iFrame links either.

This left me only one choice, to use Hashnode Widgets. I quickly pasted the following code snippet in a snippet and crossed my fingers.

<canvas id="canvas" width="500" height="500"></canvas>

<script src="https://unpkg.com/@rive-app/canvas@1.0.79"></script>
<script>
  new rive.Rive({
    src: "https://cdn.rive.app/animations/vehicles.riv",
    canvas: document.getElementById("canvas"),
    autoplay: true
  });
</script>

This created a 500x500 pixel wide canvas element but unfortunately, instead of running the script element, it just appended that to the container. I was running out of options by this time so I tried Hashnode's embed command (%[link]), but that didn't work either.

Creating an iFrame

At this point I was sure that any of the conventional methods would not work and I need to think outside the box. I decided to embed an iFrame containing the source code of the Rive animation. I looked up the iFrame documentation and srcdoc attribute seemed promising. I quickly pasted the following code in the article.

<iframe srcdoc="<html>
  <head> <title>Rive Hello World</title> </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script src="https://unpkg.com/@rive-app/canvas@1.0.79"></script>
    <script>
      new rive.Rive({
        src: "https://cdn.rive.app/animations/vehicles.riv",
        canvas: document.getElementById("canvas"),
        autoplay: true
      });
    </script></body></html>" ></iframe>

To my surprise, this didn't work either. But keen eyed readers might already have spotted the error in the above code - I tried to use doublequotes within doublequotes, rookie mistake, I changed " to ' and the syntax highlighting clearly showed the difference.

Fixing the quotes

<iframe srcdoc="<html>
  <head> <title>Rive Hello World</title> </head>
  <body>
    <canvas id='canvas' width='500' height='500'></canvas>

    <script src='https://unpkg.com/@rive-app/canvas@1.0.79'></script>
    <script>
      new rive.Rive({
        src: 'https://cdn.rive.app/animations/vehicles.riv',
        canvas: document.getElementById('canvas'),
        autoplay: true
      });
    </script> </body> </html>" > </iframe>

This showed me a box of error, but atleast this was a new error, which meant I was making progress. After going through the browser logs, I found out that Hashnode has set X-Frame-Options to deny, this basically means I can not load iFrames.

I lost all hope at this poing and was about to give up but then I decided to try the old fashioned src attribute in iFrame tag because it was working for LottieFiles. I created a HTML file, hosted it on a S3 bucket and embedded it using iframe tag.

<iframe src="https://web.sicarius.in/static/blog-assets/p1.html" style="width: 100%; height:600px;"></iframe>

Et voilà! I was able to render animations using Rive in my articles. After fine-tuning the height and width dimensions in the HTML file, it was indistinguishable from any other imported graphics. But this required me to host the HTML files on my server, which is not ideal.

I decided to try Hashnode widgets once again, but this time, I wrapped the Rive scripts with an iframe tag. This allowed me to import another webpage without needing to host it myself. I edited the code from fixing the quotes section and added height, width and frame border properties. I also made the image slightly smaller and centered it using css grid.

<iframe style="width: 100%; height: 476px" frameborder="0" srcdoc="
<div style='display: grid;'>
    <canvas id='canvas' width='803px' height='454px' style='margin: auto;'></canvas>
</div>
    <script src='https://unpkg.com/@rive-app/canvas@1.0.79'></script>
    <script>
      new rive.Rive({
        src: 'https://cdn.rive.app/animations/vehicles.riv',
        canvas: document.getElementById('canvas'),
        autoplay: true
      });
    </script>"></iframe>

Using different animations

Rive community provides an assortment of freely available animations that can be used just by changing the path of Rive asset in Rive instance. For example, If you want to include the bird animation, replace the link to car asset with new link.

# Old link
https://cdn.rive.app/animations/vehicles.riv
# New link
https://public.rive.app/community/runtime-files/2063-4080-flutter-puzzle-hack-project.riv

Conclusion

We can run Rive animations on Hashnode using iFrames. Hashnode has X-Frame-Options policy set to deny - it does not allow embedding iFrames directly, this requires us to either host the HTML files on our server or find a workaround using Hashnode Widgets. Life is too short to properly center an element, hide all borders, scrollbars, overflow content and move on with your life.

Did you find this article valuable?

Support Bit Byte Blog by becoming a sponsor. Any amount is appreciated!