DEV Community

ColtonIdle
ColtonIdle

Posted on

How to use htmx with ktor

1 Clone this repo https://github.com/tom-delalande/html-to-kotlin-converter and open in intellij
2 In the root of that project folder, create input.txt and add the component/html that you want to convert (feel free to pick a component from tailwind), run main in that project and it'll be converted to kotlin ktor html DSL in output.txt (basically, that's the readme of that project lol)
3 in your ktor project (make sure you already added ktor-html from kotlin team), respond to a route like so

call.respondHtml(HttpStatusCode.OK) {
    head {
        title {
            +"tailwind sample"
        }
        script { src = "https://cdn.tailwindcss.com" }
    }
    body {
    //paste the output of the input.txt
    }
Enter fullscreen mode Exit fullscreen mode

4 Some tags are missing, so feel free to add them yourself as such

import kotlinx.html.FlowContent
import kotlinx.html.HTMLTag
import kotlinx.html.HtmlBlockTag
import kotlinx.html.HtmlTagMarker
import kotlinx.html.TagConsumer
import kotlinx.html.attributesMapOf
import kotlinx.html.visit

@HtmlTagMarker
inline fun FlowContent.path(classes : String? = null, crossinline block : PATH.() -> Unit = {}) : Unit = PATH(
    attributesMapOf("class", classes), consumer).visit(block)

@Suppress("unused")
open class PATH(initialAttributes : Map<String, String>, override val consumer : TagConsumer<*>) : HTMLTag("path", consumer, initialAttributes, null, false, false), HtmlBlockTag {

}
Enter fullscreen mode Exit fullscreen mode

5 done!

Thanks prime for the video, and a big thanks to Tom Delalande for this video https://www.youtube.com/watch?v=9OYn48xBzOY and the code snippets above. Join his discord here if you have more questions https://discord.com/invite/Cg66xQ8KgP

Top comments (0)