Editing extensions

An editing extension adds image effects and filters to Canva. Users can access these effects via the Edit image panel and apply them to their images.
To create an editing extension from scratch, check out the Quick start guide.
Examples of editing extensions
These are some examples of apps with editing extensions:
​ColorMix - Apply quirky color combinations.
​Duotone - Apply a two-color palette to your images.
​Glitch - Apply glitch effects to your image.
You can find more examples at canva.com/apps.
Supported file types
An editing extension can apply effects to the following types of files:
Raster (JPG and PNG)
Vector (SVG)
You can configure the supported file types via the Developer Portal.
How users experience editing extensions
When a user selects an image in their design, an Effects button is available in the toolbar. If the user clicks this button, their installed editing extensions appear in the side panel.
What happens next depends on whether or not the extension supports presets.
With presets
When an editing extension supports presets, the presets appear as thumbnails in the Edit image panel. The user can select the preset to apply it to their image. If the preset is customizable, the user can select it again to tweak the settings of the preset.
For guidelines on offering users the best value with presets, see Provide users with presets.
Without presets
When an editing extension doesn't support presets, it's listed under the Tools heading. If the user opens the extension, it renders controls that let the user adjust the effect that's applied to their image.
How editing extensions work
At its most basic, an editing extension is a JavaScript file.
When a user opens an editing extension, Canva places an iframe on top of the user's image and embeds the JavaScript file in the iframe.
Canva also injects a JavaScript client into the iframe. This client lets the extension interact with the Canva editor and manipulate the user's image.
When the user finishes editing their image, the extension returns the manipulated image to Canva. Canva then uploads the new image to the user's account, closes the iframe, and updates the image on the page.
From the user's perspective, the addition and removal of the iframe is invisible.
Note
If an extension can't manipulate the user's image in the browser, such as when an effect relies on machine learning, it can use remote image processing to process the user's image on a server.
An extension must never compress, resize, or transform a user's image in an unsurprising way. For guidelines on producing a predictable output, see Generate an unsurprising output image.
Limitations
For the sake of security, editing extensions run inside an iframe. As a result, they don't have access to certain browser APIs, such as the Clipboard API.
Example
// 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);
});

CORS

Quick start

Last modified 2mo ago

Copy link

Outline

Examples of editing extensions

Supported file types

How users experience editing extensions

How editing extensions work

Note

Limitations

Example