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 Edit image 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. 1.
    Log in to the Developer Portal.
  2. 2.
    Navigate to Your integrations.
  3. 3.
    Click Create an app.
  4. 4.
    Enter a name for the app in the App name field.
  5. 5.
    Agree to the Canva Developer Terms.
  6. 6.
    Click Create app.

Step 2: Add an editing extension to the app

  1. 1.
    Select Editing.
  2. 2.
    For the Extension source option, select JavaScript file.
  3. 3.
    For the Input file types option, select JPG/PNG.
Canva automatically saves changes to apps. You’ll see a warning if you try to navigate away from the Developer Portal before your changes are saved.

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, copy the following code into a JavaScript file:
1
// Get helper methods for working with images
2
const { imageHelpers } = window.canva;
3
4
// Initialize the client
5
const canva = window.canva.init();
6
7
// The extension has loaded
8
canva.onReady(async (opts) => {
9
// Convert the CanvaElement into a CanvaImageBlob
10
const image = await imageHelpers.fromElement(opts.element, "preview");
11
12
// Convert the CanvaImageBlob into a HTMLCanvasElement
13
const canvas = await imageHelpers.toCanvas(image);
14
15
// Render the user's image in the iframe
16
document.body.appendChild(canvas);
17
18
// Get a 2D drawing context
19
const context = canvas.getContext("2d");
20
21
// Invert the colors of the user's image
22
context.filter = "invert(100%)";
23
24
// Draw the inverted image into the HTMLCanvasElement
25
context.drawImage(canvas, 0, 0, canvas.width, canvas.height);
26
27
// Render the control panel. (This is always required, even if
28
// the extension doesn't have rich controls.)
29
canva.updateControlPanel([]);
30
});
31
32
// Canva has requested the extension to update the user's image
33
canva.onImageUpdate(async (opts) => {
34
// Get the updated image
35
const img = await imageHelpers.toImageElement(opts.image);
36
37
// Get the HTMLCanvasElement that contains the user's image
38
const canvas = document.querySelector("canvas");
39
40
// Get a 2D drawing context
41
const context = canvas.getContext("2d");
42
43
// Draw the updated image into the HTMLCanvasElement
44
context.drawImage(img, 0, 0, canvas.width, canvas.height);
45
});
46
47
// Canva has requested the extension to save the user's image
48
canva.onSaveRequest(async () => {
49
// Get the HTMLCanvasElement that contains the user's image
50
const canvas = document.querySelector("canvas");
51
52
// Return the image to Canva as a CanvaImageBlob
53
return await imageHelpers.fromCanvas("image/jpeg", canvas);
54
});
Copied!
Then 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. To learn how to create the extension from scratch, see Image processing.
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. 1.
    Select Preview > Editing.
  2. 2.
    When the Canva editor opens, wait for the app to load.
  3. 3.
    Click Use.
You only have to click the Use button when using an app for the first time. On return visits, the app immediately loads.

Next steps

Last modified 5d ago