Generic Object Operations

Often you need to make changes that apply generally to any object regardless of whether it's a shape, text, or image. The kittl.design.object API handles operations that are universally applicable.

Getting Objects

You can retrieve the normalized state of any object if you have its ID.

const getResult = await kittl.design.object.getObject({
    id: 'my-object-id'
});

if (getResult.isOk) {
    console.log('Object details:', getResult.result);
}

Modifying Generic Properties

You can hide, lock, rename, or rotate elements uniformly.

// Lock an object so users can't modify it with the mouse
await kittl.design.object.setLockedState({
    id: 'background-shape-id',
    locked: true
});

// Hide an object visually from the board
await kittl.design.object.setHiddenState({
    id: 'secret-layer',
    hidden: true
});

// Programmatically rotate an object 45 degrees
await kittl.design.object.rotateObject({
    id: 'my-icon',
    angle: 45
});

Removing Objects

If an element needs to be deleted from the artboard entirely:

const removeResult = await kittl.design.object.removeObject({
    id: 'obsolete-object-id'
});

if (removeResult.isOk) {
    console.log('Object removed from the canvas.');
}

Filtering Objects

Use getAllByFilter to query all design objects matching a predicate. You can use a type predicate to narrow the return type.

// Get all objects of a specific type
const imagesResult = await kittl.design.object.getAllByFilter(
    (obj) => obj.type === 'IllustrationImage'
);

if (imagesResult.isOk) {
    console.log(`Found ${imagesResult.result.length} images`);
}

Renaming Layers

Use rename to change the display name of any layer — boards, groups, or objects. This only affects the name shown in the layers panel.

const renameResult = await kittl.design.object.rename({
    objectId: 'text-element-id',
    newName: 'Main Title',
});

if (renameResult.isOk) {
    console.log('Layer renamed successfully.');
}