> For the complete documentation index, see [llms.txt](https://kvision.gitbook.io/kvision-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kvision.gitbook.io/kvision-guide/3.-optional-ui-functionality-via-modules/handlebars.js-templates.md).

# Handlebars.js Templates

Support for [Handlebars.js](https://handlebarsjs.com/) templates is contained in kvision-handlebars module and is based on webpack's [handlebars loader](https://github.com/pcardune/handlebars-loader). Templates are automatically transformed to JavaScript functions during the build process of the application.

You put your template files (with `*.hbs` extension) into `src/jsMain/resources/modules/hbs` directory of your application. Then in your code you can use `@JsModule` and reference your `*.hbs` files. All components which render textual content (`io.kvision.html.Tag` class and subclasses) have `template` and `templates` properties. The second one allows you to define different templates for other supported languages (see. [Internationalization](/kvision-guide/2.-frontend-development-guide/internationalization.md)).

```kotlin
@JsModule("/kotlin/modules/hbs/template.hbs")
external val templateHbs: dynamic

@JsModule("/kotlin/modules/hbs/template.en.hbs")
external val templateEnHbs: dynamic

@JsModule("/kotlin/modules/hbs/template.pl.hbs")
external val templatePlHbs: dynamic

div {
    template = templateHbs
}

div {
    templates = mapOf(
        "en" to templateEnHbs,
        "pl" to templatePlHbs
    )
}
```

To actually call the template function and render its output in your app, you need to set some data. You can use `templateData` property and use plain JavaScript object. To generate one from your data  you can use `obj` function builder.

```kotlin
import io.kvision.utils.obj

div {
    template = templateHbs
    templateData = obj {
        name = "Alan"
        hometown = "Somewhere, TX"
        kids = arrayOf(obj {
            name = "Jimmy"
            age = "12"
        }, obj {
            name = "Sally"
            age = "5"
        })
    }
}
```

You can also use `toObj` extension function if you store your data in a class (or classes) with `@Serializable` annotation.

```kotlin
import kotlinx.serialization.Serializable
import io.kvision.utils.JSON.toObj

@Serializable
data class Kid(val name: String, val age: Int)
@Serializable
data class Person(val name: String, val hometown: String, val kids: List<Kid>)

val person = Person("Alan", "Somwhere, TX", listOf(Kid("Jimmy", 12), Kid("Sally", 5)))

div {
    template = templateHbs
    templateData = person.toObj()
}

```

The `setData` extension function is a convenient shortcut for the above.

```kotlin
div {
    template = templateHbs
    setData(person)
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://kvision.gitbook.io/kvision-guide/3.-optional-ui-functionality-via-modules/handlebars.js-templates.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.