Kotlin / kotlinx.html

Kotlin DSL for HTML
Apache License 2.0
1.63k stars 133 forks source link
dsl html kotlin

Kotlin Stable Official JetBrains Project GitHub license Kotlin TeamCity (simple build status),locator:(buildType:(id:KotlinTools_KotlinxHtml_BuildGradleMasterBranch)))/statusIcon.svg)

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"
            }
        }
    }
}

Documentation

See wiki pages

Building

See development page for details.