Skip to content
Embeddable component for running Kotlin's Arrow library code snippets
Branch: master
Clone or download
Pull request Compare This branch is 16 commits ahead, 16 commits behind JetBrains:master.
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Update KotlinPlayground references for Arrow ones (#15) Dec 21, 2018
incremental Update KotlinPlayground references for Arrow ones (#15) Dec 21, 2018
src Update KotlinPlayground references for Arrow ones (#15) Dec 21, 2018
utils Incremental mode documentation (#11) Oct 31, 2018
.browserslistrc Sync changes to release version 1.15.0 (#12) Nov 6, 2018
.editorconfig Fix webpack.config.js Jun 26, 2017
.gitignore Drop package-lock.json Feb 1, 2018 Update KotlinPlayground references for Arrow ones (#15) Dec 21, 2018 Incremental mode documentation (#11) Oct 31, 2018 Update KotlinPlayground references for Arrow ones (#15) Dec 21, 2018
package.json Merge remote-tracking branch 'upstream/master' Dec 20, 2018
preview.png Add preview image (#2) Oct 16, 2018
webpack.config.js Update KotlinPlayground references for Arrow ones (#15) Dec 21, 2018
yarn.lock fix(*): support old browsers Dec 5, 2018

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:

  • onChange(code) — Fires every time the content of the editor is changed. Debounce time: 0.5s. code — current playground code.

  • onTestPassed — Is called after all tests passed. Use for target platform junit.

  • onCloseConsole — Is called after the console's closed.

  • onOpenConsole — Is called after the console's opened.

  • getJsCode(code) — Is called after compilation Kotlin to JS. Use for target platform js. code — converted JS code from Kotlin.

  • callback(targetNode, mountNode) — Is called after playground's united. targetNode — node with plain text before component initialization. mountNode — new node with runnable editor.

  • getInstance(instance) - Getting playground state API.

    instance.state      // playground attributes, dependencies and etc.
    instance.nodes      // playground NodeElement.
    instance.codemirror // editor specification.
    instance.execute()  // function for executing code snippet.
    instance.getCode()  // function for getting code from snippet.

Customizing editors

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

  • data-version: Target Kotlin compiler version:

     <code data-version="1.0.7">
     Your code here
  • args: Command line arguments.

    <code args="1 2 3">
    Your code here
  • data-target-platform: target platform: junit, canvas, js or java (default).

     <code data-target-platform="js">
      Your code here
  • data-executable: Editable and runnable mode, not just highlighting.

    <code data-executable="true">
      Your code here
  • data-executable="incremental": Special mode where the code will be added to the code of the previous snippets, extracting imports and placing them at the top. Additionally this mode will wrap the executable code in a custom main function. So in the end what it will be executed will be something like this:

// 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.

  • data-js-libs: By default component loads jQuery and makes it available to the code running in the editor. If you need any additional JS libraries, specify them as comma-separated list in this attribute.

    <code data-js-libs="https://my-awesome-js-lib/lib.min.js">
      Your code here
  • auto-indent="true|false": Whether to use the context-sensitive indentation. Defaults to false.

  • theme="arrow|idea|darcula|default": Editor IntelliJ IDEA themes.

  • mode="kotlin|js|java|groovy|xml|c|shell|swift|obj-c": Different languages styles. Runnable snippets only with kotlin. Default to kotlin.

  • data-min-compiler-version="1.0.7": Minimum target Kotlin compiler version

  • highlight-on-fly="true|false": Errors and warnings check for each change in the editor. Defaults to false.

  • autocomplete="true|false": Get completion on every key press. If false => Press ctrl-space to activate autocompletion. Defaults to false.

  • indent="4": How many spaces a block should be indented. Defaults to 4.

  • lines="true|false": Whether to show line numbers to the left of the editor. Defaults to false.

  • from="5" to="10: Create a part of code. Example from line 5 to line 10.

  • data-output-height="200": Set the iframe height in px in output. Use for target platform canvas.

  • match-brackets="true|false"": Determines whether brackets are matched whenever the cursor is moved next to a bracket. Defaults to true.

Supported keyboard shortcuts

  • Ctrl+Space — code completion
  • Ctrl+F9/Cmd+R — execute snippet
  • Ctrl+/ — comment code
  • Ctrl+Alt+L/Cmd+Alt+L — format code
  • Shift+Tab — decrease indent

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.
You can’t perform that action at this time.