How to Host a REPL

There are a number of great code playgrounds with REPLs, e.g. Code Pen, JS Fiddle, JS Bin, and CSS Deck to name a few. All of them support embedding in your own website so that you can use them for documentation. However, this also means you have their branding and UI nuances to work around. And, you have to go to multiple places to ensure your documentation is in sync with your examples. The MIT licensed @anywhichway/repl-host allows you to host and style REPLs the way you want while making them an intrinsic part of your documentation.

After you load the component:

<script src="https://cdn.jsdelivr.net/npm/@anywhichway/quick-component@0.0.7" component="https://cdn.jsdelivr.net/npm/@anywhichway/repl-host@0.0.5"></script>

The simplest REPL can be created with a very short tag:

<repl-host head css body javascript></repl-host>

This gives you four resizable editors with syntax highlighting, a resizable display area and a console for displaying messages and errors.

Want to drop a section? Just leave out the attribute:

<repl-host css body javascript></repl-host>