Search code examples
kotlinkotlinx-htmlkotlin-html-builder

Kotlin HTML-Builder


In Kotlin page, under HTML-Builder I can see the below code, how can I use it in simple .tk file? how t get started here?

val data = mapOf(1 to "one", 2 to "two")

createHTML().table {
    for ((num, string) in data) {
Iterate over data
        tr {
Functions to create HTML tags
           td { +"$num" } 
           td { +string }
        }
    }
}

Solution

  • You’re referring to a DSL written in Kotlin for constructing HTML through the builder. The library can be found here: https://github.com/Kotlin/kotlinx.html

    Here's a running example:

    fun main(args: Array<String>) {
        val document = DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument()
        val html = document.create.html {
            head {
                title("Hello world")
            }
            body {
                h1("h1Class"){
                    +"My header1"
                }
                p("pClass"){
                    +"paragraph1"
                }
            }
        }
    
       intoStream(html, System.out)
    }
    
    fun intoStream(doc: Element, out: OutputStream) {
        with(TransformerFactory.newInstance().newTransformer()){
            setOutputProperty(OutputKeys.OMIT_XML_DECLARATION, "no")
            setOutputProperty(OutputKeys.METHOD, "xml")
            setOutputProperty(OutputKeys.INDENT, "yes")
            setOutputProperty(OutputKeys.ENCODING, "UTF-8")
            setOutputProperty("{http://xml.apache.org/xslt}indent-amount", "4")
            transform(DOMSource(doc),
                    StreamResult(OutputStreamWriter(out, "UTF-8")))
        }
    }
    

    And finally here's the corresponding output:

    <?xml version="1.0" encoding="UTF-8"?><html>
    <head>
        <title>Hello world</title>
    </head>
    <body>
        <h1 class="h1Class">My header1</h1>
        <p class="pClass">paragraph1</p>
    </body>
    </html>