A year or so ago I was playing around with building an online Introduction to Python course, but I got distracted by this problem that seemed like it should be solved: how can I embed runnable snippets on the web?
There’s a bunch of closed-source solutions that rely on other services. I was hoping for a way to just install a package, and then run code. Especially small snippets like print, input and if statements.
So I started building Runno. It lets you embed snippets of code from a few different languages (Python, JavaScript, C, C++ and SQL currently) within your website and runs it all client side using Web Assembly. You can use it without any packages using an iframe, or install the npm package and use it as a set of Web Components.
If you're looking to embed a runnable snippet of code it's pretty straightforward with Runno. Let's say I'm writing a blog post explaining how if statements work in Python, and I have this snippet of code:
name = input("What's your name? ")
if "i" in name.lower():
print("You've got an I in your name, how selfish.")
else:
print("There's no I in your name.")
To use Runno all I have to do is visit the runno.dev website and paste in my code snippet:
Then copy the HTML for the iframe out of Runno, and into your blog. Here the iframe code is:
<iframe src="https://runno.run/?editor=1&runtime=python&code=bmFtZSA9IGlucHV0KCJXaGF0J3MgeW91ciBuYW1lPyAiKQppZiAiaSIgaW4gbmFtZS5sb3dlcigpOgogIHByaW50KCJZb3UndmUgZ290IGFuIEkgaW4geW91ciBuYW1lLCBob3cgc2VsZmlzaC4iKQplbHNlOgogIHByaW50KCJUaGVyZSdzIG5vIEkgaW4geW91ciBuYW1lLiIp" crossorigin allow="cross-origin-isolated" width="640" height="320" frameBorder="0"></iframe>
You'll notice that it has a fixed width and height. This is to make it easy to paste in, but you can change those values!
On Dev you can't put an iframe in, but you can use a Codepen. Here I've made a codepen that just has the iframe inside of it, then styled the iframe to fit the full space of the codepen.
And now you can run the example code snippet!
If you're interested in learning more ways to use Runno there's some documentation on the website: https://runno.dev/#examples
Or if you're interested in contributing - it's Open Source:
Top comments (1)
Well of course not, there's no I in your name :P