Design API

kittl.design gives you access to editor design operations. In the app sandbox, all calls are async.

API groups

The design namespace is organized by capability:

• board - create and update artboards
• text - add and update text objects
• shape - create/update predefined or basic shapes
• image / illustration / video / videoboard - media object workflows
• object - generic object utilities (remove, lock, hide, rotate, rename, get)
• layers / group - stacking and grouping operations
• canvas - previews and exports
• config / state / texture / guide / loadingCard - specialized editor state APIs

Example: create and select text

const addResult = await kittl.design.text.addText({
  text: 'Launch campaign',
  position: { absolute: { left: 140, top: 120 } },
  size: { width: 360, height: 80 },
  textProperties: {
    fontSize: 48,
    fill: '#111111',
    textAlign: 'left',
  },
});

if (addResult.isOk) {
  await kittl.state.setSelectedObjectsIds([addResult.result.id]);
}

Example: artboard + shape workflow

const boardResult = await kittl.design.board.createStandardBoard({
  title: 'Social post',
  position: { absolute: { left: 100, top: 100 } },
  size: { width: 1080, height: 1080 },
});

if (boardResult.isOk) {
  const board = boardResult.result;
  await kittl.design.shape.createPredefinedShape({
    shapeType: 'rectangle',
    position: { relative: { to: board.id, location: 'center' } },
    size: { width: 920, height: 920, applyViewportScale: false },
    objectProperties: { fillColor: '#f4f4f4' },
  });
}

Batch Updates

You can group multiple design operations into a single atomic batch using kittl.createBatch(). The returned batch object exposes the same API surface as kittl.design, plus a commit() method to apply all queued changes at once.

const batch = await kittl.createBatch();
await batch.shape.createPredefinedShape({ shapeType: 'ellipse', position: { absolute: { left: 100, top: 100 } }, size: { width: 200, height: 200 } });
await batch.text.addText({ text: 'Hello', position: { absolute: { left: 350, top: 100 } }, size: { width: 300, height: 60 } });
await batch.commit(); // all changes applied atomically

A batch is single-use — calling commit() again throws an error. See the Batch Design Updates guide for details.

Notes

• All design API methods return SdkResult; check isOk and use result before accessing values.
• Use object IDs returned by SDK methods to chain operations safely.
• Prefer feature-specific namespaces (text, shape, board) over generic object methods when possible.

Applying Design State

kittl.design.state.implementSubState(params) applies a partial design state. The input is Partial<NormalizedDesignState> and the SDK result contains the applied partial state. See NormalizedDesignState and the StateAPI declaration.

Reading Design State

kittl.design.state.getState() reads the full normalized design state in an SDK result. It was added in SDK 0.0.2. The state includes objects, boards, group structures, ordering indices, and design configuration; see NormalizedDesignState.