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.

dependencies {
    implementation("com.yandex.div:compose:$divKitVersion")
}

Preparing the JSON

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

{
  "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.

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.

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:

<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. Its ComposeRendererFacade demonstrates configuration, creating a ComposeView with a DivContext, and passing data to DivView.

Learn more

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

DivKit Repository