kotlinx.html's Introduction

kotlinx.html

The kotlinx.html library provides a DSL to build HTML to Writer/Appendable or DOM. Available to all Kotlin Multiplatform targets and browsers (or other WasmJS or JavaScript engines) for better Kotlin programming for Web.

Get started

See Getting started page for details how to include the library.

DOM

You can build a DOM tree with JVM, JS, and WASM. The following example shows how to build the DOM for WasmJs-targeted Kotlin:

import kotlinx.browser.document
import kotlinx.browser.window
import kotlinx.html.a
import kotlinx.html.div
import kotlinx.html.dom.append
import kotlinx.html.dom.create
import kotlinx.html.p

fun main() {
    val body = document.body ?: error("No body")
    body.append {
        div {
            p {
                +"Here is "
                a("https://kotlinlang.org") { +"official Kotlin site" }
            }
        }
    }

    val timeP = document.create.p {
        +"Time: 0"
    }

    body.append(timeP)

    var time = 0
    window.setInterval({
        time++
        timeP.textContent = "Time: $time"

        return@setInterval null
    }, 1000)
}

Stream

You can build HTML directly to Writer (JVM) or Appendable (Multiplatform)

System.out.appendHTML().html {
    body {
        div {
            a("https://kotlinlang.org") {
                target = ATarget.blank
                +"Main site"
            }
        }
    }
}