Skip to main content
Version: 0.0.9

Adding Smartboards

Smartboards are dynamic artboards that automatically layout and adjust their content based on internal rules. You can use the kittl.design.smartboard namespace to add and update them.

Adding a Smartboard​

To programmatically insert a new smartboard, you provide the position, sizing, and any layout-specific configuration.

const addResult = await kittl.design.smartboard.addSmartboard({
    position: {
        absolute: {
            left: 100,
            top: 100,
        }
    },
    size: {
        width: 500,
        height: 500,
    },
    // Configuration properties will vary based on layout requirements
    linkedBoardIds: ['board-id-123'] // Optional boards IDs of the boards you want to connect
});

if (addResult.isOk) {
    console.log('Smartboard created:', addResult.result);
}

Once added, Kittl manages the internal constraints and resizing of the board dynamically.

Updating a Smartboard​

kittl.design.smartboard.updateSmartboard() takes a required smartboardId and optional size, backgroundImage, and generationSettings:

await kittl.design.smartboard.updateSmartboard({
    smartboardId: 'smartboard-id',
    size: { width: 800, height: 600 },
});

See UpdateSmartboardParams for the input fields.

Updating the Background Image​

kittl.design.smartboard.updateBackgroundImage() was added in SDK 0.0.9. It takes a required smartboardId and optional objectName, generation, opacity, filters, globalCompositeOperation, and hidden fields:

await kittl.design.smartboard.updateBackgroundImage({
    smartboardId: 'smartboard-id',
    objectName: 'new-background-source',
    opacity: 0.8,
});

See UpdateSmartboardBackgroundImageParams.