HTML builder example pattern in Kotlin - Step-by-Step Execution

Concept Flow - HTML builder example pattern

Start HTML builder function

↓

Create root element (html)

↓

Add child elements (head, body)

↓

Add nested elements (title, h1, p)

↓

Set text content and attributes

↓

Return built HTML string

↓

End

The builder function creates HTML elements step-by-step, nesting children and setting content, then returns the full HTML string.

Execution Sample

Kotlin

fun html(block: HTML.() -> Unit): String {
  val html = HTML()
  html.block()
  return html.render()
}

val page = html {
  head { title { text = "My Page" } }
  body { h1 { text = "Welcome" } p { text = "Hello, world!" } }
}

This code builds a simple HTML page with head and body using a Kotlin HTML builder pattern.

Execution Table

Step	Action	Element Created	Parent Element	Content/Attributes
1	Call html builder function	HTML root	None	Start building
2	Invoke head block	head	html	Empty
3	Invoke title block inside head	title	head	text = "My Page"
4	Invoke body block	body	html	Empty
5	Invoke h1 block inside body	h1	body	text = "Welcome"
6	Invoke p block inside body	p	body	text = "Hello, world!"
7	Render HTML to string	N/A	N/A	Full HTML string returned
8	End	N/A	N/A	Builder function returns

💡 All elements created and nested correctly, builder returns final HTML string.

Variable Tracker

Variable	Start	After head	After title	After body	After h1	After p	Final
html	empty HTML object	html with head	html with head and title	html with head/title and body	html with head/title/body and h1	html with head/title/body/h1 and p	final HTML structure
current element	html	head	title	body	h1	p	N/A

Key Moments - 3 Insights

Why does the 'title' element get added inside 'head' and not directly inside 'html'?

Because the 'title' block is called inside the 'head' block (see execution_table step 3), so it becomes a child of 'head'.

How does the builder know where to add each new element?

Each block is an extension function on the current element, so nested calls add children to the current element (see variable_tracker 'current element' changes).

What does the 'render' function do at the end?

It converts the built HTML object tree into a string representation (see execution_table step 7).

Visual Quiz - 3 Questions

Look at the execution_table at step 5, which element is created and where is it added?

A A p element added inside the head element

B A title element added inside the html element

C An h1 element added inside the body element

D A body element added inside the h1 element

💡 Hint

Check the 'Element Created' and 'Parent Element' columns at step 5 in execution_table.

At which step does the builder add the text 'Hello, world!'?

A Step 3

B Step 6

C Step 2

D Step 4

💡 Hint

Look at the 'Content/Attributes' column for the p element in execution_table.

If we removed the 'body' block call, what would happen to the final HTML structure?

A The HTML would have no body element or its children

B The head element would be missing

C The title text would be empty

D The h1 and p elements would be added directly under html

💡 Hint

Refer to variable_tracker and execution_table steps 4-6 about body and its children.

Concept Snapshot

Kotlin HTML builder pattern:
- Use a function with a lambda receiver (block: HTML.() -> Unit)
- Create root element object
- Call block to add nested elements
- Each nested block adds children to current element
- Render final HTML tree to string
- Enables readable, nested HTML construction in code

Full Transcript

This example shows how a Kotlin HTML builder function works step-by-step. First, the html function creates a root HTML object. Then it calls the block lambda, which adds child elements like head and body. Inside head, a title element is added with text. Inside body, h1 and p elements are added with text content. Each nested block adds elements as children of the current element. Finally, the render function converts the built object tree into a string. The execution table traces each step, showing which element is created and where it is added. The variable tracker shows how the current element changes as nested blocks run. Key moments clarify why elements nest as they do and how rendering works. The visual quiz tests understanding of element creation and nesting. This pattern helps write HTML in Kotlin code clearly and safely.

Practice

1. What is the main purpose of the HTML builder pattern in Kotlin?

easy

A. To write HTML code clearly and safely using Kotlin syntax

B. To convert HTML files into Kotlin source code automatically

C. To create CSS stylesheets within Kotlin code

D. To execute HTML code as Kotlin functions

Solution

1. Step 1: Understand the pattern's goal

   The HTML builder pattern is designed to help write HTML code inside Kotlin programs clearly and safely.

