DEV Community

Cover image for How to embed runnable code samples using Runno
Ben Taylor
Ben Taylor

Posted on

How to embed runnable code samples using Runno

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.")
  print("There's no I in your name.")
Enter fullscreen mode Exit fullscreen mode

To use Runno all I have to do is visit the website and paste in my code snippet:

Paste code snippets into the "Your code" textbox

Then copy the HTML for the iframe out of Runno, and into your blog. Here the iframe code is:

<iframe src="" crossorigin allow="cross-origin-isolated" width="640" height="320" frameBorder="0"></iframe>
Enter fullscreen mode Exit fullscreen mode

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:

Or if you're interested in contributing - it's Open Source:

GitHub logo taybenlor / runno

Browser-based code runner that can be embedded as an iframe or used as a library.

Top comments (3)

taybenlor profile image
Ben Taylor

Well of course not, there's no I in your name :P