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.