A Lightweight Library for Running JS Snippets Inline

1. Introduction

js-code-runner is a lightweight JavaScript library that makes js/HTML/CSS snippets on your website runnable inline. The library puts js-HTML-CSS codes in separate tabs and attaches 'run' button that will run that snippet in iframe container.

Js code runner

2. Plugin Overview

Library	js-code-runner
Author	Marcin Wojtysiak
Licence	MIT Licence
Repository	https://github.com/martinwojtus/js-code-runner

Demo

3. How to install js-code-runner library:

Follow the below steps to install js-code-runner on your website.

3.1. If you want to have all the features the best way to install this library is to download codes from GitHub (https://github.com/martinwojtus/js-code-runner), change the `public path` from webpack.config.js to the path where you copy all necessary scripts on your website, and build it running:

npm install
npm run build

3.2. Include styles and main JavaScript of the library:

<!-- CSS -->
<link href="assets/js-code-runner/jcr.css" rel="stylesheet">

<!-- JS -->
<script type="text/javascript" src="assets/js-code-runner/view.jcr.js"></script>

If you are using code styling libraries like PrismJS or Highlight.js just make sure you put view.jcr.js script before them.

3.3. Create some snippet in DIV element with `js-code-runner` class:

<div class="js-code-runner" data-css="[]" 
    data-js="['https://unpkg.com/react@16/umd/react.development.js', 'https://unpkg.com/react-dom@16/umd/react-dom.development.js']">

<pre><code class="line-numbers language-jsx">
class App extends React.Component {
  state = {
    count: 0
  }

  inc = () => this.setState({
    count: this.state.count + 1
  })

  dec = () => this.setState({
    count: this.state.count - 1
  })

  render() {
    return (
      <div>
        <h2>{ this.state.count }</h2>
        <button onClick={this.inc}>Increment</button>
        <button onClick={this.dec}>Decrement</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))
</code></pre>

<pre><code class="line-numbers language-html">
    <div id="app"></div>
</code></pre>

</div>

3.4. Initialize the plugin by calling `JsCodeRunner` function:

JsCodeRunner();

3.5. After initialization the output will be as following:


class App extends React.Component {
  state = {
    count: 0
  }

  inc = () => this.setState({
    count: this.state.count + 1
  })

  dec = () => this.setState({
    count: this.state.count - 1
  })

  render() {
    return (
      <div>
        <h2>{ this.state.count }</h2>
        <button onClick={this.inc}>Increment</button>
        <button onClick={this.dec}>Decrement</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))


<video id="sample-view" style="width:600px;max-width:100%;" controls="">
    <source src="https://frontbackend.com/storage/snippets/sample-movie.mp4&quot; type="video/mp4">
    <source src="https://frontbackend.com/storage/snippets/sample-movie.ogg&quot; type="video/ogg">
    Your browser does not support HTML5 video.
  </video>

document.getElementsByClassName('sample-view').addEventListener('ended', function () { 
    console.log('ended');
},false);

3.6. Available options:

If you want to add external resources to your snippet add below attributes to your container (DIV that has js-code-runner class):

data-css="[]" data-js="[]"

JsCodeRunner() function takes additional parameters to handle ES6, Pug, Typescript, Sass and other snippets:

JsCodeRunner({
    container: '.js-code-runner',
    cdns: {
        BABEL_CDN: 'https://cdn.jsdelivr.net/npm/@babel/standalone@7.0.0-beta.32/babel.min.js',
        PUG_CDN: 'https://cdn.jsdelivr.net/npm/browserified-pug@0.3.0/index.js',
        CSSNEXT_CDN: 'https://cdn.jsdelivr.net/npm/browserified-postcss-cssnext@0.3.0/index.js',
        POSTCSS_CDN: 'https://cdn.jsdelivr.net/npm/browserified-postcss@0.3.0/index.js',
        TYPESCRIPT_CDN: 'https://cdn.jsdelivr.net/npm/browserified-typescript@0.3.0/index.js'
    },
    vendor: {
        SASS_WORKER_JS: '/js-code-runner/vendor/sass/sass.worker.js',
        COFFEESCRIPT_2_JS: '/js-code-runner/vendor/coffeescript-2.js',
        STYLUS_JS: '/js-code-runner/vendor/stylus.js',
        REASON_BS_JS: '/js-code-runner/vendor/reason/bs.js',
        REASON_REFMT_JS: '/js-code-runner/vendor/reason/refmt.js'
    }
});

4. Conclusion

In this article, we presented js-code-runner library that makes js, HTML and CSS codes runnable, which means you can showcase how snippets work on your website easily.