HTML DSL integrates the kotlinx.html library into Ktor and allows you to respond to a client with HTML blocks. With HTML DSL, you can write pure HTML in Kotlin, interpolate variables into views, and even build complex HTML layouts using templates.
HTML DSL doesn't need installation but requires the
ktor-html-builder artifact. You can include it in the build script as follows:
Note that this artifact depends on
kotlinx-html-jvm, which is placed on a Space Packages repository:
Send HTML in response
In this case, the following HTML will be sent to the client:
To learn more about generating HTML using kotlinx.html, see the kotlinx.html wiki.
In addition to generating plain HTML, Ktor provides a template engine that can be used to build complex layouts. You can create a hierarchy of templates for different parts of an HTML page, for example, a root template for the entire page, child templates for a page header and footer, and so on. Ktor exposes the following API for working with templates:
To respond with an HTML built based on a specified template, call the ApplicationCall.respondHtmlTemplate method.
- Inside a created template class, you can define placeholders for different content types:
Let's see the example of how to create a hierarchical layout using templates. Imagine we have the following HTML:
We can split the layout of this page into two parts:
A root layout template for a page header and a child template for an article.
A child template for the article content.
Let's implement these layouts step-by-step:
respondHtmlTemplatemethod and pass a template class as a parameter. In our case, this is the
LayoutTemplateclass that should implement the
Inside the block, we will be able to access a template and specify its property values. These values will substitute placeholders specified in a template class. We'll create
LayoutTemplate and define its properties in the next step.
A root layout template will look in the following way:
The class exposes two properties:
headerproperty specifies a content inserted within the
contentproperty specifies a child template for article content.
A child template will look as follows:
This template exposes the
articleText properties, whose values will be inserted inside the
Now we are ready to send HTML built using the specified property values: