HTML builder example pattern in Kotlin - Mini Project: Build & Apply

Build a Simple HTML Page Using Kotlin HTML Builder

📖 Scenario: You want to create a simple HTML page using Kotlin's HTML builder pattern. This helps you write HTML code in Kotlin in a clear and structured way.

🎯 Goal: Build a small HTML page with a header, a paragraph, and a list using Kotlin's HTML builder pattern.

📋 What You'll Learn

Create an HTML document with a head and body

Add a title inside the head

Add a h1 header inside the body

Add a p paragraph inside the body

Add an unordered list ul with three list items li

💡 Why This Matters

🌍 Real World

Kotlin HTML builder is used to generate HTML content programmatically, useful in web servers, templates, or static site generation.

💼 Career

Understanding Kotlin DSLs and HTML generation is valuable for backend developers working with Kotlin frameworks like Ktor or building web tools.

1

Create the HTML builder setup

Create a variable called htmlContent and assign it the result of kotlinx.html.stream.createHTML().html with an empty lambda block {}.

Kotlin

# Create a variable called htmlContent using createHTML().html {}
# Your code here

Need a hint?

Use val htmlContent = createHTML().html { } to start building your HTML.

2

Add the head section with a title

Inside the html builder block, add a head block. Inside head, add a title with the text "My Kotlin Page".

Kotlin

import kotlinx.html.stream.createHTML

val htmlContent = createHTML().html {
    // Add head with title here
}

Need a hint?

Use head { title { +"My Kotlin Page" } } inside the html block.

3

Add body with header and paragraph

Inside the html builder block, after head, add a body block. Inside body, add a h1 header with text "Welcome to Kotlin HTML Builder" and a p paragraph with text "This page is built using Kotlin.".

Kotlin

import kotlinx.html.stream.createHTML

val htmlContent = createHTML().html {
    head {
        title { +"My Kotlin Page" }
    }
    // Add body with h1 and p here
}

Need a hint?

Use body { h1 { ... } p { ... } } inside the html block after head.

4

Add an unordered list and print the HTML

Inside the body block, add an unordered list ul with three list items li containing the texts "Item 1", "Item 2", and "Item 3". Then, print the htmlContent variable.

Kotlin

import kotlinx.html.stream.createHTML

val htmlContent = createHTML().html {
    head {
        title { +"My Kotlin Page" }
    }
    body {
        h1 { +"Welcome to Kotlin HTML Builder" }
        p { +"This page is built using Kotlin." }
        // Add ul with li items here
    }
}

// Print the htmlContent
# Your code here

Need a hint?

Use ul { li { ... } } inside body and then println(htmlContent) to show the HTML.