Spawn Playground Component

Component that creates Spawn-aware editors capable of running code from HTML block elements. It uses Spawn Playground as a backend. Backend sources can be found in Spawn Playground repository.

Mostly inspired by Kotlin Playground.

Installation

Use CDN

Insert a <script> element into your page and specify what elements should be converted in its data-selector attribute.

<script src="https://unpkg.com/spawn-playground@1" data-selector="code"></script>

Add CSS to your page:

<link rel="stylesheet" href="https://unpkg.com/spawn-playground@1/dist/spawn-playground.css">

Use downloaded files

Download the latest version of the playground from release page. Or build it yourself.

Add the following script to your page:

<script src="spawn-playground.js" data-selector="code"></script>

Add CSS to your page:

<link rel="stylesheet" href="spawn-playground.css">

And that's it!

Build from sources

Run the following commands:

git clone https://github.com/spawnlang/playground-component
cd playground-component
npm install
npm run build

Build files will be located in dist/ directory.

Development

Run the following commands:

git clone https://github.com/spawnlang/playground-component
cd playground-component
npm install
npm run watch

This will launch a watcher that will rebuild the code when files change.

If you want to change the styles as well, run the following command:

npm run sass-watch

Open the ./test/index.html file in a browser. All changes in the code will be visible on the open page.

License

This project is under the MIT License. See the LICENSE file for the full license text.