Search for a command to run...
Rive is an animation runtime which uses WebAssembly to render high quality vector graphics on all screen sizes.
I have a Bachelor's degree in computer science from University of Delhi and I like to work on small open source projects from time to time.
this was a good article, i appreciate all the info you shared
This is such an interesting post! Thanks for sharing it with the Hashnode community. This made me follow you for more interesting articles. Keep Writing!
Thank you for the kind words! I have a few articles in the works that focus on running AI models on the cloud.
In this series I will share different methods to make your blog enticing and interactive.
Find out how to embed motion graphics in your blog articles to make them more appealing.
If you have been following along, you might be wondering, "Why are we making this so complicated? Can't we just give one giant AI all the tools and let it figure it out?" You could. And for simple tasks, that works fine. But the moment your project g...
Welcome back. If you are reading this, you probably saw "Model Context Protocol" in the title and thought, "Oh cool, the shiny new thing!" I have a confession to make: The title of this post is a bit of a lie. We are not building a full-blown "MCP Se...
In Part 1 of this series, we drew boxes on a whiteboard and called it "Architecture". Today, we will stop pretending and start building. Most other tutorials on the internet are very basic and teach you how to build a calculator or some other basic s...
Let’s be honest for a second: The world doesn't need another RAG chatbot. If I see one more tutorial on "How to Chat with your PDF," I might scream. Don’t get me wrong, Retrieval Augmented Generation (RAG) is useful. It’s practical. But it is also in...
As a developer with real life experience in building critical systems for Securities and Exchange Board of India (SEBI) that scale and withstand real-world chaos, I’ve firsthand seen how everyone is trying to replace developers with AI tools. But you...
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.
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.
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.
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.
<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>
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
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.