Typesafe HTML DSL Example

 

Want to use HTML in your app?

Just a small post for today.

Using Typesafe HTML DSL, you can do this:

Full (small) code listing:

package ...

import android.webkit.WebView
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Card
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import kotlinx.html.*
import kotlinx.html.dom.*
import org.w3c.dom.Document

object CoolLittleHtmlExample {
    private fun createHtmlPage() = createHTMLDocument().html {
        head {
            title = "My Cool little HTML Kotlin Page" // Not displayed
        }
        body {
            h1 { +"Hello from D9!" }
            p { +"This is a paragraph generated by HTML DSL." }
            b { +"Let's be bold " }
            i { +" and italic " }
            a(href = "https://www.google.com") { +"Click me" }
            //a { +" hyperlink " }
            ul {
                li { +"Item 1" }
                li { +"Item 2" }
            }
            ol {
                li { +"Numbered Item 1" }
                li { +"Numbered Item 2" }
            }
        }
    }

    private fun serializeHtml(html: Document): String = html.serialize()

    @Composable
    fun HtmlView() {
        val htmlContent = serializeHtml(createHtmlPage())

        Scaffold {
            Card(Modifier.padding(it)) {
                Box(Modifier.padding(8.dp)) {
                    AndroidView(
                        factory = { context ->
                            WebView(context).apply { settings.javaScriptEnabled = false }
                        },
                        update = { webView ->
                            webView.loadData(htmlContent, "text/html", "UTF-8")
                        }
                    )
                }
            }
        }
    }

}

Dependency

dependencies {
    ...
    implementation("org.jetbrains.kotlinx:kotlinx-html-jvm:0.12.0")
}