Adobe Express Editor Reference

Editor

The Adobe Express Editor component gives you access to two workflows:

Launch with a new project: createDesign()
Launch with a project ID to continue editing an existing CC Express project: editDesign()

createDesign()

This method launches a new project in the Adobe Express editor component. The editor is loaded in an iframe.

createDesign(CreateDesignParams)
Copied to your clipboard
createDesign(CreateDesignParams)

CreateDesignParams

createDesign() takes a CreateDesignParams object with 4 properties.

Properties	Type	Description
inputParams	CreateInputParams	Specify canvas template layout ratio, canvas template type, and the search text to pass in the target application
modalParams	ModalParams	Specify CC Express editor modal dimensions
outputParams	CCXOutputParams	Specify output type and file type of created project
callbacks	Callbacks	onCancel, onPublish, onError, onLoad, onLoadStart, onPublishStart

CreateInputParams

CreateInputParams allows you to configure the editor to be launched for the user.

Property	Type	Description
canvasAspectId	string	Initializes the Express editor loaded with templates that fit that layout ratio
templateType	string	Initializes the Express editor loaded with templates of this specified type
templateSearchText	string	Initializes the Express editor with this string value for template search

To see the full list of canvas template layout ratios and template types, see the customization page.

Example

ccEverywhere.createDesign(
    {
        modalParams: {},
        callbacks: {
            onCancel: () => {},
            onError: (err) => {},
            onLoadStart: () => {},
            onLoad: () => {},
            onPublishStart: () => {},
            onPublish: (publishParams) => {},
        },
        outputParams: { 
            outputType: 'base64'
        },
        inputParams: { 
            canvasAspectId: '1:2',
            templateType: 'Flyers',
        }
    }
); 
Copied to your clipboard
1ccEverywhere.createDesign(
2    {
3        modalParams: {},
4        callbacks: {
5            onCancel: () => {},
6            onError: (err) => {},
7            onLoadStart: () => {},
8            onLoad: () => {},
9            onPublishStart: () => {},
10            onPublish: (publishParams) => {},
11        },
12        outputParams: { 
13            outputType: 'base64'
14        },
15        inputParams: { 
16            canvasAspectId: '1:2',
17            templateType: 'Flyers',
18        }
19    }
20);

editDesign()

This method launches a Adobe Express editor component with an existing Adobe Express project. The editor is loaded in an iframe.

editDesign(EditDesignParams)
Copied to your clipboard
editDesign(EditDesignParams)

EditDesignParams

editDesign() takes a EditDesignParams object with 4 properties.

Property	Type	Description
inputParams	EditInputParams	ID of CC Express project to open for editing
modalParams	ModalParams	Specify CC Express editor modal dimensions
outputParams	CCXOutputParams	Specify output type and file type of created project
callbacks	Callbacks	onCancel, onPublish, onError, onLoad, onLoadStart, onPublishStart

EditInputParams

EditInputParams is where you pass the associated projectId to launch in an editor component.

Property	Type	Description
projectId	string	CC Express project ID to send to the editor component

Get projectId from publishParams of onPublish (called after save/download finishes).

Example

ccEverywhere.editDesign(
    {
        // inputParams.projectId is the only REQUIRED parameter
        inputParams: { 
            projectId: CCX_PROJECT_ID 
        },
        callbacks: {
            onCancel: () => {},
            onError: (err) => {},
            onLoadStart: () => {},
            onLoad: () => {},
            onPublishStart: () => {},
            onPublish: (publishParams) => {},
        },
        modalParams: {},
        outputParams: { 
            outputType: 'base64'
        },
    }
);
Copied to your clipboard
1ccEverywhere.editDesign(
2    {
3        // inputParams.projectId is the only REQUIRED parameter
4        inputParams: { 
5            projectId: CCX_PROJECT_ID 
6        },
7        callbacks: {
8            onCancel: () => {},
9            onError: (err) => {},
10            onLoadStart: () => {},
11            onLoad: () => {},
12            onPublishStart: () => {},
13            onPublish: (publishParams) => {},
14        },
15        modalParams: {},
16        outputParams: { 
17            outputType: 'base64'
18        },
19    }
20);