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

# Web

Чтобы протестировать ваш код и посмотреть HTML-превью карточек, используйте [DivKit Web Playground](https://divkit.tech/playground). В DivKit Web Playground доступна библиотека с примерами различных элементов: вы можете отредактировать код любого примера и отобразить результат в браузере или экране мобильного устройства.


Чтобы создать HTML-превью карточки:

1. В левой части страницы добавьте код прототипа карточки в формате JSON или TypeScript.
1. Чтобы использовать готовые примеры, нажмите кнопку **Samples** и выберите элемент из библиотеки. Примеры можно редактировать и дорабатывать.
1. В правой части страницы выберите разрешение и тип экрана, для которого отобразится прототип карточки. Если в коде есть ошибки, они отобразятся в разделе **Errors** под превью карточки.
1. Чтобы открыть [структуру](https://divkit.tech/docs/ru/concepts/structure.md) карточки, в правом нижнем углу нажмите кнопку **Structure**.

## Настройка тематизации

DivKit Web SDK поддерживает динамическое переключение тем через параметр `themeVariableName`. Это позволяет управлять внешним видом компонентов в реальном времени.

{% note info %}

Для использования тематизации необходимо указать имя переменной, которая будет управлять темами. Если параметр не передан, функционал тематизации отключен

{% endnote %}

Пример настройки тематизации в компонентах Web SDK:

```javascript
// Использование themeVariableName в компонентах
const config = {
  themeVariableName: 'theme', // Имя переменной для управления темами
  // другие параметры конфигурации
};
```

Переменная темы позволяет динамически изменять визуальное оформление компонентов DivKit без перезагрузки страницы.

## Посмотреть результат на вашем устройстве {#web-android}

Чтобы смотреть результат изменения JSON в приложении для Android или iOS, свяжите с ним редактор:

1. Установите приложение DivKit Playground для [Android](https://divkit.tech/docs/ru/concepts/quick-start-android.md) или [iOS](https://divkit.tech/docs/ru/concepts/quick-start-ios.md) на ваше устройство.
1. <!-- source: ru/_includes/concepts/quick-start-android/id-quick-start-android/demo-android.md -->
   Выберите **demo**.
   <!-- endsource: ru/_includes/concepts/quick-start-android/id-quick-start-android/demo-android.md -->

1. В DivKit Web Playground нажмите кнопку **Share**.
1. В приложении для Android нажмите кнопку <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="15.000000pt" height="15.000000pt" viewBox="0 0 230.000000 230.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,230.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"><path d="M20 2000 l0 -280 110 0 110 0 2 168 3 167 170 5 170 5 0 105 0 105 -282 3 -283 2 0 -280z"/><path d="M1720 2170 l0 -110 170 0 170 0 0 -170 0 -170 110 0 110 0 0 280 0 280 -280 0 -280 0 0 -110z"/><path d="M375 1931 c-6 -6 -9 -141 -7 -340 l3 -331 334 0 334 0 3 331 c2 199 -1 334 -6 340 -13 12 -649 12 -661 0z m498 -161 c4 0 7 -79 7 -175 l0 -175 -175 0 -175 0 0 174 c0 107 4 176 10 178 7 2 253 1 333 -2z"/><path d="M1272 1931 c-9 -6 -12 -84 -10 -337 l3 -329 335 0 335 0 0 335 0 335 -325 2 c-179 1 -331 -2 -338 -6z m495 -165 c10 -4 13 -42 13 -160 0 -85 -3 -161 -6 -170 -5 -14 -31 -16 -180 -16 l-174 0 0 174 c0 107 4 176 10 178 15 5 322 -1 337 -6z"/><path d="M368 709 c-2 -181 0 -333 4 -337 4 -4 156 -5 338 -2 l331 5 -1 324 c0 178 -3 328 -6 332 -3 5 -153 9 -334 9 l-329 0 -3 -331z m512 -4 l0 -175 -175 0 -175 0 0 175 0 175 175 0 175 0 0 -175z"/><path d="M1265 1017 c-4 -13 -5 -48 -3 -78 l3 -54 75 0 75 0 3 78 3 77 -75 0 c-71 0 -76 -2 -81 -23z"/><path d="M1604 1026 c-3 -7 -4 -42 -2 -77 l3 -64 78 -3 77 -3 0 81 0 80 -75 0 c-54 0 -77 -4 -81 -14z"/><path d="M1430 790 l0 -80 80 0 80 0 0 80 0 80 -80 0 -80 0 0 -80z"/><path d="M1779 865 c0 -3 -1 -38 -1 -77 l-1 -73 79 0 79 0 3 78 3 77 -81 0 c-44 0 -80 -2 -81 -5z"/><path d="M1267 693 c-4 -3 -7 -39 -7 -80 l0 -73 80 0 80 0 0 80 0 80 -73 0 c-41 0 -77 -3 -80 -7z"/><path d="M1607 693 c-4 -3 -7 -39 -7 -80 l0 -73 78 0 c43 0 81 2 83 4 2 2 3 38 1 80 l-4 76 -72 0 c-40 0 -76 -3 -79 -7z"/><path d="M20 300 l0 -280 283 2 282 3 0 105 0 105 -170 5 -170 5 -3 168 -2 167 -110 0 -110 0 0 -280z"/><path d="M2060 410 l0 -170 -170 0 -170 0 0 -110 0 -110 280 0 280 0 0 280 0 280 -110 0 -110 0 0 -170z"/><path d="M1434 517 c-3 -8 -4 -45 -2 -82 l3 -68 75 0 75 0 3 81 3 82 -76 0 c-54 0 -77 -4 -81 -13z"/><path d="M1779 528 c-4 -12 -3 -158 1 -158 3 -1 39 -1 80 -2 l75 -2 0 80 0 79 -77 3 c-43 2 -78 2 -79 0z"/></g></svg> и отсканируйте QR-код, либо вставьте адрес из поля **Link to json**.

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