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

To test your code and view HTML card previews, use DivKit Web 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.
  2. To use ready-made samples, click Samples and select an item from the library. You can edit and refine the samples.
  3. 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.
  4. To open the card structure, click Structure in the lower right corner.

View the result on your device

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 or iOS on your device.

  2. Select demo in the Android app or playground in the iOS app.

  3. In DivKit Web Playground, click Share.

  4. 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 button; in the iOS app, it is enabled in settings.

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 app.

  2. Select demo.

  3. 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 the link from the DivKit Web Playground editor.
    • Select the file in JSON format on the device.

    Tip

    To create a card code, you can use the DivKit Web Playground sample library.

  4. To view the result, click show the result.

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, compile and install the app on the device.

  2. Select playground.

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

    • Insert a link to the card prototype in the input field.
    • Open the link from the DivKit Web Playground editor or scan its QR code. The QR scanner is enabled in settings.

    Tip

    To create a card code, you can use the DivKit Web Playground sample library.

  4. To view the result, click load json.

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

  2. Download DivKit library files from repository

  3. Run Playground App:

    flutter run -t example/lib/main.dart

  4. Select demo.

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

      Tip

      To create a card code, you can use the DivKit Web Playground sample library.

    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 section.

Learn more

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

DivKit Repository

Previous
Typical structure
Next
Instructions