Adding Textures

Textures apply overlay effects or detailed backgrounds to artboards. You can add or manage background textures utilizing kittl.design.texture.

Setting a Texture on a Board

To render a texture across an artboard, specify the board ID along with a source texturing string (such as an asset URL or ID).

import type { TextureOptions } from '@kittl/sdk';

const textureResult = await kittl.design.texture.setTexture({
    boardId: 'my-main-board',
    texture: 'https://example.com/texture.png',
    options: {
        opacity: 0.5,
        mode: 'multiply' as TextureOptions['mode'] // Use blend modes for a realistic overlay
    }
});

if (textureResult.isOk) {
    console.log('Board textured.');
}

To remove or clear the texture layer, call kittl.design.texture.removeTexture({ boardId: 'my-main-board' }).

Updating and Releasing a Texture

kittl.design.texture.updateTexture() changes an existing texture's options:

await kittl.design.texture.updateTexture({
    boardId: 'my-main-board',
    options: { opacity: 0.75 },
});

Both boardId and options are required; the fields inside options are optional. See UpdateTextureParams.

kittl.design.texture.releaseTexture({ boardId }) returns the released image object in an SDK result. This differs from removeTexture(), which returns the updated board. See ReleaseTextureParams and the texture API signatures.