---
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/ru/quickstart/compose.md
    type: text/markdown
    title: Markdown version
  - href: https://divkit.tech/docs/ru/llms.txt
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt

# Инструкция для Jetpack Compose

Модуль `compose` отрисовывает JSON-вёрстку DivKit с помощью Jetpack Compose. В этой инструкции вы подключите библиотеку и выведете карточку с текстом «Hello, DivKit!».

## Подключение библиотеки

Используйте Android-приложение с настроенным Jetpack Compose.

Добавьте в `build.gradle.kts` приложения зависимость ниже. Вместо `<divkit-version>` укажите нужную версию DivKit. Доступные версии Compose-рендерера перечислены в [Maven Central](https://central.sonatype.com/artifact/com.yandex.div/compose).

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

## Подготовка JSON

Создайте файл `src/main/assets/hello_divkit.json` в модуле приложения:

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

Объект `card` описывает карточку. Если вёрстка использует шаблоны, добавьте рядом с ним объект `templates`. Шаблоны нужно разобрать до создания `DivData`.

## Минимальная конфигурация и отрисовка

Для вывода карточки нужны три объекта:

- `DivData` — разобранная JSON-вёрстка.
- `DivConfiguration`, созданная через `divConfiguration {}` — настройки рендерера. Для текстовой карточки достаточно настроек по умолчанию.
- `DivContext` — Android-контекст с конфигурацией DivKit. Передайте его в `LocalContext` для composable-функции `DivView`.

Замените содержимое `MainActivity.kt` следующим кодом, сохранив строку `package` своего приложения. Пример использует файл `hello_divkit.json`, созданный на предыдущем шаге.

```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"))
}
```

Запустите приложение: на экране появится текст «Hello, DivKit!».

В примере JSON разбирается, а конфигурация и `DivContext` создаются один раз в `Activity.onCreate`, до вызова `setContent`. `DivView` использует готовые данные при рекомпозициях и получает `DivContext` через `CompositionLocalProvider`.

Для больших карточек перенесите чтение и разбор JSON в фоновый поток и передайте готовый `DivData` в `DivView` через состояние Compose. Не разбирайте неизменившийся JSON при каждой рекомпозиции.

{% note info %}

Используйте классы из пакета `com.yandex.div.compose`. `DivView` ожидает именно `DivContext` в `LocalContext`; обычный контекст Activity приведёт к ошибке приведения типа. Если вы размещаете Compose в иерархии Android View, тот же контекст можно передать в `ComposeView(divContext)` перед вызовом `setContent { DivView(data = data) }`.

{% endnote %}

## Изображения и дополнительная настройка

Compose-рендерер создаёт загрузчик изображений Coil самостоятельно. Для загрузки ресурсов из сети добавьте разрешение внутрь `<manifest>` в `AndroidManifest.xml`:

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

Дополнительные возможности подключаются в блоке `divConfiguration {}`: `actionHandler` обрабатывает действия приложения, `fontSourceProvider` предоставляет шрифты, `customViewFactories` — пользовательские компоненты, а `extensionHandlers` — расширения. Для воспроизведения видео настройте `playerFactory`, для загрузки патчей — `patchDownloader`.

## Пример интеграции

Рабочую интеграцию Compose-рендерера можно посмотреть в [демоприложении DivKit](https://github.com/divkit/divkit/tree/main/client/android/divkit-demo-app). Класс [ComposeRendererFacade](https://github.com/divkit/divkit/blob/main/client/android/divkit-demo-app/src/main/java/com/yandex/divkit/demo/div/ComposeRendererFacade.kt) показывает конфигурацию, создание `ComposeView` с `DivContext` и передачу данных в `DivView`.

<!-- source: ru/_includes/index/troubleshooting.md -->
## Узнать больше {#troubleshooting}

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru).



[Репозиторий DivKit](https://github.com/divkit/divkit)




<!-- endsource: ru/_includes/index/troubleshooting.md -->