{"id":448,"date":"2025-03-29T17:25:53","date_gmt":"2025-03-29T17:25:53","guid":{"rendered":"https:\/\/imcodinggenius.com\/?p=448"},"modified":"2025-03-29T17:25:53","modified_gmt":"2025-03-29T17:25:53","slug":"a-quick-guide-to-htmx-in-kotlin","status":"publish","type":"post","link":"https:\/\/imcodinggenius.com\/?p=448","title":{"rendered":"A Quick Guide to htmx in Kotlin"},"content":{"rendered":"

To be more specific, we will see a step-by-step process of writing HTML <\/strong>with typesafe Kotlin DSL<\/strong>, integrating htmx<\/strong>, and handling requests with Ktor<\/strong>. <\/p>\n

Eventually, we will get the below user table:<\/p>\n\n

But before we start, just a short disclaimer: although the main focus for this tutorial is the htmx \/ Kotlin \/ Ktor combination, I decided to bring Tailwind CSS<\/strong> to the project with the help of Material Tailwind components<\/a>. This way, I wanted to showcase the code that is closer to real-life scenarios. Not a next, plain HTML example. <\/p>\n

So, although I tried my best, please keep in mind that the HTML part may need some more love when adapting <\/p>\n

Note: if you enjoy this content and would like to learn Ktor step-by-step, then check out my Ktor Server Pro course<\/a>.<\/p>\n

What is htmx? <\/h2>\n

If you are here, then there is a high chance you\u2019ve been looking for a Kotlin & htmx combination, so you already know what it is. <\/p>\n

Nevertheless, so we are all on on the same page: <\/p>\n

It is a library that allows you to access modern browser features directly from HTML, rather than using javascript.<\/p>\n

And we could add plenty of other things here, like the fact that it is small, dependency-free, and allows us to use AJAX, CSS Transitions, WebSockets, and so on. <\/p>\n

But, IMO, the most important thing from the practical standpoint is that we can use attributes in HTML, and the library will do the \u201cmagic\u201d for us:<\/p>\n

<td>
\n <button hx-delete=»\/users\/7a9079f0-c5a2-45d0-b4ae-e304b6908787″ hx-swap=»outerHTML» hx-target=»closest tr»><\/p>\n

… the rest<\/p>\n

The above following snippet means that when we click the button:<\/p>\n

the DELETE \/users\/7a9079f0-c5a2-45d0-b4ae-e304b6908787 request is made<\/p>\n

the closest tr element is replaced with the HTML response we receive<\/p>\n

And I believe this is all we need to know for now. <\/p>\n

Again, a short note from my end: the htmx documentation<\/a> is a great resource, and I will refer a lot to it throughout this course to not reinvent the wheel. But at the same time, I want to deliver you a fully-contained article so that you don\u2019t need to jump between pages <\/p>\n

Generate Ktor Project<\/h2>\n

As the first step, let\u2019s quickly generate a new Ktor project using https:\/\/start.ktor.io\/<\/a>:<\/p>\n

As we can see, the only plugin we need to select is the Kotlin HTML DSL <\/strong>(this way, the Routing plugin is added, too).<\/p>\n

Regarding the config, we are going to use Ktor 3.1.1<\/strong> with Netty<\/strong>, YAML <\/strong>config, and without a version catalog<\/strong>. But, of course, feel free to adjust it here according to your needs.<\/p>\n

With that done, let\u2019s download the project and import it to our IDE. <\/p>\n

Create User Repository<\/h2>\n

Following, let\u2019s add the repository package and introduce a simple, in-memory user repository:<\/p>\n

data class User(
\n val id: String = UUID.randomUUID().toString(),
\n val firstName: String,
\n val lastName: String,
\n val enabled: Boolean,
\n val createdAt: LocalDateTime = LocalDateTime.now(),
\n)<\/p>\n

class UserRepository {<\/p>\n

private val users = mutableListOf(
\n User(firstName = «Jane», lastName = «Doe», enabled = true),
\n User(firstName = «John», lastName = «Smith», enabled = true),
\n User(firstName = «Alice», lastName = «Johnson», enabled = false),
\n User(firstName = «Bob», lastName = «Williams», enabled = true),
\n )<\/p>\n

fun create(firstName: String, lastName: String, enabled: Boolean): User =
\n User(firstName = firstName, lastName = lastName, enabled = enabled)
\n .also(users::add)<\/p>\n

fun findAll(): List<User> = users<\/p>\n

fun delete(id: String): Boolean = users.removeIf { it.id == id }
\n}<\/p>\n

As we can see, nothing spectacular. Just 3 functions responsible for creating, searching, and deleting users. <\/p>\n

Return HTML Response in Ktor<\/h2>\n

Following, let\u2019s add the routing package and Routing.kt: <\/p>\n

fun Application.configureRouting(userRepository: UserRepository) {
\n routing {<\/p>\n

get(«\/») {
\n call.respondHtml {
\n renderIndex(userRepository)
\n }
\n }
\n }<\/p>\n

}<\/p>\n

And update the main Application.kt to incorporate those changes: <\/p>\n

fun Application.module() {
\n val userRepository = UserRepository()<\/p>\n

configureRouting(userRepository)
\n}<\/p>\n

In a moment, we will add the renderIndex function, but for now, let\u2019s focus on the above. <\/p>\n

Long story short, the above code instructs the Ktor server to respond with the HTML response whenever it reaches the root path. By default, the localhost:8080. <\/p>\n

Generate HTML page with Kotlin DSL<\/h2>\n

With that done, we have everything we need to start returning HTML responses. So in this section, we will prepare the baseline for htmx. <\/p>\n

Note: if you feel that continuous server restarting is painful, please check out how to enable auto-reload in Ktor?<\/a> <\/p>\n

Render Homepage<\/h3>\n

As the first step, let\u2019s add the html package and the renderIndex function in Index.kt: <\/p>\n

import com.codersee.repository.UserRepository
\nimport kotlinx.html.*<\/p>\n

fun HTML.renderIndex(userRepository: UserRepository) {
\n body {
\n div {
\n insertHeader()
\n }<\/p>\n

}
\n}<\/p>\n

private fun FlowContent.insertHeader() {
\n h5 {
\n +»Users list»
\n }
\n}<\/p>\n

At this point, such a structure is overengineering. Nevertheless, our codebase is about to grow quickly in this tutorial, so we rely on Kotlin extension functions from the very beginning. <\/p>\n

And as we can see, we use the HTML that represents the root element of an HTML document. Inside it, we can define the structure in a type-safe manner, thanks to the Kotlin DSL<\/a> feature. For the inner tags, we can use the FlowContent that is the marker interface for plenty of classes representing HTML tags, like div, headers, or the body.<\/p>\n

And before we rerun the application, we must add the necessary import in Routing.kt: <\/p>\n

import com.codersee.repository.html.renderIndex<\/p>\n

With that done, let\u2019s rerun the application and verify that everything is working. <\/p>\n

Insert HTML Form<\/h3>\n

Following, let\u2019s use the HTML DSL to define the user form. <\/p>\n

As the first step, let\u2019s add the Form.kt to inside the html package:<\/p>\n

import kotlinx.html.*<\/p>\n

fun FlowContent.insertUserForm() {
\n div {
\n form {
\n div {
\n div {
\n label {
\n htmlFor = «first-name»
\n +»First Name»
\n }
\n input {
\n type = InputType.text
\n name = «first-name»
\n id = «first-name»
\n placeholder = «First Name»
\n }
\n }
\n div {
\n label {
\n htmlFor = «last-name»
\n +»Last Name»
\n }
\n input {
\n type = InputType.text
\n name = «last-name»
\n id = «last-name»
\n placeholder = «Last Name»
\n }
\n }
\n div {
\n label {
\n +»Account enabled»
\n }
\n div {
\n div {
\n input {
\n type = InputType.radio
\n name = «enabled-radio»
\n id = «radio-button-1»
\n value = «true»
\n }
\n label {
\n htmlFor = «radio-button-1»
\n +»Yes»
\n }
\n }
\n div {
\n input {
\n type = InputType.radio
\n name = «enabled-radio»
\n id = «radio-button-2»
\n value = «false»
\n checked = true
\n }
\n label {
\n htmlFor = «radio-button-2»
\n +»No»
\n }
\n }
\n }
\n }
\n div {
\n button {
\n +»Add user»
\n }
\n }
\n }
\n }
\n }
\n}<\/p>\n

As we can see, the Kotlin DSL allows us to define everything in a neat, structured manner<\/strong>. And although I had a chance to use it in various places, with HTML, it feels so\u2026natural. We write the code pretty similar to HTML.<\/p>\n

Of course, before heading to the next part, let\u2019s make use of our function: <\/p>\n

fun HTML.renderIndex(userRepository: UserRepository) {
\n body {
\n div {
\n insertHeader()
\n insertUserForm()
\n }<\/p>\n

}
\n}<\/p>\n

We can clearly see that the extraction was a good idea <\/p>\n

Create User Table<\/h3>\n

As the next step, let\u2019s add the UserTable.kt: <\/p>\n

import com.codersee.repository.User
\nimport kotlinx.html.*
\nimport java.time.format.DateTimeFormatter<\/p>\n

fun FlowContent.insertUserTable(users: List<User>) {
\n div {
\n table {
\n thead {
\n tr {
\n th {
\n +»User»
\n }
\n th {
\n +»Status»
\n }
\n th {
\n +»Created At»
\n }
\n th {}
\n }
\n }<\/p>\n

tbody {
\n id = «users-table»<\/p>\n

users.forEach { user ->
\n tr {
\n insertUserRowCells(user)
\n }
\n }
\n }
\n }
\n }
\n}<\/p>\n

fun TR.insertUserRowCells(user: User) {
\n td {
\n div {
\n p {
\n +»${user.firstName} ${user.lastName}»
\n }
\n }
\n }
\n td {
\n div {
\n div {
\n val enabledLabel = if (user.enabled) «Enabled» else «Disabled»
\n val labelColor = if (user.enabled) «green» else «red»<\/p>\n

span { +enabledLabel }
\n }
\n }
\n }
\n td {
\n p {
\n +user.createdAt.format(DateTimeFormatter.ofPattern(«yyyy-MM-dd HH:mm:ss»))
\n }
\n }
\n td {
\n button {
\n + «Delete»<\/p>\n

}
\n }
\n}<\/p>\n

As we can see this time, the Kotlin HTML DSL allows us to easily generate dynamic HTML tags<\/strong>. We use the passed user list to create a row for every user we \u201cpersisted\u201d. We even make the decision about the label and future color based on the list. <\/p>\n

Again, let\u2019s get back to Routing.kt and invoke our function:<\/p>\n

fun HTML.renderIndex(userRepository: UserRepository) {
\n body {
\n div {
\n insertHeader()
\n insertUserForm()
\n insertUserTable(userRepository.findAll())
\n }<\/p>\n

}
\n}<\/p>\n

And although I am pretty sure it won\u2019t become the eighth wonder of the World, our application starts looking similar to what we want to achieve:<\/p>\n

htmx and Kotlin<\/h2>\n

With all of that done, we have everything prepared to start actually working with htmx and Kotlin<\/strong>.<\/p>\n

Again, you will see a lot of references taken from the docs<\/a> (which I encourage you to visit after this tutorial).<\/p>\n

Import<\/h3>\n

As the first step, let\u2019s import htmx<\/strong>. <\/p>\n

Again, it is nothing else than the JavaScript library, so the only thing we need is to add it inside the script block of our HTML. <\/p>\n

And the easiest way is to simply fetch it from their CDN and put it inside the Kotlin script DSL block:<\/p>\n

fun HTML.renderIndex(userRepository: UserRepository) {
\n head {
\n script {
\n src = «https:\/\/unpkg.com\/htmx.org@2.0.4»
\n }
\n }
\n body {
\n div {
\n insertHeader()
\n insertUserForm()
\n insertUserTable(userRepository.findAll())
\n }<\/p>\n

}
\n}<\/p>\n

AJAX Requests \u2013 Create User<\/h3>\n

As we saw in the very beginning, htmx allows us to define requests with attributes. <\/p>\n

To be more specific, we can use the following attributes: <\/p>\n

hx-get<\/p>\n

hx-post<\/p>\n

hx-put<\/p>\n

hx-patch<\/p>\n

hx-delete<\/p>\n

And, long story short, when the element is triggered, an AJAX request is made to the specified URL.<\/p>\n

So, let\u2019s update our form then: <\/p>\n

fun FlowContent.insertUserForm() {
\n div {
\n form {
\n attributes[«hx-post»] = «\/users»<\/p>\n

… the rest<\/p>\n

This way, our html now contains:<\/p>\n

<form hx-post=»\/users»><\/p>\n

And when we hit the Add user button, we can see that the request is triggered (but, it results in 404 response given we have no handler). <\/p>\n

So, let\u2019s add the endpoint responsible for user creation: <\/p>\n

fun Application.configureRouting(userRepository: UserRepository) {
\n routing {<\/p>\n

get(«\/») {
\n call.respondHtml {
\n renderIndex(userRepository)
\n }
\n }<\/p>\n

route(«\/users») {<\/p>\n

post {
\n val formParams = call.receiveParameters()
\n val firstName = formParams[«first-name»]!!
\n val lastName = formParams[«last-name»]!!
\n val enabled = formParams[«enabled-radio»]!!.toBoolean()<\/p>\n

val createdItem = userRepository.create(firstName, lastName, enabled)<\/p>\n

val todoItemHtml = createHTML().tr { insertUserRowCells(createdItem) }<\/p>\n

call.respondText(
\n todoItemHtml,
\n contentType = ContentType.Text.Html,
\n )
\n }
\n }
\n }<\/p>\n

}<\/p>\n

At this point, it should not be a surprise, but we can see that in Ktor, we can do that quite easily. <\/p>\n

Our code snippet will read the form parameters sent from the browser, \u201ccreate\u201d a new user, and return a 200 OK response with:<\/p>\n

<tr>
\n <td>
\n <div>
\n <p>Admiral Jahas<\/p>
\n <\/div>
\n <\/td>
\n <td>
\n <div>
\n <div><span>Disabled<\/span><\/div>
\n <\/div>
\n <\/td>
\n <td>
\n <p>2025-03-29 08:16:40<\/p>
\n <\/td>
\n <td><button>Delete<\/button><\/td>
\n<\/tr><\/p>\n

The important <\/strong>thing to mention here is that respondHtml requires us to respond with whole body! So, to bypass that, we use the respondText function and set the content type as HTML. <\/p>\n

However, when we open up the browser, we can see this:<\/p>\n

And I am pretty sure that is not what we wanted <\/p>\n

htmx Target<\/h3>\n

Lesson one:<\/strong> if we want to instruct htmx to load the response into a different element than the one that made the request, we must use the hx-target attribute that takes the CSS selector, or:<\/p>\n

this keyword- to refer to the element with hx-target attribute<\/p>\n

closest, next, previous <CSS selector> (like closest div)- to target the closest ancestor element or itself<\/p>\n

find <CSS selector \u2013 to target the first child descendant element that matches the given CSS selector<\/p>\n

As a proof, let\u2019s take a look at what happened previously: <\/p>\n

As we can see, the table row was inserted inside the form. And that does not make sense, at all. <\/p>\n

So, to fix that, let\u2019s target the table tbody instead: <\/p>\n

fun FlowContent.insertUserForm() {
\n div {
\n form {
\n attributes[«hx-post»] = «\/users»
\n attributes[«hx-target»] = «#users-table»<\/p>\n

As a result, all the other rows are deleted, but it seems to be closer to what we want:<\/p>\n

Swapping in htmx<\/h3>\n

Next lesson:<\/strong> by default, htmx replaces the innerHTML of the target element<\/strong>. <\/p>\n

So, in our case, the user was added successfully. We can even refresh the page and see that the array contains all created users. However, we have not defined the hx-swap so the tbody inner HTML was deleted, and our returned one was inserted instead. <\/p>\n

So, we must add the hx-swap with one of the following values:<\/p>\n

innerHTML\u2013 puts the content inside the target element<\/p>\n

outerHTML\u2013 replaces the entire target element with the returned content<\/p>\n

afterbegin\u2013 prepends the content before the first child inside the target<\/p>\n

beforebegin\u2013 prepends the content before the target in the target\u2019s parent element<\/p>\n

beforeend\u2013 appends the content after the last child inside the target<\/p>\n

afterend\u2013 appends the content after the target in the target\u2019s parent element<\/p>\n

delete\u2013 deletes the target element regardless of the response<\/p>\n

none\u2013 does not append content from response (Out of Band Swaps and Response Headers will still be processed)<\/p>\n

And in our case, the beforeend is the one we should pick to append the created user at the end of the list:<\/p>\n

fun FlowContent.insertUserForm() {
\n div {
\n form {
\n attributes[«hx-post»] = «\/users»
\n attributes[«hx-target»] = «#users-table»
\n attributes[«hx-swap»] = «beforeend»<\/p>\n

When we restart the app, everything works fine! <\/p>\n

Dynamic htmx Tags in Kotlin<\/h3>\n

At this point, we know how to display and add new users with htmx. So, let\u2019s learn how to delete them.<\/p>\n

As the first step, let\u2019s prepare a Ktor handler inside the route(«\/users») for the DELETE request:<\/p>\n

delete(«\/{id}») {
\n val id = call.parameters[«id»]!!<\/p>\n

userRepository.delete(id)<\/p>\n

call.respond(HttpStatusCode.OK)
\n}<\/p>\n

With that code, whenever a DELETE \/users\/{some-id} is made, we remove the user from our list and return 200 OK.<\/p>\n

Important lesson here:<\/strong> for simplicity, we return 200 OK (and not 204 No Content), because by default, htmx ignores successful responses other than 200.<\/p>\n

Following, let\u2019s update our button: <\/p>\n

td {
\n button {
\n attributes[«hx-delete»] = «\/users\/${user.id}»
\n attributes[«hx-swap»] = «outerHTML»
\n attributes[«hx-target»] = «closest tr»<\/p>\n

So, firstly, whenever we generate our button, we use Kotlin string interpolation<\/strong> to put the user identifier in the hx-delete attribute value. A neat and easy way to achieve that with Kotlin. <\/p>\n

When it comes to swapping, we want to find the closest tr parent and swap the entire element with the response. And as the response contains nothing<\/strong>, it will be simply removed<\/p>\n

After we rerun the application, we will see everything working perfectly fine!<\/p>\n

Error Handling with Ktor and htmx<\/h3>\n

Following, let\u2019s learn how we can handle any Ktor error response in htmx. <\/p>\n

For that purpose, let\u2019s update the POST handler in Ktor:<\/p>\n

post {
\n val formParams = call.receiveParameters()
\n val firstName = formParams[«first-name»]!!
\n val lastName = formParams[«last-name»]!!
\n val enabled = formParams[«enabled-radio»]!!.toBoolean()<\/p>\n

if (firstName.isBlank() || lastName.isBlank())
\n return@post call.respond(HttpStatusCode.BadRequest)<\/p>\n

… the rest of the code<\/p>\n

With that validation, whenever first-name or last-name form parameter is blank, the API client receives 400 Bad Request.<\/p>\n

After we restart the server and try to make a request without passing first or last name, we see that nothing is happening. No pop-ups, alerts, nothing. The only indication that the request is actually made is thenetwork tab of our browser.<\/p>\n

Well, unfortunately (or fortunately?), htmx does not provide any handling out-of-the-box.<\/p>\n

But, it throws two events:<\/p>\n

htmx:responseError\u2013 in the event of an error response from the server, like 400 Bad Request<\/p>\n

htmx:sendError\u2013 in case of connection error<\/p>\n

So, let\u2019s add a tiny bit of JS in Kotlin, then: <\/p>\n

private fun BODY.insertErrorHandlingScripts() {
\n script {
\n +»»»
\n document.body.addEventListener(‘htmx:responseError’, function(evt) {
\n alert(‘An error occurred! HTTP status:’ + evt.detail.xhr.status);
\n });<\/p>\n

document.body.addEventListener(‘htmx:sendError’, function(evt) {
\n alert(‘Server unavailable!’);
\n });
\n «»».trimIndent()
\n }
\n}<\/p>\n

And let\u2019s add this script at the end of the body when rendering the homepage:<\/p>\n

fun HTML.renderIndex(userRepository: UserRepository) {
\n head {
\n script {
\n src = «https:\/\/unpkg.com\/htmx.org@2.0.4»
\n }
\n }
\n body {
\n div {
\n insertHeader()
\n insertUserForm()
\n insertUserTable(userRepository.findAll())
\n }<\/p>\n

insertErrorHandlingScripts()
\n }
\n}<\/p>\n

Excellent! From now on, whenever the API client receives an error response, the alert is displayed. Moreover, if we turn off our server, we will see the error response, too.<\/p>\n

And basically, that is all for the htmx part with Kotlin. From now on, we are going to work on the styling of our application<\/p>\n

Returning Images in Ktor<\/h2>\n

Before we head to the Tailwind CSS part, let\u2019s learn one more thing in Ktor: static responses handling.<\/p>\n

So, let\u2019s put the below image in the resources -> img directory:<\/p>\n

And let\u2019s add this image as a placeholder to each row in our table: <\/p>\n

fun TR.insertUserRowCells(user: User) {
\n td {
\n div {
\n img {
\n src = «\/img\/placeholder.png»
\n }<\/p>\n

When we rerun the application, we can see that it does not work.<\/p>\n

Well, to fix that, we must instruct Ktor to serve our resources as static content:<\/p>\n

fun Application.configureRouting(userRepository: UserRepository) {
\n routing {
\n staticResources(«\/img», «img»)<\/p>\n

This time, when we restart the application, we see that placeholders are working fine. <\/p>\n

And we will style them in a moment <\/p>\n

Styling With Tailwind CSS<\/h2>\n

At this point, we have a fully working Kotlin and htmx integration.<\/p>\n

So, if we already did something else than the JSON response, let\u2019s make it nice<\/p>\n

Import Tailwind<\/h3>\n

Just like with htmx, let\u2019s use the CDN to import Tailwind to the project:<\/p>\n

fun HTML.renderIndex(userRepository: UserRepository) {
\n head {
\n script {
\n src = «https:\/\/unpkg.com\/htmx.org@2.0.4»
\n }
\n script {
\n src = «https:\/\/unpkg.com\/@tailwindcss\/browser@4»
\n }
\n }<\/p>\n

Update Index <\/h3>\n

Then, let\u2019s navigate to the Index.kt and add adjustments:<\/p>\n

fun HTML.renderIndex(userRepository: UserRepository) {
\n head {
\n script {
\n src = «https:\/\/unpkg.com\/htmx.org@2.0.4»
\n }
\n script {
\n src = «https:\/\/unpkg.com\/@tailwindcss\/browser@4»
\n }
\n }
\n body {
\n div {
\n classes = setOf(«m-auto max-w-5xl w-full overflow-hidden»)<\/p>\n

insertHeader()
\n insertUserForm()
\n insertUserTable(userRepository.findAll())
\n }<\/p>\n

insertErrorHandlingScripts()
\n }
\n}<\/p>\n

private fun FlowContent.insertHeader() {
\n h5 {
\n classes =
\n setOf(«py-8 block font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900»)<\/p>\n

+»Users list»
\n }
\n}<\/p>\n

private fun BODY.insertErrorHandlingScripts() {
\n script {
\n +»»»
\n document.body.addEventListener(‘htmx:responseError’, function(evt) {
\n alert(‘An error occurred! HTTP status:’ + evt.detail.xhr.status);
\n });<\/p>\n

document.body.addEventListener(‘htmx:sendError’, function(evt) {
\n alert(‘Server unavailable!’);
\n });
\n «»».trimIndent()
\n }
\n}<\/p>\n

As we can see, we can use the classes in Kotlin HTML DSL to prive classes names as a Set of String values:<\/p>\n

classes = setOf(\u201cm-auto max-w-5xl w-full overflow-hidden\u201d)<\/p>\n

In my case, I prefer simply copy-pasting those values instead of separating them with colons.<\/p>\n

Refactor Form<\/h2>\n

Then, let\u2019s update the Form.kt: <\/p>\n

fun FlowContent.insertUserForm() {
\n div {
\n classes = setOf(«mx-auto w-full»)<\/p>\n

form {
\n attributes[«hx-post»] = «\/users»
\n attributes[«hx-target»] = «#users-table»
\n attributes[«hx-swap»] = «beforeend»<\/p>\n

div {
\n classes = setOf(«-mx-3 flex flex-wrap»)<\/p>\n

div {
\n classes = setOf(«w-full px-3 sm:w-1\/4»)<\/p>\n

label {
\n classes = setOf(«mb-3 block text-base font-medium text-[#07074D]»)<\/p>\n

htmlFor = «first-name»
\n +»First Name»
\n }
\n input {
\n classes =
\n setOf(«w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md»)<\/p>\n

type = InputType.text
\n name = «first-name»
\n id = «first-name»
\n placeholder = «First Name»
\n }
\n }
\n div {
\n classes = setOf(«w-full px-3 sm:w-1\/4»)<\/p>\n

label {
\n classes = setOf(«mb-3 block text-base font-medium text-[#07074D]»)<\/p>\n

htmlFor = «last-name»
\n +»Last Name»
\n }
\n input {
\n classes =
\n setOf(«w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md»)<\/p>\n

type = InputType.text
\n name = «last-name»
\n id = «last-name»
\n placeholder = «Last Name»
\n }
\n }
\n div {
\n classes = setOf(«w-full px-3 sm:w-1\/4»)<\/p>\n

label {
\n classes = setOf(«mb-3 block text-base font-medium text-[#07074D]»)<\/p>\n

+»Account enabled»
\n }
\n div {
\n classes = setOf(«flex items-center space-x-6 pt-3»)<\/p>\n

div {
\n classes = setOf(«flex items-center»)<\/p>\n

input {
\n classes = setOf(«h-5 w-5»)<\/p>\n

type = InputType.radio
\n name = «enabled-radio»
\n id = «radio-button-1»
\n value = «true»
\n }
\n label {
\n classes = setOf(«pl-3 text-base font-medium text-[#07074D]»)<\/p>\n

htmlFor = «radio-button-1»
\n +»Yes»
\n }
\n }
\n div {
\n classes = setOf(«flex items-center»)<\/p>\n

input {
\n classes = setOf(«h-5 w-5»)<\/p>\n

type = InputType.radio
\n name = «enabled-radio»
\n id = «radio-button-2»
\n value = «false»
\n checked = true
\n }
\n label {
\n classes = setOf(«pl-3 text-base font-medium text-[#07074D]»)<\/p>\n

htmlFor = «radio-button-2»
\n +»No»
\n }
\n }
\n }
\n }
\n div {
\n classes = setOf(«w-full px-3 sm:w-1\/4 pt-8»)<\/p>\n

button {
\n classes =
\n setOf(«cursor-pointer rounded-md bg-slate-800 py-3 px-8 text-center text-base font-semibold text-white outline-none»)<\/p>\n

+»Add user»
\n }
\n }
\n }
\n }
\n }
\n}<\/p>\n

Similarly, we don\u2019t change anything in here apart from adding a bunch of classes. A whooooole bunch of classes <\/p>\n

Modify User Table<\/h2>\n

As the last step, let\u2019 apply changes to our user table: <\/p>\n

fun FlowContent.insertUserTable(users: List<User>) {
\n div {
\n classes = setOf(«px-0 overflow-scroll»)<\/p>\n

table {
\n classes = setOf(«w-full mt-4 text-left table-auto min-w-max»)<\/p>\n

thead {
\n tr {
\n th {
\n classes = setOf(«p-4 border-y border-blue-gray-100 bg-blue-gray-50\/50»)
\n +»User»
\n }
\n th {
\n classes = setOf(«p-4 border-y border-blue-gray-100 bg-blue-gray-50\/50»)
\n +»Status»
\n }
\n th {
\n classes = setOf(«p-4 border-y border-blue-gray-100 bg-blue-gray-50\/50»)
\n +»Created At»
\n }
\n th {
\n classes = setOf(«p-4 border-y border-blue-gray-100 bg-blue-gray-50\/50»)
\n }
\n }
\n }<\/p>\n

tbody {
\n id = «users-table»<\/p>\n

users.forEach { user ->
\n tr {
\n insertUserRowCells(user)
\n }
\n }
\n }
\n }
\n }
\n}<\/p>\n

fun TR.insertUserRowCells(user: User) {
\n td {
\n classes = setOf(«p-4 border-b border-blue-gray-50»)<\/p>\n

div {
\n classes = setOf(«flex items-center gap-3»)<\/p>\n

img {
\n classes = setOf(«relative inline-block h-9 w-9 !rounded-full object-cover object-center»)<\/p>\n

src = «\/img\/placeholder.png»
\n }<\/p>\n

p {
\n classes = setOf(«block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900»)<\/p>\n

+»${user.firstName} ${user.lastName}»
\n }
\n }
\n }
\n td {
\n classes = setOf(«p-4 border-b border-blue-gray-50»)<\/p>\n

div {
\n classes = setOf(«w-max»)<\/p>\n

div {
\n val enabledLabel = if (user.enabled) «Enabled» else «Disabled»
\n val labelColor = if (user.enabled) «green» else «red»<\/p>\n

classes =
\n setOf(«relative grid items-center px-2 py-1 font-sans text-xs font-bold text-black-900 uppercase rounded-md select-none whitespace-nowrap bg-$labelColor-500\/20»)<\/p>\n

span { +enabledLabel }
\n }
\n }
\n }
\n td {
\n classes = setOf(«p-4 border-b border-blue-gray-50»)<\/p>\n

p {
\n classes = setOf(«block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900»)<\/p>\n

+user.createdAt.format(DateTimeFormatter.ofPattern(«yyyy-MM-dd HH:mm:ss»))
\n }
\n }
\n td {
\n classes = setOf(«p-4 border-b border-blue-gray-50»)<\/p>\n

button {
\n classes =
\n setOf(«cursor-pointer relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900\/10 active:bg-gray-900\/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none»)
\n attributes[«hx-delete»] = «\/users\/${user.id}»
\n attributes[«hx-swap»] = «outerHTML»
\n attributes[«hx-target»] = «closest tr»<\/p>\n

unsafe {
\n +»»»
\n <span class=»absolute transform -translate-x-1\/2 -translate-y-1\/2 top-1\/2 left-1\/2″>
\n <svg xmlns=»http:\/\/www.w3.org\/2000\/svg» fill=»none» viewBox=»0 0 24 24″
\n stroke-width=»2″ stroke=»currentColor» class=»w-6 h-6″>
\n <path stroke-linecap=»round» stroke-linejoin=»round»
\n d=»M6 18L18 6M6 6l12 12″\/>
\n <\/svg>
\n <\/span>
\n «»».trimIndent()
\n }<\/p>\n

}
\n }
\n}<\/p>\n

And here, apart from the CSS classes, we also added the X icon with the unsafe function from Kotlin HTML DSL:<\/p>\n

unsafe {
\n +»»»
\n <span class=»absolute transform -translate-x-1\/2 -translate-y-1\/2 top-1\/2 left-1\/2″>
\n <svg xmlns=»http:\/\/www.w3.org\/2000\/svg» fill=»none» viewBox=»0 0 24 24″
\n stroke-width=»2″ stroke=»currentColor» class=»w-6 h-6″>
\n <path stroke-linecap=»round» stroke-linejoin=»round»
\n d=»M6 18L18 6M6 6l12 12″\/>
\n <\/svg>
\n <\/span>
\n «»».trimIndent()
\n}<\/p>\n

And voila! When we run the application now, we should see a pretty decent-looking UI<\/p>\n

Summary<\/h2>\n

That\u2019s all for this tutorial on how to work with htmx and Kotlin HTML DSL in Ktor.<\/p>\n

Again, if you are tired of wasting your time looking for good Ktor resources, then check out my Ktor Server Pro course<\/a>:<\/p>\n

Over 15 hours of video content divided into over 130 lessons<\/p>\n

Hands-on approach: together, we implement 4 actual services<\/p>\n

top technologies: you will learn not only Ktor, but also how to integrate it with modern stack including JWT, PostgreSQL, MySQL, MongoDB, Redis, and Testcontainers.<\/p>\n

Lastly, you can find the source code for this lesson in this GitHub repository<\/a>.<\/p>\n

The post A Quick Guide to htmx in Kotlin<\/a> appeared first on Codersee — Kotlin on the backend<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"

To be more specific, we will see a step-by-step process of writing HTML with typesafe Kotlin DSL, integrating htmx, and handling requests with Ktor. Eventually, we will get the below user table: But before we start, just a short disclaimer: although the main focus for this tutorial is the htmx … <\/p>\n

Read More<\/a><\/div>\n","protected":false},"author":0,"featured_media":449,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-448","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"_links":{"self":[{"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/posts\/448"}],"collection":[{"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=448"}],"version-history":[{"count":0,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/posts\/448\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/media\/449"}],"wp:attachment":[{"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}