https://kotlinlang.org logo
Join Slack
Powered by
# kotlinx-html
  • r
    The K2 mode in the new Intellij version breaks the html -> kotlinx.html plugin. For me this is a big issue and will force me to stay on the old version of Intellij - when making components, I rely on being able to paste FlowBite/Tailwind html chunks and have them be converted. It would be a lot slower if I had to type them out
    e
    • 2
    • 2
  • m
    Hello, stupid queastion, but why 
    li
    is unresolved reference?
    c
    • 2
    • 3
  • k
    Is it possbile to generate a boolean attribute for a tag from kotlinx.html. Meaning, is that possible to produce the following code:
    Copy code
    <label><input type=checkbox checked name=cheese disabled> Cheese</label>
    I am aware about 
    checked="checked"
    or 
    checked=""
    options and how to do it with kotlinx.html, but I want the exact syntax as above in the output
    c
    • 2
    • 1
  • a
    Hi! Started using the HTML DSL with KTor and wondering if people have some solutions for some things I would like to do: • Is there a way to ensure binding between an object, HTML form and form submit? Showing existing values, binding new values from submit. Or do you just do that manually? • Any good way to do validations, preferrably bound to the object, something like javax.validation would be nice.
  • c
    We use a library we made ourselves to convert www-url-encoded form submits to a Jackson-internal representation of JSON, which Jackson can the type coerce into a data class that we call a 
    FormDto
    . The library sets a standard for the names (the 
    name
    attribute on HTML form fields) so they can be used to provide a structure to the data.
    a
    • 2
    • 22
  • c
    For validation we use Konform, but since then there's a new kid on the block.
  • c
  • a
    Please give me some advices as just started using html and css dsl for server side rendering, with htmx along with spring boot,
    c
    • 2
    • 1
  • a
    Is there a library to generate js on jvm, Just like html and css
    r
    c
    • 3
    • 2
  • b
    is there a way to create an html string using this library? instead of using an html file, I'd like to inline it's content in typesafe HTML, starting with a div tag
    ✅ 1
    c
    • 2
    • 3
  • m
    What are the pros and cons of kotlinx HTML vs Thymeleaf?
    c
    m
    m
    • 4
    • 18
  • r
    How do you translate this, specifically that attribute with no value?
    Copy code
    <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin>
    This guess doesn't work (crossorigin is not a parameter).
    Copy code
    link(rel="preconnect", href="<https://fonts.gstatic.com>", crossorigin=true)
    t
    • 2
    • 1
  • c
    Hi @dmcg! I'm not sure this is what you are looking for, but I have responded to a similar question before in this channel with the following snippet from our code base that we use for the rare case that we want to respond with an HTML "snippet" (= just a fragment, no proper HTML document):
    Copy code
    /** Evaluate a TemplateRenderer block into a String. Used in email rendering. */
fun stringFromHtml(renderer: TemplateRenderer): String {
  return StringBuilder().apply {
    append("<!DOCTYPE html>\n")
    appendHTML().renderer()
  }.toString()
}

/** Evaluate a TemplateRenderer block into a RePlay RenderHtml Result. <------- so this would be different for KTor! */
fun resultFromHtml(renderer: TemplateRenderer): RenderHtml {
  return RenderHtml(stringFromHtml(renderer))
}

typealias TemplateRenderer = TagConsumer<*>.() -> Unit

typealias LayoutBuilder<T> = TagConsumer<*>.(data: T, renderer: TemplateRenderer) -> Unit

fun <T> layout(builder: LayoutBuilder<T>): LayoutBuilder<T> {
  return { data, renderer -> builder(data, renderer) }
}

