NPM version

Arrow Playground

Component that creates Kotlin-aware, including the Arrow library, editors capable of running code from HTML block elements. This is a fork of the original Kotlin Playground work done by JetBrains team.



Arrow Playground preview


Load it from a CDN

Generate the library through the proper npm script, then host it and insert a <script> element into your page, specifying what elements should be converted in its data-selector attribute.

<script src="" data-selector="code"></script>

Or, if you need to separate process of loading/conversion, omit the data-selector attribute and use a second <script> element like this:

<script src=""></script>

document.addEventListener('DOMContentLoaded', function() {

You can also overwrite the server where the code will be sent to be compiled and analyzed (for example if you host a server instance that includes your own Kotlin libraries). For that you can set the data-server attibute, like this:

<script src=""

Fork & clone server repository.

Host your own instance

Install arrow-playground as dependency via NPM.

npm install arrow-playground -S

And then just use it in your code.

// ES5
var playground = require('arrow-playground');

document.addEventListener('DOMContentLoaded', function() {
  playground('code'); // attach to all <code> elements

// ES6
import playground from 'arrow-playground';

document.addEventListener('DOMContentLoaded', () => {
  playground('code'); // attach to all <code> elements


Kotlin Playground supports several events, and also server URL overwriting passing an additional options parameter on initialisation.

For example:

function onChange(code) {
  console.log("Editor code was changed:\n" + code);

function onTestPassed() {
   console.log("Tests passed!");

const options = {
  server: 'https://my-arrow-playground-server',
  onChange: onChange(code),
  onTestPassed: onTestPassed,
  callback: callback(targetNode, mountNode)

playground('.selector', options)

Events description:

Customizing editors

Use the following attributes on elements that are converted to editors to adjust their behavior.

// All imports

fun main(args: Array<String>) {println({
  All previous snippets code
  Your code here

  <code data-executable="incremental">
    Your code here

You can play with this setting in this specific page where all code snippets are set in this mode:

Incremental mode examples

Also, you can make only a part of code read-only by placing it between //sampleStart and //sampleEnd markers. If you don’t need this just use attribute none-markers. For adding hidden files: put files between <textarea> tag with class hidden-dependency.

  import cat.Cat

  fun main(args: Array<String>) {
      val cat = Cat("Kitty")
    <textarea class="hidden-dependency">
      package cat
      class Cat(val name: String)

Also if you want to hide code snippet just set the attribute folded-button to false value.

Supported keyboard shortcuts

Develop and contribute

  1. Install required dependencies npm install.
  2. npm start to start local development server at http://localhost:9000, or npm start -- --env.webDemoUrl=http://localhost:6666 if you want a different compiler host URL.
  3. npm run build to create production bundles.