Skip to main content

Quickstart

Extensions Quick Start​

Build your first Kittl extension in about 2 minutes.

What is a Kittl extension?​

Kittl extensions let developers expand Kittl's core editor functionality.

Extensions are small apps users install through the extension discovery panel in the editor. They can use the Kittl SDK to interact with the editor and perform actions like updating design content or uploading images on a user's behalf.

Examples of what you can build with Kittl extensions:

  • Connectors to third-party systems like Google, Dropbox, and Shopify
  • Editor workflow automations
  • Custom AI image generation features

Creating an extension via the developer portal​

Coming soon.

Developing your extension​

Kittl extensions are built with HTML and JavaScript. You can use any technology stack you prefer, as long as the final output aligns with the following structure.

manifest.json
output/index.html
output/icon.svg
output/your-extension-script-1.js
output/your-extension-script-2.js

The output directory can include any scripts or images needed by your HTML file.

note

There is a 5 MB limit on your final bundled extension. Large assets (for example, high-resolution images) should be loaded from a CDN.

Manifest file​

The manifest file contains metadata for your extension. This is where you provide details about the extension and its developer, including the extension name shown in the editor's extension discovery panel.

Manifest files are required.

{
  "version": 1,
  "author": "your name",
  "description": "Demo Extension",
  "icon": "logo.svg",
  "name": "Demo Extension",
  "verifiedDeveloper": true
}

Index HTML​

Your index.html file is what loads in the extension sandbox. You can build a functional Kittl extension with only this file.

<!doctype html>
<html lang="en">
  <body>
    My Kittl extension
  </body>
</html>

Using the Kittl SDK​

To interact with Kittl functionality, load the Kittl SDK. With this client-side JavaScript SDK, you can interact with design content, upload images, and connect to third-party OAuth-supported services.

For a deeper dive into SDK capabilities, see the explainer and reference docs.

<!doctype html>
<html lang="en">
  <head>
    <script src="https://kittl.com/v1/sdk.js"></script>
  </head>
  <body>
    My Kittl extension
    <script src="./script.js"></script>
  </body>
</html>

The SDK script provides access to the global window.kittl variable. You can then use the Design API to interact with editor content.

The optional script.js file is a good place to keep your extension logic. The createPredefinedShape method adds a shape to the canvas.

window.kittl.onReady(() => {
  window.kittl.design.shape.createPredefinedShape({
    shapeType: "ellipse",
    position: {
      absolute: {
        left: 100,
        top: 100
      }
    }
  });
});

Extensions that need a backend​

Kittl extensions follow a bring-your-own-backend model. You are free to build and deploy your backend however you prefer.

The extension sandbox includes restrictions on remote requests. See the backend and networking docs for details.

Auth​

The SDK supports integration with popular OAuth-backed services, including Dropbox, Google, and Shopify. Providers you want to connect can be configured in your manifest file.

The OAuth setup guide is the best place to learn more.

Previewing and testing​

Coming soon.

Distributing your extensions​

Coming soon.