// In a render method we simply do:
fun render(input: Whatever): RenderHtml {
  return resultFromHtml {
    table {
      tr {
        +input.toString()
      }
    }
  }
}
  • c
    I hope this helps, and --especially if it does help-- since this question keeps coming up: we may want to extend the README of this project with some examples to guide users of the lib in the right direction for these common usecases.
  • c
    We are happy users of kotlinx.html, it does have an impact on our compile times, but the added type safety and debugability makes up for it. The only otehr contender we found that was acceptable to us was KTE (=JTE for Kotlin). Since we use Elm for browser apps (and in Elm you write HTML-in-Elm using the eDSL for it), kotlinx.html's approach (writing HTML-in-Kotlin, also an eDSL) serves us really well. Also we use jOOQ, another eDSL, so to our team it feels quite natural to use "thin abstractions" (eDSLs) over other languages.
  • d
    Thank you. I pulled the following from a project of @Tim Schraepen
    Copy code
    fun partial(block: FlowContent.() -> Unit): String {
    val writer = StringWriter()
    val consumer = writer.appendHTML()
    // hacky stuff so we don't have to return a wrapper div
    object : FlowContent {
        override val consumer = consumer
        override val attributes: MutableMap<String, String>
            get() = mutableMapOf()
        override val attributesEntries: Collection<Map.Entry<String, String>>
            get() = emptyList()
        override val emptyTag: Boolean
            get() = true
        override val inlineTag: Boolean
            get() = true
        override val namespace: String?
            get() = null
        override val tagName: String
            get() = ""
    }.block()
    return writer.toString()
}
    I don’t know the library well enough to choose between the approaches, but thanks giving for your experience.
  • t
    Thank you for mentioning me so that I learn about the existence of this channel!
  • e
    Hey @Cies, thanks for the request. We have prototyped htmx support some time ago and will publish an update soon 🙂
    c
    r
    • 3
    • 5
  • r
    Is there a kotlinjs wrapper that's compatible with kotlinx.html on the frontend for doing css? I've been experimenting with frontend kotlinx.html here: https://github.com/reubenfirmin/kdemo.cc, and so far have been using tailwind only for styling (which is fine as far as it goes). https://jetbrains.github.io/kotlin-wrappers/kotlin-styled-next/index.html seems react centric. https://jetbrains.github.io/kotlin-wrappers/kotlin-css/index.html might work, though I'm unclear about how I'd use it other than giving everything a class (which...maybe)
    • 1
    • 1
  • d
    Thanks for your help with partials - here’s some content in return

    https://youtu.be/Dpnj5qRWLHY▾

    👀 3
    ❤️ 2
    e
    • 2
    • 1
  • a
    I built a pretty awesome demo of KTor+SSE and HTMX. At least I think so. Have a look. 🙂 https://blog.f12.no/wp/2024/11/11/htmx-sse-easy-updates-of-html-state-with-no-javascript/ Slack Conversation
    K 1
    t
    r
    • 3
    • 4
  • r
    I built a demo of using kotlinx.html in frontend code (along with kotlin-css). It's pretty nice - happy to take requests or contributions. https://github.com/reubenfirmin/kdemo.cc
    🔥 2
  • m
    A simple alternative to kotlinx.html, specifically designed to support fragments/partials and htmx: https://github.com/mikaelstaldal/kotlin-html-builder/
    c
    • 2
    • 4
  • m
    How are you supposed to use SVG and MathML in kotlinx.html?
    c
    • 2
    • 1
  • e
    Hey! kotlinx-html 0.12.0 is out: https://github.com/Kotlin/kotlinx.html/releases/tag/0.12.0 Please check it out!
    K 4
    👍 1
  • m
    Hi! Can kotlinx-HTML be used for parsing HTML?
    🚫 1
    ✅ 1
    a
    c
    • 3
    • 2
  • b
    how do I insert an element before another element? .prepend adds a child element to the node, not a node before the element regarding the dom api, this is what I need in a DSL context: .insertAdjacentElement("beforeBegin", element)
    ✅ 1
    c
    • 2
    • 1
  • a
    is there a way to create html without starting it off a 
    <html>
    tag? I want to be able to output html like 
    <div></div>
    but it seems like i am forced to create it like 
    <html><div></div></html
    t
    a
    • 3
    • 3
  • a
    I want to inline svg icons using strings so that I don't have to rewrite them manually in kotlinx-html I often have the icons as functions like this:
    Copy code
    suspend fun DIV.Download(classes: String="") {
    unsafe {
        +"""
        <svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="$classes"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
    """.trimIndent()
    }
}
    However I want to be able to use them from any tag (ie inside 
    div
    or 
    a
    . What should i use as the receiver type?
    • 1
    • 1
  • a
    am i mistaken that the 
    svg
    tag doesn't support 
    path
    ? if that's the case how do you do svgs?
    tumbleweed 2
    t
    • 2
    • 5