Canvas Examples

Static Template Preview

// 1. Create a canvas instance
const canvasInstance = EditorSDK.canvas.create(element, {
    access_token: accessToken,
    template_uuid: templateUUID,
});

// 2. Fill layers by name using the REST API notation
canvasInstance.fillLayers({
    title: { text: "This is a custom title" },
    img: { image: "https://example.com/photo.jpg" },
});

Video Template Preview

// Set type: "animated" to render video templates with transitions
const canvasInstance = EditorSDK.canvas.create(element, {
    access_token: accessToken,
    template_uuid: templateUUID,
    type: "animated",
});

// fillLayers works the same as with static templates
canvasInstance.fillLayers({
    title: { text: "This is a custom title" },
});

Interactive Template

const canvasInstance = EditorSDK.canvas.create(element, {
    access_token: accessToken,
    template_uuid: templateUUID,
});

// Call fillLayers() on every keystroke for live preview
const input = document.getElementById("my-input");
input.addEventListener("keyup", () => {
    canvasInstance.fillLayers({
        title: { text: input.value },
    });
});

Dynamic Form

const canvasInstance = EditorSDK.canvas.create(element, {
    access_token: accessToken,
    template_uuid: templateUUID,
});

// getLayers() returns all dynamic layers with name and type
const layers = await canvasInstance.getLayers();

// Create text inputs for text layers
layers.filter(l => l.type === "text").forEach(layer => {
    const input = document.createElement("input");
    input.placeholder = layer.name;
    input.addEventListener("keyup", () => {
        canvasInstance.fillLayers({
            [layer.name]: { text: input.value },
        });
    });
    form.appendChild(input);
});

// Create file uploads for picture layers
// uploadMedia() uploads to temporary storage and returns a URL
layers.filter(l => l.type === "picture").forEach(layer => {
    const input = document.createElement("input");
    input.type = "file";
    input.accept = "image/*";
    input.addEventListener("change", async () => {
        const result = await canvasInstance.uploadMedia(input.files[0]);
        canvasInstance.fillLayers({
            [layer.name]: { image: result.url },
        });
    });
    form.appendChild(input);
});

Layer Picker

// Set mode: "select" to enable click-to-select on layers
const canvasInstance = EditorSDK.canvas.create(element, {
    access_token: accessToken,
    template_uuid: templateUUID,
    mode: "select",
});

// layer:hover fires on mouseenter, layer:hoverend on mouseleave
canvasInstance.on('layer:hover', (event) => {
    console.log('Hovering:', event.layerName, event.layerType);
});

// layer:select fires on click AND on programmatic selectLayer()/deselectAll()
canvasInstance.on('layer:select', (event) => {
    console.log('Selected:', event.layerName, event.layerType);
});

// Clear selection programmatically
canvasInstance.deselectAll();

Programmatic Highlight

// Highlight a single layer — others dim to 50% opacity
await canvasInstance.highlightLayer("title");

// Highlight multiple layers at once (replaces previous highlights)
await canvasInstance.highlightLayer(["title", "logo", "subtitle"]);

// Clear all highlights
await canvasInstance.unhighlightAll();