---
metadata:
  - name: generator
    content: Diplodoc Platform v5.63.0
alternate:
  - https://divkit.tech/docs/en/quickstart/compose.md
  - https://divkit.tech/docs/ru/quickstart/compose.md
  - href: https://divkit.tech/docs/en/quickstart/compose.md
    type: text/markdown
    title: Markdown version
  - href: https://divkit.tech/docs/en/llms.txt
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt

# Instructions for Jetpack Compose

The `compose` module renders DivKit JSON layouts using Jetpack Compose. This guide shows how to connect the library and display a card with the text “Hello, DivKit!”.

## Adding the library

Use an Android app with Jetpack Compose configured.

Add the dependency below to your app's `build.gradle.kts`. Replace `<divkit-version>` with the DivKit version you want to use. Available Compose renderer versions are listed on [Maven Central](https://central.sonatype.com/artifact/com.yandex.div/compose).

```kotlin translate=no
dependencies {
    implementation("com.yandex.div:compose:$divKitVersion")
}
```

## Preparing the JSON

Create `src/main/assets/hello_divkit.json` in the app module:

```json translate=no
{
  "card": {
    "log_id": "hello_compose",
    "states": [
      {
        "state_id": 0,
        "div": {
          "type": "text",
          "text": "Hello, DivKit!"
        }
      }
    ]
  }
}
```

The `card` object describes the card. If your layout uses templates, add a `templates` object next to it. Parse the templates before creating `DivData`.

## Minimal configuration and rendering

You need three objects to display a card:

- `DivData`: The parsed JSON layout.
- `DivConfiguration`, created with `divConfiguration {}`: The renderer settings. The defaults are enough for a text card.
- `DivContext`: An Android context with the DivKit configuration. Provide it through `LocalContext` to the `DivView` composable.

Replace the contents of `MainActivity.kt` with the following code, keeping your app's `package` declaration. The example uses the `hello_divkit.json` file from the previous step.

```kotlin translate=no
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawingPadding
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import com.yandex.div.compose.DivContext
import com.yandex.div.compose.DivView
import com.yandex.div.compose.divConfiguration
import com.yandex.div.data.DivParsingEnvironment
import com.yandex.div.json.ParsingErrorLogger
import com.yandex.div2.DivData
import org.json.JSONObject

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val json = assets.open("hello_divkit.json")
            .bufferedReader()
            .use { it.readText() }
        val data = parseDivData(json)
        val configuration = divConfiguration {}
        val divContext = DivContext(baseContext = this, configuration = configuration)

        setContent {
            CompositionLocalProvider(LocalContext provides divContext) {
                DivView(
                    data = data,
                    modifier = Modifier.safeDrawingPadding().padding(16.dp)
                )
            }
        }
    }
}

private fun parseDivData(json: String): DivData {
    val document = JSONObject(json)
    val environment = DivParsingEnvironment(ParsingErrorLogger.LOG)
    document.optJSONObject("templates")?.let { environment.parseTemplates(it) }
    return DivData(environment, document.getJSONObject("card"))
}
```

Run the app. The screen will display “Hello, DivKit!”.

The example parses the JSON and creates the configuration and `DivContext` once in `Activity.onCreate`, before calling `setContent`. `DivView` reuses the prepared data across recompositions and receives `DivContext` through `CompositionLocalProvider`.

For large cards, move JSON loading and parsing to a background thread and pass the resulting `DivData` to `DivView` through Compose state. Avoid parsing unchanged JSON on every recomposition.

{% note info %}

Use the classes from the `com.yandex.div.compose` package. `DivView` requires a `DivContext` in `LocalContext`; a regular Activity context causes a type cast error. When embedding Compose in an Android View hierarchy, you can pass the same context to `ComposeView(divContext)` before calling `setContent { DivView(data = data) }`.

{% endnote %}

## Images and additional configuration

The Compose renderer creates a Coil image loader automatically. To load network resources, add this permission inside `<manifest>` in `AndroidManifest.xml`:

```xml translate=no
<uses-permission android:name="android.permission.INTERNET" />
```

Configure additional features in the `divConfiguration {}` block: `actionHandler` handles app actions, `fontSourceProvider` provides fonts, `customViewFactories` provides custom components, and `extensionHandlers` provides extensions. Set `playerFactory` for video playback and `patchDownloader` for patch downloads.

## Integration example

For a working Compose renderer integration, see the [DivKit demo app](https://github.com/divkit/divkit/tree/main/client/android/divkit-demo-app). Its [ComposeRendererFacade](https://github.com/divkit/divkit/blob/main/client/android/divkit-demo-app/src/main/java/com/yandex/divkit/demo/div/ComposeRendererFacade.kt) demonstrates configuration, creating a `ComposeView` with a `DivContext`, and passing data to `DivView`.

<!-- 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 -->