MyJS Box

A CodePen-like HTML, CSS and JavaScript playground that you can embed on any web page with one script tag.

Playground Documentation GitHub npm Changelog

Usage

Add the script wherever the box should appear and point it at the code with CSS selectors:

<div id="myjs-box-wrapper" style="height: 600px;">
  <script src="https://cdn.jsdelivr.net/npm/myjs-box@1/dist/myjs-box.min.js"
          data-html-selector="pre#html-code > code"
          data-css-selector="pre#css-code > code"
          data-js-selector="pre#javascript-code > code"></script>
</div>

Edit the code, then click Run (or press Ctrl/Cmd+Enter). The toolbar shows the console, adds CSS and JavaScript libraries (with a search of cdnjs), changes the view (editors on top, left, right or tabs), opens the result in a new tab and goes full screen. The ⋯ menu downloads the code as an HTML or ZIP file and opens those files again. See the documentation for every option.

Playground

The playground is a whole window for writing code. It saves your code in your browser as you go, Copy link makes a link that opens your code, Open gist (or playground.html?gist= followed by a gist’s URL or ID) opens any gist as a pen and Save as gist saves your code in a gist on your GitHub account.

Examples

• Basic: code from <pre><code> blocks.
• Options: layouts, the dark theme, a title, a height and a missing selector.
• Libraries: starting with Animate.css and jQuery from cdnjs.
• Gists: code loaded from a gist, and the dialog shown when code can’t be loaded.
• JavaScript API: MyJSBox.create(), getCode(), setCode(), run() and destroy().