---
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/en/concepts/playground.md
    type: text/markdown
    title: Markdown version
  - href: https://divkit.tech/docs/en/llms.txt?revision=r22102947
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt?revision=r22102947

# Playground and demo apps

To test your card code and see a preview of the card, use DivKit Playground: an editor in the browser and apps for Android, iOS, and Flutter.

## Web {#web}

To test your code and view HTML card previews, use [DivKit Web Playground](https://divkit.tech/playground). DivKit Web Playground has a library with samples of various elements: you can edit the code of any sample and display the result in the browser or on the screen of a mobile device.


To create an HTML card preview:

1. On the left side of the page, add the card prototype code in JSON or TypeScript format.
1. To use ready-made samples, click **Samples** and select an item from the library. You can edit and refine the samples.
1. On the right side of the page, select the resolution and type of screen for which the card prototype will be displayed. If there are errors in the code, they will be displayed in the **Errors** section under the card preview.
1. To open the card [structure](https://divkit.tech/docs/en/concepts/structure.md), click **Structure** in the lower right corner.

### View the result on your device {#web-android}

To view the result of a JSON change in an Android or iOS app, link the editor to it:

1. Install the DivKit Playground app for [Android](#android) or [iOS](#ios) on your device.
1. Select **demo** in the Android app or **playground** in the iOS app.

1. In DivKit Web Playground, click **Share**.
1. Scan the QR code in the app or paste the address from the **Link to json** field. In the Android app, the scanner is opened with the ![](../_images/demo/qr.svg) button; in the iOS app, it is enabled in **settings**.

## Android {#android}

To test your code and see a preview of the card on an Android device, use the DivKit Playground app. You can add the card code in JSON format to the app or open a link to it:

1. Install the [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) app.
1. Select **demo**.

1. Add a card using one of the following methods:

    - Insert the code in JSON format or a link to the card prototype in the input field.
    - [Open](#web-android) the link from the DivKit Web Playground editor.
    - Select the file in JSON format on the device.

    {% note tip "Tip" %}

    To create a card code, you can use the [DivKit Web Playground sample library](https://divkit.tech/playground?samples=1).

    {% endnote %}

1. To view the result, click **show the result**.


## iOS {#ios}

To test your code and see a preview of the card on an iOS device, use the DivKit Playground app. The app opens a card by a link to its description in JSON format:

1. Download the DivKit Playground source files from the [repository](https://github.com/divkit/divkit/tree/main/client/ios/DivKitPlayground), compile and install the app on the device.
1. Select **playground**.

1. Add a card using one of the following methods:
    - Insert a link to the card prototype in the input field.
    - [Open](#web-android) the link from the DivKit Web Playground editor or scan its QR code. The QR scanner is enabled in **settings**.

    {% note tip "Tip" %}

    To create a card code, you can use the [DivKit Web Playground sample library](https://divkit.tech/playground?samples=1).

    {% endnote %}

1. To view the result, click **load json**.

## Flutter {#flutter}

To test your code and see a preview of the card on an Android or iOS device, use the DivKit Playground app. You can add the card code in JSON format to the app or open a link to it:

1. [Install Flutter](https://docs.flutter.dev/get-started/install)
2. Download DivKit library files from [repository](https://github.com/divkit/divkit/tree/main/client/flutter/divkit)
3. Run [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. Select **demo**.

   1. Insert the code in JSON format in the input field

       {% note tip "Tip" %}

       To create a card code, you can use the [DivKit Web Playground sample library](https://divkit.tech/playground?samples=1).

       {% endnote %}

   2. To view the result, click **show the result**.
5. Select **samples** to find out DivKit abilities with Flutter client.

Connecting DivKit to your own Flutter project is described in the [Flutter](https://divkit.tech/docs/en/quickstart/flutter.md) section.

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