Quick start

Create an editing extension in under 15 minutes.

An editing extension adds image effects and filters to Canva. Users can access these effects via the Effects panel and apply them to their images. This quick start guide demonstrates how to create an editing extension that inverts the colors of the user's image.

Step 1: Create an app via the Developer Portal

  1. Log in to the Developer Portal.

  2. Navigate to Your integrations.

  3. Select Create app.

  4. Enter a name for the app in the App name field.

  5. Agree to the Canva Developer Terms.

  6. Select Create app.

Step 2: Add an editing extension to the app

  1. Select Editing.

  2. Select Input file types > JPG/PNG.

  3. Select Extension source > JavaScript file.

Step 3: Upload a JavaScript file

At its most basic, an editing extension is a JavaScript file that Canva runs inside an iframe. Canva passes the user's image (and other metadata) into the iframe and the extension is responsible for returning an image back to Canva.

For this quick start:

  1. Copy the following code into a JavaScript file:

    // Get helper methods for working with images
    const { imageHelpers } = window.canva;
    // Initialize the client
    const canva = window.canva.init();
    // The extension has loaded
    canva.onReady(async (opts) => {
    // Convert the user's image into a HTMLCanvasElement
    const canvas = await imageHelpers.toCanvas(opts.image);
    // Get a 2D drawing context
    const context = canvas.getContext('2d');
    // Invert the colors of the user's image
    context.filter = 'invert(100%)';
    // Render the user's image in the iframe
    document.body.appendChild(canvas);
    // Render the control panel (this is required even if the
    // extension doesn't have rich controls)
    canva.updateControlPanel([]);
    });
    // Canva has requested the extension to update the user's image
    canva.onImageUpdate(async (opts) => {
    // Get the updated image
    const img = await imageHelpers.toImageElement(opts.image);
    // Get the HTMLCanvasElement that contains the user's image
    const canvas = document.querySelector('canvas');
    // Get a 2D drawing context
    const context = canvas.getContext('2d');
    // Draw the updated image into the HTMLCanvasElement
    context.drawImage(img, 0, 0, canvas.width, canvas.height);
    });
    // Canva has requested the extension to save the user's image
    canva.onSaveRequest(async () => {
    // Get the HTMLCanvasElement that contains the user's image
    const canvas = document.querySelector('canvas');
    // Return the image to Canva
    return await imageHelpers.fromCanvas('image/jpeg', canvas);
    });
  2. Upload the file to the extension's JavaScript file field.

This code creates an editing extension that inverts the colors of the user's image. The comments explain the basic lifecycle of the extension, but to understand how the extension works, refer to Process the user's image.

You don't have to repeatedly upload a JavaScript file to the Developer Portal while developing an editing extension. You can set up a Development URL to streamline the workflow.

Step 4: Preview the extension

  1. Select Preview > Editing.

  2. When the Canva editor opens, wait for the app to load.

  3. Select Connect.

You only have to connect (install) an app when using it for the first time. On return visits, the app immediately loads.

Next steps