Skip to main content

Data API

The kittl.data API lets extensions browse Kittl catalog data and manage custom fonts.

Use kittl.data.mockups to search and browse the mockup catalog, and use kittl.data.fonts to list, create, update, and delete custom font families.

See the Data API Reference for full parameter and return type details.

Scopes​

Declare only the scopes your extension needs:

{
  "config": {
    "scopes": [
      "data:mockups:read",
      "fonts:read",
      "fonts:write"
    ]
  }
}

data:mockups:read is required for all kittl.data.mockups.* methods.

For fonts, fonts:read and fonts:write apply to fonts created by the extension. Use fonts:read:global or fonts:write:global only when the extension needs access to all custom fonts available to the user.

Search Mockups​

Use search with a text query and optional pagination settings.

const result = await kittl.data.mockups.search('t-shirt', {
    take: 20,
});

if (result.isOk) {
    console.log('Mockups:', result.result.items);
}

Browse Mockup Groups​

Use getOverview to fetch mockup group summaries, then getGroup to fetch paginated mockups inside a group.

const overview = await kittl.data.mockups.getOverview();

if (overview.isOk) {
    console.log('Groups:', overview.result.overview);
}

const group = await kittl.data.mockups.getGroup('apparel', {
    take: 20,
});

if (group.isOk) {
    console.log('Group:', group.result.group);
    console.log('Mockups:', group.result.data.items);
}

List Fonts​

Use listExtensionFonts for fonts created by the extension. Use listUserFonts only when your manifest includes fonts:read:global.

const extensionFonts = await kittl.data.fonts.listExtensionFonts({
    take: 20,
});

if (extensionFonts.isOk) {
    console.log('Extension fonts:', extensionFonts.result.items);
}

Create a Font Family​

Use create to upload one or more font files as a family. Each entry in styles matches the file at the same array index.

const font = await kittl.data.fonts.create({
    name: 'My Custom Font',
    files: [regularBlob, boldBlob],
    styles: ['Regular', 'Bold'],
    previewImage,
});

if (font.isOk) {
    console.log('Created font:', font.result.name);
}

Manage Font Families​

Use update to rename a family and addStyle, updateStyle, or deleteStyle to manage its styles. Each entry in styles matches the font file at the same array index.

await kittl.data.fonts.update({
    id: fontFamilyId,
    name: 'Updated Font Name',
});

await kittl.data.fonts.addStyle({
    fontFamilyId,
    files: [italicBlob],
    styles: ['Italic'],
});

await kittl.data.fonts.updateStyle({
    fontFamilyId,
    id: fontStyleId,
    style: 'Bold Italic',
});

await kittl.data.fonts.deleteStyle({
    fontFamilyId,
    id: fontStyleId,
});

Delete Font Families​

Use delete when a font family should no longer be available for new font elements. Use destroy when the font family must be removed from all font elements across all designs in the workspace.

await kittl.data.fonts.delete([fontFamilyId]);

await kittl.data.fonts.destroy([fontFamilyId]);

Result Handling​

All data methods return SDK result objects. Check isOk before reading result.

List and search APIs return paginated data with items, hasMore, and optionally total.