Dynamic DOM rendering with kotlinx.html

Libraries
1

HTML seems to be the most universal way to perform visualization of the data and kotlinx.html library allows to use it with style, but sadly, the documentation is still in early stage, so I would like to ask for advice.

What I want to do is to dynamically (in runtime) add blocks to existing html template (like adding nodes to body block) and then on each change render the whole document and send somewhere (for example to javafx WebView).

I have a function that consumes TagConsumer<*> and does required modifications. How can I actually dynamically modify the content inside the node and notify somebody to render the document?

My best attempt so far looked like something like this:


        lateinit var out: HTMLOutput

        val document = createHTMLDocument().onFinalize { from, partial ->
            println(from.serialize(true))
        }.html {
            head { }
            body {
                out = HTMLOutput(consumer)
            }
        }

        out.render("this is my text")
        out.render("this is another text")

But it obviously did not work. It looks I have to create the document and the node separately and then reapply node to the document each time, something is changed. Is there a better way?

1 Like
2

The solution that actually worked:

        val document = createHTMLDocument().html {
            head {  }
            body {  }
        }

        val node = document.getElementsByTagName("body").item(0)

        val appender = node.append.onFinalize { from, partial ->
            println(from.ownerDocument.serialize(true))
        }

        val out = HTMLOutput(appender)

        out.render("this is my text")
        out.render("this is another text")

Still, it seems a little bit off. I wonder if there is something better.

3

Maybe decorating TagConsumer can help.

4

Could you provide an example?