Skip to main content

Mockup Board API

The kittl.design.mockupboard API lets you create and manage mockup boards. A mockup board is a connected artboard that warps linked board content through a mockup template — useful for previewing designs on product mockups.

Adding a Mockup Board​

Use addMockupBoard to create a new mockup board linked to one or more source boards. You can optionally include initial design objects that are created atomically with the board.

const mockupBoard = await kittl.design.mockupboard.addMockupBoard({
    inputBoardIds: ['source-board-id'],
    mockupTemplateId: 42,
    position: {
        absolute: { left: 600, top: 0 },
    },
    size: { width: 800, height: 600 },
});

console.log('Mockup board created:', mockupBoard);

See Mockup Board API Reference for full parameter details.

Adding a Mockup Design Object​

Use addMockupDesignObject to add a warped view of a source board's content to an existing mockup board.

const designObject = await kittl.design.mockupboard.addMockupDesignObject({
    mockupBoardId: 'mockup-board-id',
    inputBoardId: 'source-board-id',
    mockupTemplateId: 42,
    initialNormalizedUnwarpedRect: {
        left: 0.1,
        top: 0.1,
        width: 0.8,
        height: 0.8,
    },
});

console.log('Design object added:', designObject);

See Mockup Board API Reference for full parameter details.

Updating a Mockup Board​

Use updateMockupBoard to modify an existing mockup board's template, size, or color-matching behavior.

await kittl.design.mockupboard.updateMockupBoard({
    mockupBoardId: 'mockup-board-id',
    mockupTemplateId: 55,
    size: { width: 1024, height: 768 },
    shouldMockupColorMatchArtboard: false,
});

See Mockup Board API Reference for full parameter details.