I’ve always liked those interactive code snippets that you see on places like StackOverflow and the MDN. So much so that after using the amazing thebookofshaders editor, I decided to create my own.

console.log('This is an interactive code snippet!')

How it works

Just like thebookofshaders, I used codemirror as the editor and then pipe the value through a document.eval inside an iframe. This means that even destructive operations are performed, since the code is sanboxed in an iframe it, it won’t affect the page at all.

document.body.style.backgroundColor = 'red'; document.body.innerHTML = 'BREAKING THE PAGE!';

You also get access to most JavaScript methods. This means you can eval inside an eval inside an eval.

setTimeout(() => console.log(eval('eval(\'10\')')), 200);

Jekyll

The main goal for the console was to be used on this blog. Check out how easy it is to create a simple snippet:

<interactive-console>
    (() => 1234)()
</interactive-console>
(() => 1234)()

Installation

It’s really easy to install the snippet as well. Inside the <head> of your page, simply add the library. I added the following inside my theme’s _includes/head.html file.

{ % if page.console % }
<script src="/assets/interactive-console.js"></script>
{ % endif % }

Then, on every page that should include interactive snippets, add the following front matter:

---
console: true
---

If you want to include the console on your site too, you can visit the GitHub Repo or download the bundle by clicking here.