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

# Customization

The [extension](https://divkit.tech/docs/en/concepts/divs/2/div-extension.md) element is a data block that is used to change the behavior and display of elements. You can add an extension to any element.

Additional logic is described in the extension handler `DivExtensionHandler`.

## Available extensions {#ready}

#|
||
**ID**
|
**Description**
|
**Source code**
||

||
`pinch-to-zoom`

|
Increases the element.
|
[Android](https://github.com/divkit/divkit/tree/main/client/android/div-pinch-to-zoom)
[iOS](https://github.com/divkit/divkit/blob/main/client/ios/DivKitExtensions/ExtensionHandlers/PinchToZoomExtensionHandler.swift)

||

||
`lottie`
|
Connects [Lottie](https://lottiefiles.com/) animations to [gif-image](https://divkit.tech/docs/en/concepts/divs/2/div-gif-image.md).
|
[Android](https://github.com/divkit/divkit/tree/main/client/android/div-lottie)
[iOS](https://github.com/divkit/divkit/tree/main/client/ios/DivKitExtensions/Animations/Lottie)
[Web](https://github.com/divkit/divkit/blob/main/client/web/divkit/src/extensions/lottie.ts)
||

||
`input_autocorrection`
|
Controls text autocorrection in [input](https://divkit.tech/docs/en/concepts/divs/2/div-input.md) elements (iOS only).
|
[iOS](https://github.com/divkit/divkit/blob/main/client/ios/DivKitExtensions/ExtensionHandlers/InputAutocorrectionExtensionHandler.swift)
||

||
`aspect-correction`
|
Automatically crops images in [div-image](https://divkit.tech/docs/en/concepts/divs/2/div-image.md) to the expected aspect ratio (iOS only).
|
[iOS](https://github.com/divkit/divkit/blob/main/client/ios/DivKitExtensions/ExtensionHandlers/AspectCorrectionExtensionHandler.swift)
||

||
`rasterize`
|
Fixes offscreen rendering issues in overlap containers (iOS only).
|
[iOS](https://github.com/divkit/divkit/blob/main/client/ios/DivKitExtensions/ExtensionHandlers/RasterizeExtensionHandler.swift)
||

||
`blur`
|
Adds a blur effect to the element (iOS only).
|
[iOS](https://github.com/divkit/divkit/blob/main/client/ios/DivKitExtensions/ExtensionHandlers/BlurExtensionHandler.swift)
||
|#

## Connection {#connect}

{% note info %}

This section uses the [Lottie](https://lottiefiles.com/) extension as an example.

{% endnote %}


{% list tabs %}

- Android


  build.gradle

  ```cpp translate=no
  dependencies {
      implementation "com.yandex.div:div-pinch-to-zoom:${versions.divkit}"
      implementation "com.airbnb.android:lottie:${versions.lottie}"
      implementation "com.yandex.div:div-lottie:${versions.lottie}"
  }
  ```

  In the code:

  ```cpp translate=no
  val pinchToZoomConfiguration = DivPinchToZoomConfiguration.Builder(this)
      .host(window)
      .dimColor(0xFF808080.toInt())
      .build()
  val rawResProvider = object : DivLottieRawResProvider {
      override fun provideRes(url: String): Int? {
          if (url == "res://love") return R.raw.love_anim
          return null
      }
      override fun provideAssetFile(url: String): String? {
          if (url == "asset://banana") return "lottie/lottie_1.json"
          return null
      }
  }
  val divConfiguration = DivConfiguration.Builder(DefaultDivImageLoader(Container.imageManager))
      .experimentConfig(experimentConfig)
      .actionHandler(actionHandler)
      .divLogger(logger)
      .extension(DivPinchToZoomExtensionHandler(pinchToZoomConfiguration))
      .extension(DivLottieExtensionHandler(rawResProvider))
      .build()
  val divContext = DivContext(baseContext = this, configuration = divConfiguration)
  divView = DivView(divContext)
  ```


- iOS


  Extension handlers must comply with the `DivExtensionHandler` protocol.

  To connect the handler, pass it to `DivBlockModelingContext`:

  ```cpp translate=no
  DivBlockModelingContext(
    ...
    extensionHandlers: [
      PinchToZoomExtensionHandler(overlayView: rootView),
      SomeExtensionHandler()
    ]
  )
  ```

- Web

  ```js translate=no
  import { lottieExtensionBuilder } from '@divkitframework/divkit/client';
  import Lottie from 'lottie-web/build/player/lottie';

  const map = new Map();

  map.set('lottie', lottieExtensionBuilder(Lottie.loadAnimation));

  render({
      id: 'test',
      target: element,
      json: {},
      extensions: map
  });
  ```

  An example of a connected extension is available in the [repository](https://github.com/divkit/divkit/tree/main/client/web/divkit-examples/extensions-builtin).

{% endlist %}


### Lottie in an animated gif image {#lottie}

To connect the animation to a [gif image](https://divkit.tech/docs/en/concepts/divs/2/div-gif-image.md), fill in the `extensions` array:

```json translate=no
{
  "extensions": [
    {
      "id": "lottie",
      "params": {
        "lottie_url": "https://assets9.lottiefiles.com/packages/lf20_edpg3c3s.json",
        "repeat_count": 3,
        "repeat_mode": "restart"
      }
    }
  ]
}
```

{% note info %}

**repeat_count parameter behavior**

- `repeat_count: 0` — animation plays once
- `repeat_count: 1` — animation plays twice
- `repeat_count: N` — animation plays N+1 times
- `repeat_count: -1` — infinite looping

{% endnote %}

#|
||
**Parameters**
|
**Description**
||

||
`id`
|
Extension ID.
||

||
`lottie_url`
|
Required URL to Lottie JSON if the `lottie_json` parameter isn't specified. It can work according to the `asset:*{address}` or `res:*{address}` schemes for embedded resources. Resource binding in these schemes occurs via the `DivLottieRawResProvider` dependency that is passed to `DivLottieExtensionHandler`.

When using unsupported URL schemes (not http/https/file/res), animation preloading will be skipped with an error logged.
||

||
`lottie_json`
|
Required parameter if `lottie_url` isn't specified. Contains Lottie JSON.
||

||
`repeat_count`
|
The number of animation repetitions. Use the `-1` value for an infinite number of repetitions.
||

||
`repeat_mode`
|
The action after the animation ends. It can have the values:

- `restart`: Animation restarts.
- `reverse`: Animation is displayed frame-by-frame in reverse order.
||

||
`min_frame`
|
The minimum frame from which the animation starts. Used for complex cyclic playback scenarios.
||

||
`is_playing`
|
Controls automatic animation playback during initialization. If set to `false`, the animation won't start automatically. Default: `true`.
||
|#

### Input autocorrection control {#input_autocorrection}

To control text autocorrection in [input](https://divkit.tech/docs/en/concepts/divs/2/div-input.md) elements on iOS, use the `input_autocorrection` extension:

```json translate=no
{
  "extensions": [
    {
      "id": "input_autocorrection",
      "params": {
        "enabled": false
      }
    }
  ]
}
```

#|
||
**Parameters**
|
**Description**
||

||
`id`
|
Extension ID.
||

||
`enabled`
|
Controls whether autocorrection is enabled for the input field. Set to `false` to disable autocorrection.
||
|#

### Automatic image aspect ratio correction {#aspect-correction}

To automatically crop images in [div-image](https://divkit.tech/docs/en/concepts/divs/2/div-image.md) to the expected aspect ratio, use the `aspect-correction` extension (iOS only):

```json translate=no
{
  "extensions": [
    {
      "id": "aspect-correction",
      "params": {
        "aspect_tolerance": 0.001
      }
    }
  ]
}
```

#|
||
**Parameters**
|
**Description**
||

||
`id`
|
Extension ID.
||

||
`aspect_tolerance`
|
Aspect ratio deviation tolerance (optional). If the actual aspect ratio differs from the expected one by less than this value, cropping is not applied. Default: 0.001.
||
|#

**Features:**
- Images are cropped centrally when there is a significant deviation from the expected aspect ratio
- If the actual aspect ratio is less than expected - cropped by height
- If the actual aspect ratio is greater than expected - cropped by width
- Caching of processed images is supported for performance optimization

**Integration on iOS:**

```cpp translate=no
DivBlockModelingContext(
  ...
  extensionHandlers: [
    AspectCorrectionExtensionHandler(aspectTolerance: 0.001)
  ]
)
```

### Rasterization for fixing offscreen rendering {#rasterize}

To fix offscreen rendering issues in overlap containers, use the `rasterize` extension (iOS only):

```json translate=no
{
  "extensions": [
    {
      "id": "rasterize"
    }
  ]
}
```

#|
||
**Parameters**
|
**Description**
||

||
`id`
|
Extension ID.
||
|#

**Features:**
- Applies rasterization to blocks via `layer.shouldRasterize = true`
- Uses `UIScreen.main.scale` for optimal quality
- Solves offscreen rendering issues in overlap containers

**Integration on iOS:**

```cpp translate=no
DivBlockModelingContext(
  ...
  extensionHandlers: [
    RasterizeExtensionHandler()
  ]
)
```

### Blur effect {#blur}

To add a blur effect to an element, use the `blur` extension (iOS only):

```json translate=no
{
  "extensions": [
    {
      "id": "blur",
      "params": {
        "style": "regular"
      }
    }
  ]
}
```

#|
||
**Parameters**
|
**Description**
||

||
`id`
|
Extension ID.
||

||
`style`
|
Blur effect style. Available values:

- `extra_light` — extra light
- `regular` — regular
- `prominent` — prominent
- `system_ultra_thin_material` — ultra thin material
- `system_ultra_thin_material_light` — ultra thin material (light variant)
- `system_ultra_thin_material_dark` — ultra thin material (dark variant)
- `system_thin_material` — thin material
- `system_thin_material_light` — thin material (light variant)
- `system_thin_material_dark` — thin material (dark variant)
- `system_material` — material
- `system_material_light` — material (light variant)
- `system_material_dark` — material (dark variant)
- `system_thick_material` — thick material
- `system_thick_material_light` — thick material (light variant)
- `system_thick_material_dark` — thick material (dark variant)
- `system_chrome_material` — chrome material
- `system_chrome_material_light` — chrome material (light variant)
- `system_chrome_material_dark` — chrome material (dark variant)
||
|#

**Features:**
- Uses iOS system blur effects (UIBlurEffect)
- Supports both basic styles and material styles with variants for light and dark themes
- Applied to the entire element to which the extension is added

**Integration on iOS:**

```cpp translate=no
DivBlockModelingContext(
  ...
  extensionHandlers: [
    BlurExtensionHandler()
  ]
)
```

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