Skip to main content

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: 'circle', 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.