---
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/en/llms.txt

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

## Theme Configuration

DivKit Web SDK supports dynamic theme switching through the `themeVariableName` parameter. This allows you to control the appearance of components in real time.

{% note info %}

To use theme functionality, you need to specify the name of the variable that will control the themes. If the parameter is not passed, the theme functionality is disabled.

{% endnote %}

Example of theme configuration in Web SDK components:

```javascript
// Using themeVariableName in components
const config = {
  themeVariableName: 'theme', // Variable name for theme management
  // other configuration parameters
};
```

The theme variable allows you to dynamically change the visual design of DivKit components without reloading the page.

## 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](https://divkit.tech/docs/en/concepts/quick-start-android.md) or [iOS](https://divkit.tech/docs/en/concepts/quick-start-ios.md) on your device.
1. <!-- source: en/_includes/concepts/quick-start-android/id-quick-start-android/demo-android.md -->
   Select **demo**.
   <!-- endsource: en/_includes/concepts/quick-start-android/id-quick-start-android/demo-android.md -->

1. In DivKit Web Playground, click **Share**.
1. In the Android app, tap <!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> and scan the QR code or paste the address from the **Link to json** field.

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