Skip to main content

Design API

kittl.design gives you access to editor design operations. In extensions, 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 text = 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',
  },
});

await kittl.state.setSelectedObjectsIds([text.id]);

Example: artboard + shape workflow​

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

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

Notes​

  • Use object IDs returned by SDK methods to chain operations safely.
  • Prefer feature-specific namespaces (text, shape, board) over generic object methods when possible.