<title>Kotlin Playground examples</title> <style> .markdown-body { max-width: 980px; margin: 50px auto; } </style> <script src="../playground.js" data-selector=".kotlin-code"></script>

Kotlin Playground demo

Automatic initialization

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=".kotlin-code"></script>

For instance following block of Kotlin code:

class Contact(val id: Int, var email: String) 

fun main(args: Array<String>) {
    val contact = Contact(1, "mary@gmail.com")
    println(contact.id)                   
}

Turns into:

class Contact(val id: Int, var email: String) 

fun main(args: Array<String>) {
    val contact = Contact(1, "mary@gmail.com")
    println(contact.id)
}

You can also change the playground theme or disable run button using theme and data-highlight-only attributes.

<div class="kotlin-code" theme="idea" data-highlight-only></div>

fun main(args: Array<String>) {
    println("Hello World!")
}

Or theme kotlin-dark

fun main(args: Array<String>) {
    println("Hello World!")
}

Set another target platform with attribute data-target-platform.

<div class="kotlin-code" data-target-platform="js"></div>

fun sum(a: Int, b: Int): Int {
    return a + b
}

fun main(args: Array<String>) {
    print(sum(-1, 8))
}

You can use JS IR compiler also.

<div class="kotlin-code" data-target-platform="js-ir"></div>

fun mul(a: Int, b: Int): Int {
    return a * b
}

fun main(args: Array<String>) {
    print(mul(-2, 4))
}

You can use Wasm compiler.

<div class="kotlin-code" data-target-platform="wasm"></div>

fun mul(a: Int, b: Int): Int {
    return a * b
}

fun main(args: Array<String>) {
    print(mul(-2, 4))
    println(" + 7 =")
    print(mul(-2, 4) + 7)
}

Use data-target-platform attribute with value junit for creating examples with tests:

import org.junit.Test
import org.junit.Assert

class TestExtensionFunctions() {
    @Test fun testIntExtension() {
        Assert.assertEquals("Rational number creation error: ", RationalNumber(4, 1), 4.r())
    }

    @Test fun testPairExtension() {
        Assert.assertEquals("Rational number creation error: ", RationalNumber(2, 3), Pair(2, 3).r())
    }
}
//sampleStart
/*
Then implement extension functions Int.r() and Pair.r() and make them convert Int and Pair to RationalNumber.
*/
fun Int.r(): RationalNumber = RationalNumber(this, 2)
fun Pair<Int, Int>.r(): RationalNumber = RationalNumber(first, second)

data class RationalNumber(val numerator: Int, val denominator: Int)
//sampleEnd

The test clases in this code snippet are folded away thanks to the //sampleStart and //sampleEnd comments in the code. If you want to hide test classes completely just set the attribute folded-button to false value.

Also you can mark arbitrary code by putting it between [mark]your code[/mark].

<div class="kotlin-code" data-target-platform="junit" folded-button="false"></div>

import org.junit.Test
import org.junit.Assert

class TestLambdas() {
    @Test fun contains() {
        Assert.assertTrue("The result should be true if the collection contains an even number", 
                          containsEven(listOf(1, 2, 3, 126, 555)))
    }

    @Test fun notContains() {
        Assert.assertFalse("The result should be false if the collection doesn't contain an even number",
                           containsEven(listOf(43, 33)))
    }
}
//sampleStart
/*
Pass a lambda to any function to check if the collection contains an even number.
The function any gets a predicate as an argument and returns true if there is at least one element satisfying the predicate.
*/
fun containsEven(collection: Collection<Int>): Boolean = collection.any {[mark]TODO()[/mark]}
//sampleEnd

Use data-target-platform attribute with value canvas for working with canvas in Kotlin:

<div class="kotlin-code" data-target-platform="canvas" data-output-height="200">

package fancylines

import org.w3c.dom.CanvasRenderingContext2D
import org.w3c.dom.HTMLCanvasElement
import kotlinx.browser.document
import kotlinx.browser.window
import kotlin.random.Random



val canvas = initalizeCanvas()
fun initalizeCanvas(): HTMLCanvasElement {
    val canvas = document.createElement("canvas") as HTMLCanvasElement
    val context = canvas.getContext("2d") as CanvasRenderingContext2D
    context.canvas.width  = window.innerWidth.toInt();
    context.canvas.height = window.innerHeight.toInt();
    document.body!!.appendChild(canvas)
    return canvas
}

class FancyLines() {
    val context = canvas.getContext("2d") as CanvasRenderingContext2D
    val height = canvas.height
    val width = canvas.width
    var x = width * Random.nextDouble()
    var y = height * Random.nextDouble()
    var hue = 0;

    fun line() {
        context.save();

        context.beginPath();

        context.lineWidth = 20.0 * Random.nextDouble();
        context.moveTo(x, y);

        x = width * Random.nextDouble();
        y = height * Random.nextDouble();

        context.bezierCurveTo(width * Random.nextDouble(), height * Random.nextDouble(),
                width * Random.nextDouble(), height * Random.nextDouble(), x, y);

        hue += (Random.nextDouble() * 10).toInt();

        context.strokeStyle = "hsl($hue, 50%, 50%)";

        context.shadowColor = "white";
        context.shadowBlur = 10.0;

        context.stroke();

        context.restore();
    }

    fun blank() {
        context.fillStyle = "rgba(255,255,1,0.1)";
        context.fillRect(0.0, 0.0, width.toDouble(), height.toDouble());
    }

    fun run() {
        window.setInterval({ line() }, 40);
        window.setInterval({ blank() }, 100);
    }
}
//sampleStart
fun main(args: Array<String>) {
     FancyLines().run()
}
//sampleEnd

Use data-js-libs with a comma-separated list of URLs to specify additional javascript libraries to load.

<div class="kotlin-code" data-target-platform="js" data-js-libs="https://unpkg.com/moment@2">

external fun moment(): dynamic

fun main() {
    val startOfDay = moment().startOf("day").fromNow()
    println("The start of the day was $startOfDay")
}

external fun moment(): dynamic

fun main() {
    val startOfDay = moment().startOf("day").fromNow()
    println("The start of the day was $startOfDay")
}

Manual initialization

If you want to init Kotlin Playground manually - omit data-selector attribute and call it when it's needed:

<script src="https://unpkg.com/kotlin-playground@1"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  KotlinPlayground('.kotlin-playground');
});
</script>

Add additional hidden files: Put your files between <textarea> tag with class hidden-dependency.

Look at example:

Themes:

```kotlin fun main(args: Array) { //sampleStart val (name, value) = Pair("Kitty", "Kiss") println(name) println(value) //sampleEnd } ```

```kotlin fun main(args: Array) { //sampleStart val (name, value) = Pair("Kitty", "Kiss") println(name) println(value) //sampleEnd } ```

fun main(args: Array) { //sampleStart val (name, value) = Pair("Kitty", "Kiss") println(name) println(value) //sampleEnd }

Create

import cat.Cat

fun main(args: Array<String>) {
//sampleStart
    val cat = Cat("Kitty")
    println(cat.name)
//sampleEnd
}

<textarea class="hidden-dependency"> package cat class Cat(val name: String) </textarea>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

examples.md

examples.md

Kotlin Playground demo

Automatic initialization

Manual initialization

Files

examples.md

Latest commit

History

examples.md

File metadata and controls

Kotlin Playground demo

Automatic initialization

Manual initialization