2. Step 2: Compare options with the pattern's purpose

   Only To write HTML code clearly and safely using Kotlin syntax correctly states that it helps write HTML code clearly and safely using Kotlin syntax.

3. Final Answer:

   To write HTML code clearly and safely using Kotlin syntax -> Option A

4. Quick Check:

   HTML builder pattern = clear, safe HTML in Kotlin [OK]

Hint: Focus on clarity and safety in HTML code generation [OK]

Common Mistakes:

• Confusing HTML builder with HTML parsing
• Thinking it generates CSS styles
• Assuming it runs HTML as Kotlin code

2. Which Kotlin syntax correctly starts an HTML builder block for a div element?

easy

A. html.div { }

B. html { div { } }

C. html.div() { }

D. html.div[] { }

Solution

1. Step 1: Recall Kotlin DSL syntax for HTML builder

   The HTML builder uses nested lambdas like html { div { } } to create tags.

2. Step 2: Check each option's syntax correctness

   html { div { } } uses the correct lambda block syntax. Options B, C, and D use invalid Kotlin syntax for this pattern.

3. Final Answer:

   html { div { } } -> Option B

4. Quick Check:

   Correct lambda block syntax = html { div { } } [OK]

Hint: Remember: use curly braces {} for nested tags in Kotlin DSL [OK]

Common Mistakes:

• Using dot notation without lambda braces
• Adding parentheses incorrectly
• Using square brackets instead of braces

3. What is the output of this Kotlin HTML builder code?

val result = html {
  body {
    p { +"Hello" }
    p { +"World" }
  }
}
println(result)

medium

A. HelloWorld

B. HelloWorld

C. HelloWorld

D. HelloWorld

Solution

1. Step 1: Understand the structure built by the code

   The code creates an html tag containing a body tag, which contains two p tags with text "Hello" and "World".

2. Step 2: Match the output string with the structure

   <html><body><p>Hello</p><p>World</p></body></html> correctly shows the full HTML with nested tags. Other options miss tags or combine paragraphs incorrectly.

3. Final Answer:

   <html><body><p>Hello</p><p>World</p></body></html> -> Option A

4. Quick Check:

   Nested tags output = full html with body and paragraphs [OK]

Hint: Remember each tag creates nested HTML elements [OK]

Common Mistakes:

• Forgetting the outer <html> tag
• Combining text inside one <p> tag
• Omitting the <body> tag

4. Identify the error in this Kotlin HTML builder code:

html {
  body {
    p { +"Welcome" }
    div
      p { +"Nested" }
  }
}

medium

A. body tag cannot contain div tag

B. Incorrect use of + operator inside p tag

C. html block must be assigned to a variable

D. Missing braces {} after div tag

Solution

1. Step 1: Check syntax for nested tags

   In Kotlin HTML builder, tags like div must be followed by braces to define their content.

2. Step 2: Identify the missing braces

   The div tag is written without braces, so the nested p tag is not properly inside it.

3. Final Answer:

   Missing braces {} after div tag -> Option D

4. Quick Check:

   Every tag needs braces for children [OK]

Hint: Always add {} after tags to nest children [OK]

Common Mistakes:

• Omitting braces for nested tags
• Misusing + operator for text
• Thinking body can't contain div

5. How would you modify this Kotlin HTML builder code to add a class attribute to the div tag?

html {
  body {
    div {
      p { +"Content" }
    }
  }
}

hard

A. div("class" to "container") { p { +"Content" } }

B. div(class = "container") { p { +"Content" } }

C. div { attributes["class"] = "container"; p { +"Content" } }

D. div { setAttribute("class", "container"); p { +"Content" } }

Solution

1. Step 1: Recall how to set attributes in Kotlin HTML builder

   Attributes are set inside the tag block using attributes["name"] = "value".

2. Step 2: Check each option for correct attribute setting

   div { attributes["class"] = "container"; p { +"Content" } } uses attributes["class"] = "container" inside the div block, which is the correct way. Options A, C, and D use invalid syntax or a method not available in this pattern.

3. Final Answer:

   div { attributes["class"] = "container"; p { +"Content" } } -> Option C

4. Quick Check:

   Set attributes inside block with attributes["name"] = value [OK]

Hint: Use attributes map inside tag block to set HTML attributes [OK]

Common Mistakes:

• Trying to pass attributes as function parameters
• Using non-existent setAttribute method
• Setting attributes outside tag block