Skip to main content

What is the SDK?

The Kittl SDK is the bridge between your sandboxed extension and the editor host. It exposes async APIs through:

  • kittl.design for design operations
  • kittl.state for editor/app state
  • kittl.auth for OAuth helper flows

Add the SDK to your extension​

You can load the SDK in two ways.

pnpm add @kittl/sdk
import { kittl } from '@kittl/sdk';

Option 2: Script tag​

<script src="https://static.kittl.com/sdk/staging/v1/sdk.js"></script>

Use window.kittl in this mode:

const { kittl } = window;

Wait for readiness​

Call SDK APIs only after the bridge is ready:

import { kittl } from '@kittl/sdk';

kittl.onReady(async () => {
  const selectedIds = await kittl.state.getSelectedObjectsIds();
  console.log('Selected object IDs:', selectedIds);
});

Minimal example​

import { kittl } from '@kittl/sdk';

kittl.onReady(async () => {
  const text = await kittl.design.text.addText({
    text: 'Hello from my extension',
    position: { absolute: { left: 120, top: 120 } },
    size: { width: 320, height: 80 },
  });

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

Notes​

  • The SDK is designed for sandboxed extension frames.
  • Every API call is async in extension context.