---
metadata:
  - name: generator
    content: Diplodoc Platform v5.50.3
alternate:
  - https://divkit.tech/docs/en/quickstart/kotlin-dsl.md
  - https://divkit.tech/docs/ru/quickstart/kotlin-dsl.md
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt

# Kotlin DSL

Kotlin DSL is a tool for describing UI in DivKit format using Kotlin language. 

## Usage

A typical process of working with the library is as follows.

1. Building layout as a `divan` object. `Data` class has structure of [`div-data`](https://divkit.tech/docs/en/concepts/divs/2/div-data.md) with a number of helper extension functions.

```Kotlin translate=no
val card = divan {
    data(
        // card id, required property
        logId = "new-div-card",
        // Card visual content declaration.
        // In this case the card contains one text element.
        div = text(
            fontSize = 18,
            text = "Hello, world!"
        )
    )
}
```

2. `divan` object serialization into JSON. In the following example `com.fasterxml.jackson` library is used.

```Kotlin translate=no
val jsonString = JsonMapper.builder().build().writeValueAsString(card)
```

3. Sending the acquired JSON to the client.

## Examples

### Expressions in the UI element properties

To set an expression as the element property value use `evaluate` extension function.

```Kotlin translate=no
val card = divan {
    data(
        logId = "new-div-card",
        // variables declaration
        variables = listOf(
            stringVariable(
                name = "hello_text",
                value = "Hello, world!"
            )
        ),
        div = text(
            // constant properties declaration
            fontSize = 18
        ).evaluate(
            // expression properties declaration
            text = expression("@{hello_text}")
        )
    )
}
```

### Templates

```Kotlin translate=no
// reference property declaration
val titleRef = reference<String>("title")

// template declaration
val titleTemplate = template("title_text") {
    text(
        // template constant properties declaration
        fontSize = 18,
        width = wrapContentSize(),
    ) + textRefs(
        // template reference properties declaration
        text = titleRef
    )
}

val card = divan {
    data(
        logId = "new-div-card",
        div = container(
            orientation = vertical,
            items = listOf(
                // creating an element using the template
                render(
                    titleTemplate,
                    // setting the value into the reference property
                    titleRef bind "Hello, world!"
                ) + textProps(
                    // base properties declaration/overriding
                    fontSize = 20
                ),
                // creating one more element using the same template
                render(
                    titleTemplate,
                    titleRef bind "Hello, DivKit!"
                )
            )
        )
    )
}
```


<!-- source: en/_includes/index/troubleshooting.md -->
## Learn more {#troubleshooting}

You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).



[DivKit Repository](https://github.com/divkit/divkit)
<!-- endsource: en/_includes/index/troubleshooting.md -->