official JetBrains project NPM version

Kotlin Playground

Component that creates Kotlin-aware editors capable of running code from HTML block elements.



Use our 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/kotlin-playground@1" 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="https://unpkg.com/kotlin-playground@1"></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 attribute.

And you can also set a default Kotlin version for code snippets to run on. Bear in mind that the version set per editor will take precedence though:

<script src="https://unpkg.com/kotlin-playground@1"

Fork & clone the old server repository or the new server.

Host your own instance

Install Kotlin-playground as dependency via NPM.

npm install kotlin-playground -S

And then just use it in your code.

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

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

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

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

Use from plugins

1) Kotlin Playground WordPress pluginWordPress plugin which allows to embed interactive Kotlin playground to any post. 2) Kotlin Playground Coursera plugin — Allows embedding interactive Kotlin playground for coursera lessons. 3) Kotlin Playground Orchid plugin — Allows embedding interactive Kotlin playground in Orchid documentation sites.


Kotlin Playground supports several events, and also Kotlin version or 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-kotlin-playground-server',
  version: '1.3.50',
  onChange: onChange,
  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.

Supported keyboard shortcuts

Develop and contribute

  1. Fork & clone our repository.
  2. Install required dependencies yarn install.
  3. yarn start to start local development server at http://localhost:9000.
  4. yarn test to run tests. TEST_HEADLESS_MODE=true to run tests in headless mode.
  5. yarn run build to create production bundles.