Adding Boards

Artboards serve as the primary drawing areas within a Kittl design. A project relies on at least one board to host elements like shapes, text, and images.

To programmatically generate a new artboard, use the kittl.design.board namespace.

Creating a Standard Board

You can create an empty board by defining its name (title), coordinates, and dimensions.

const boardResult = await designApi.board.createStandardBoard({
    title: 'Instagram Post',
    size: {
        width: 1080,
        height: 1080,
    },
    position: {
        absolute: {
            left: 0,
            top: 0,
        },
    },
});

if (boardResult.isOk) {
    console.log('Board created:', boardResult.result);
}

Cloning an Artboard

You can duplicate an existing artboard along with all its content (objects, groups, properties). The cloned elements get new IDs automatically.

const cloneResult = await kittl.design.board.cloneArtboard({
    boardId: 'existing-board-id',
    position: {
        absolute: {
            left: 1200,
            top: 0,
        },
    },
});

if (cloneResult.isOk) {
    console.log('Cloned board:', cloneResult.result);
}

Updating an Artboard

Use updateArtboard to modify properties of an existing artboard. Only the specified properties are changed — everything else is preserved.

// Update the title
await kittl.design.board.updateArtboard({
    id: 'board-id',
    title: 'Updated Title',
});

// Resize a board
await kittl.design.board.updateArtboard({
    id: 'board-id',
    artboard: {
        width: 1920,
        height: 1080,
    },
});

// Set a background image
await kittl.design.board.updateArtboard({
    id: 'board-id',
    backgroundImage: {
        objectName: 'my-background-image',
    },
});

See Board API Reference for full parameter details.