Creating new projects using the full editor

This guide will demonstrate how to use the embedded full editor in your own application.

create()

The create method starts the full editor workflow with an empty canvas.

Copy
// Initialize the SDK first
const { editor } = await ccEverywhere.initialize(); 
editor.create(docConfig, appConfig, exportConfig, containerConfig); 
Copied to your clipboard
// Initialize the SDK first
const { editor } = await ccEverywhere.initialize(); 
editor.create(docConfig, appConfig, exportConfig, containerConfig); 

All the properties are optional.

createWithAsset()

Use createWithAsset() to launch the full editor with a pre-selected image or video asset.

Copy
// Initialize the SDK first
const { editor } = await ccEverywhere.initialize(); 
editor.createWithAsset(docConfig, appConfig, exportConfig, containerConfig); 
Copied to your clipboard
// Initialize the SDK first
const { editor } = await ccEverywhere.initialize(); 
editor.createWithAsset(docConfig, appConfig, exportConfig, containerConfig); 

Example: Create new project

The following code will invoke the full editor. It appears in a modal. When the user finishes in the editor and saves/publishes their design, the onPublish callback is invoked. Resulting project data is sent in publishParams. In this example, we save the project info (project_id) and display the image data (of the first page of the user's design) in some image container image_data.

Copy
// Initialize the SDK first
const { editor } = await ccEverywhere.initialize(hostInfo); 

const callbacks = {
    onCancel: () => {},
    onPublish: (intent,publishParams) => {
        const localData = { project: publishParams.projectId, image: publishParams.asset[0].data };
        updateImage(localData);
    },
    onError: (err) => {
        console.error('Error received is', err.toString());
    },
};

let appConfig = { callbacks: callbacks}

const updateImage = (localData) => {
    image_data.src = localData.image;
    project_id = localData.project;
}

editor.create(appConfig);
Copied to your clipboard
// Initialize the SDK first
const { editor } = await ccEverywhere.initialize(hostInfo); 

const callbacks = {
    onCancel: () => {},
    onPublish: (intent,publishParams) => {
        const localData = { project: publishParams.projectId, image: publishParams.asset[0].data };
        updateImage(localData);
    },
    onError: (err) => {
        console.error('Error received is', err.toString());
    },
};

let appConfig = { callbacks: callbacks}

const updateImage = (localData) => {
    image_data.src = localData.image;
    project_id = localData.project;
}

editor.create(appConfig);

Example: Create from asset

To launch the editor with a starting asset, the createWithAsset API takes a asset in inputParams. When the user finishes in the editor and saves/publishes their design, the onPublish callback is invoked. Resulting project data is sent in publishParams. In this example, we save the project info (project_id) and display the image data (of the first page of the user's design) in some image container image_data.

Copy
// Initialize the SDK first
const { editor } = await ccEverywhere.initialize(hostInfo);

const callbacks = {
    onCancel: () => {},
    onPublish: (intent,publishParams) => {
        const localData = { project: publishParams.projectId, image: publishParams.asset[0].data };
        updateImage(localData);
    },
    onError: (err) => {
        console.error('Error received is', err.toString());
    },
};

let appConfig = { callbacks: callbacks}

const updateImage = (localData) => {
    image_data.src = localData.image;
    project_id = localData.project;
}
 
let docConfig = {
    asset: {
        data: base64Asset,
        dataType: 'base64',
        type: 'image' 
    }
}
editor.createWithAsset(docConfig, appConfig);
Copied to your clipboard
// Initialize the SDK first
const { editor } = await ccEverywhere.initialize(hostInfo);

const callbacks = {
    onCancel: () => {},
    onPublish: (intent,publishParams) => {
        const localData = { project: publishParams.projectId, image: publishParams.asset[0].data };
        updateImage(localData);
    },
    onError: (err) => {
        console.error('Error received is', err.toString());
    },
};

let appConfig = { callbacks: callbacks}

const updateImage = (localData) => {
    image_data.src = localData.image;
    project_id = localData.project;
}
 
let docConfig = {
    asset: {
        data: base64Asset,
        dataType: 'base64',
        type: 'image' 
    }
}
editor.createWithAsset(docConfig, appConfig);

Last updated 10/11/2024

Was this helpful?

Yes

No