Extensions
The extension 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
The parameters, examples, and connection of each extension are described on its page.
|
ID |
Description |
Source code |
|
Zooms the element with a pinch gesture (Android and iOS only). |
||
|
Runs actions when the user swipes over the element. |
||
|
Displays the text of a text element with Markdown markup. |
||
|
Shows an animated placeholder while the image is loading (Android and iOS only). |
||
|
Adds an animated shine to the image in div-image (Android and iOS only). |
||
|
Writes the element width and height to variables. The preferred way to get the size is the layout_provider property. |
||
|
Controls text autocorrection in input elements (iOS only). |
||
|
Automatically crops images in div-image to the expected aspect ratio (iOS only). |
||
|
Fixes offscreen rendering issues in overlap containers (iOS only). |
||
|
Adds a blur effect to the element (iOS only). |
||
|
Adds the Liquid Glass effect to the element (iOS 26 and later only). |
||
|
Applies complex graphical effects to the content located under the element: blur, refraction, color adjustment, and rim highlight (Android only). |
Connection
Note
This section uses the Lottie extension as an example.
build.gradle
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.divkit}"
}
In the code:
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(imageLoader)
.actionHandler(actionHandler)
.extension(DivPinchToZoomExtensionHandler(pinchToZoomConfiguration))
.extension(DivLottieExtensionHandler(rawResProvider))
.build()
val divContext = Div2Context(baseContext = this, configuration = divConfiguration)
divView = Div2View(divContext)
Extension handlers must comply with the DivExtensionHandler protocol.
To connect the handler, pass it to DivKitComponents:
DivKitComponents(
...
extensionHandlers: [
PinchToZoomExtensionHandler(overlayView: rootView),
SomeExtensionHandler()
]
)
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.
Extensions for all components
In the Web client, you can apply extensions to all components in the Div tree automatically, without declaring them in the JSON schema for each element. To do this, pass the extensionsForAllComponents array to the render function.
render({
target,
id: 'card',
json,
extensionsForAllComponents: [
HoverNotifier, // Just an extension class
{ Extension: HoverNotifier, params: { label: 'debug' } } // With parameters
]
});
Each array element can be:
- An extension class.
- A registration object
{ Extension, params?, id? }, where:Extensionis the extension class.paramsare parameters passed to the extension constructor. If omitted, an empty object{}is passed.idis an identifier used for addressing viaextension_action.
Note
This option works on the client side only. DivKit does not evaluate JSON expressions inside params.
Handling extension_action
To receive extension_action events, specify an id in the registration and implement the handleAction method in the extension. The action is resolved by extension_id (matching the registration id) and div_id (matching the component).
If a registration has no id, it receives lifecycle callbacks but cannot be addressed via actions.
When the ID matches an extension declared in the JSON, the JSON handlers run first, followed by the extensionsForAllComponents handlers in registration order. Handling stops if a handler returns true.
Disabling an extension
To disable an extension without removing it from the markup, set the is_enabled property of the extension object to false. The property is specified at the same level as id and params, supports expressions, and defaults to true. While the value is false, the extension isn't applied to the element.
Example
{
"type": "gif",
"gif_url": "https://example.com/animation.gif",
"extensions": [
{
"id": "lottie",
"is_enabled": "@{lottie_enabled}",
"params": {
"lottie_url": "https://assets9.lottiefiles.com/packages/lf20_edpg3c3s.json",
"repeat_count": -1
}
}
]
}
While the lottie_enabled variable is false, the element shows the GIF image from gif_url.
Sections moved to separate pages
The descriptions of these extensions have moved to separate pages. For the full list of extensions, see the table above.
Lottie in an animated gif image
The lottie extension shows a Lottie animation in the gif-image element. For the parameters and examples, see Lottie animations.
Controlling Lottie with actions
The extension_action action with the start or stop command starts or stops the animation. For more information, see Controlling Lottie with actions.
Input autocorrection control
The input_autocorrection extension enables and disables text autocorrection in input elements on iOS. For more information, see Input autocorrection control.
Automatic image aspect ratio correction
The aspect_correction extension crops images in div-image to the expected aspect ratio on iOS. For more information, see Automatic image aspect ratio correction.
Rasterization for fixing offscreen rendering
The rasterize extension fixes offscreen rendering issues in overlap containers on iOS. For more information, see Rasterization for fixing offscreen rendering.
Blur effect
The blur extension adds a blur effect to the element on iOS. For more information, see Blur effect.
Liquid Glass effect
The liquid_glass extension adds the Liquid Glass effect to the element on iOS 26 and later. For more information, see Liquid Glass effect.
Backdrop effects
The backdrop_effect extension applies blur, refraction, color adjustment, and rim highlight to the content located under the element on Android. For more information, see Backdrop effects.
Learn more
You can discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_en.