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

# Playground и демо-приложения

Чтобы протестировать код карточки и посмотреть ее превью, используйте DivKit Playground: редактор в браузере и приложения для Android, iOS и Flutter.

## Web {#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**.

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

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

1. Установите приложение DivKit Playground для [Android](#android) или [iOS](#ios) на ваше устройство.
1. Выберите **demo** в приложении для Android или **playground** в приложении для iOS.

1. В DivKit Web Playground нажмите кнопку **Share**.
1. Отсканируйте в приложении QR-код либо вставьте адрес из поля **Link to json**. В приложении для Android сканер открывается кнопкой ![](../_images/demo/qr.svg), в приложении для iOS он включается в разделе **settings**.

## Android {#android}

Чтобы протестировать ваш код и посмотреть превью карточки на устройстве Android, используйте приложение DivKit Playground. Вы можете добавить в приложение код карточки в формате JSON или открыть ссылку на него:

1. Установите приложение [DivKit Playground](https://play.google.com/store/apps/details?id=com.yandex.divkit.demo&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1).
1. Выберите **demo**.

1. Добавьте карточку одним из способов:

    - вставьте код в формате JSON или ссылку на прототип карточки в поле ввода;
    - [откройте](#web-android) ссылку из редактора DivKit Web Playground;
    - выберите файл в формате JSON на устройстве.

    {% note tip "Совет" %}

    Для создания кода карточки вы можете использовать [библиотеку примеров DivKit Web Playground](https://divkit.tech/playground?samples=1).

    {% endnote %}

1. Чтобы посмотреть результат, нажмите кнопку **show the result**.


## iOS {#ios}

Чтобы протестировать ваш код и посмотреть превью карточки на устройстве iOS, используйте приложение DivKit Playground. Приложение открывает карточку по ссылке на ее описание в формате JSON:

1. Скачайте исходные файлы DivKit Playground из [репозитория](https://github.com/divkit/divkit/tree/main/client/ios/DivKitPlayground), скомпилируйте и установите приложение на устройство.
1. Выберите **playground**.

1. Добавьте карточку одним из способов:

    - вставьте ссылку на прототип карточки в поле ввода;
    - [откройте](#web-android) ссылку из редактора DivKit Web Playground или отсканируйте ее QR-код. Сканер QR-кодов включается в разделе **settings**.

    {% note tip "Совет" %}

    Для создания кода карточки вы можете использовать [библиотеку примеров DivKit Web Playground](https://divkit.tech/playground?samples=1).

    {% endnote %}

1. Чтобы посмотреть результат, нажмите кнопку **load json**.

## Flutter {#flutter}

Чтобы протестировать ваш код и посмотреть превью карточки на устройстве Android или iOS, используйте приложение DivKit Playground. Вы можете добавить в приложение код карточки в формате JSON или открыть ссылку на него:

1. [Установите Flutter](https://docs.flutter.dev/get-started/install)
2. Скачайте исходные файлы DivKit из [репозитория](https://github.com/divkit/divkit/tree/main/client/flutter/divkit)
3. Запустите [Playground App](https://github.com/divkit/divkit/blob/main/client/flutter/divkit/example/lib/main.dart):
    ```bash translate=no
    flutter run -t example/lib/main.dart
    ```
4. Выберите **demo**.

   1. Добавьте JSON-код верстки, вставив его из буфера обмена в поле ввода

       {% note tip "Совет" %}

       Для создания кода карточки вы можете использовать [библиотеку примеров DivKit Web Playground](https://divkit.tech/playground?samples=1).

       {% endnote %}

   2. Чтобы посмотреть результат, нажмите кнопку **show the result**.
5. Выберите **samples**, чтобы посмотреть возможности клиента DivKit на Flutter.

Подключение DivKit в собственный Flutter-проект описано в разделе [Flutter](https://divkit.tech/docs/ru/quickstart/flutter.md).

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