Modules

This guide will demonstrate how to embed the Generate Image, Edit Image, Template Browser, and Design Viewer modules in your own application.

createImageFromText()

The module class contains all the methods for launching quick action editors. The createImageFromText() API is powered by Adobe Firefly.

// Initialize the SDK first
const { module } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});

module.createImageFromText();

All arguments are optional.

Argument
Type
Description
appConfig
TextToImageAppConfig
Pass a text prompt to preload in the Generate Image editor
exportConfig
ExportOptions
Configure export options. If no export options are specified, the editor falls back to the default layout options.
containerConfig
ContainerConfig
Properties to configure the SDK container

editImage()

This editImage() API launches an iframe that allows users to continue editing an image in a modal. Instead of the entire Express editing experience, this module only loads relevant image-editing capabilities.

// Initialize the SDK first
const { module } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});

module.editImage(docConfig);

The only required argument is docConfig.

Argument
Type
Description
docConfig
EditImageDocConfig
Pass an asset to preload into the Edit Image module
appConfig
BaseEditorAppConfig
Pass callback functions
exportConfig
ExportOptions[]
Configure export options. If no export options are specified, the editor falls back to the default layout options.
containerConfig
ContainerConfig
Properties to configure the SDK container

startFromContent()

The startFromContent() API launches the Template Browser, a customizable browsing experience that lets users explore template collections, search and filter, and open a chosen template in the full editor.

// Initialize the SDK first
const { module } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});

module.startFromContent(appConfig);

All arguments are optional.

Argument
Type
Description
appConfig
StartFromContentAppConfig
Configure the Template Browser via the contentBrowseConfig object—collection, search, filters, and header text
exportConfig
ExportOptions[]
Configure export options. If no export options are specified, the editor falls back to the default layout options.
containerConfig
ContainerConfig
Properties to configure the SDK container

viewDesign()

The viewDesign() API launches the Design Viewer, loading a given image asset into a viewer experience from which users can Download the design (Desktop) or Share it (Mobile) via native share widgets, and optionally browse related templates in a sidebar.

// Initialize the SDK first
const { module } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});

module.viewDesign(docConfig);

The only required argument is docConfig.

Argument
Type
Description
docConfig
DesignViewerDocConfig
Pass the Asset to view (base64, url, or blob)
appConfig
DesignViewerAppConfig
Configure the viewer's designTitle, previewThumbnails sidebar, and callbacks
exportConfig
ExportOptions[]
Configure export options. If no export options are specified, the viewer falls back to the default layout options.
containerConfig
ContainerConfig
Properties to configure the SDK container

Examples

The following examples show a minimal invocation for each module. Switch tabs to see each workflow.

data-variant=info

data-slots=header, text1

New Generate Image experience

The Adobe Express Embed SDK since v4.20 has added support for an all-new Generate Image (Text-to-Image) experience. This feature is disabled by default, displaying the classic interface. Toggle the enableNewUI boolean flag to true in the appConfig object to enable it.
data-slots=heading, code

data-repeat=4

data-languages=Generate Image, Edit Image, Template Browser, Design Viewer

Generate Image

// Initialize SDK and save CCEverywhere object as ccEverywhere
ccEverywhere.module.createImageFromText(
  {
    promptText: "Flying cows",
  },
  {
    thumbnailOptions: ["edit-dropdown", "rich-preview", "publish"],
    publishConfig: {
      id: "saveToHostApp",
      label: "Publish",
    },
    editDropdownOptions: [
      { option: "add-effects" },
      { option: "remove-background" },
      { option: "insert-object" },
      { option: "apply-adjustment" },
      { option: "remove-object" },
    ],
    featureConfig: {
      "community-wall": true,
      "fast-mode": true,
      "custom-models": true,
    },
    fastModeConfig: { defaultFastModeState: "off" },
    appVersion: "2",
    callbacks: {
      onCancel: () => {},
      onError: (err) => {},
      onPublish: (publishParams) => {},
    },
  },
  [
    {
      action: { context: "new", target: "express" },
      id: "editor",
      label: "Create a design",
      style: { uiType: "button" },
    },
    {
      action: {
        target: "publish",
        outputType: "URL",
        closeTargetOnExport: true,
      },
      id: "saveToHostApp",
      label: "Publish",
      style: { uiType: "button" },
    },
  ]
);

Edit Image

const { module } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});

const docConfig = {
  asset: {
    data: "replace-with-base64-encoded-asset",
    dataType: "base64",
    type: "image",
  },
};

const exportOptions = [
  {
    type: "continue-editing",
    label: "Continue Editing",
    style: { uiType: "button" },
    options: [
      {
        id: "exportOption3",
        style: { uiType: "dropdown" },
        action: { target: "image-module", intent: "remove-background" },
      },
      {
        id: "exportOption4",
        style: { uiType: "dropdown" },
        action: { target: "express", intent: "add-images" },
      },
      {
        id: "exportOption5",
        style: { uiType: "dropdown" },
        action: { target: "express", intent: "add-text" },
      },
    ],
  },
];

module.editImage(docConfig, {}, exportOptions);

Template Browser

const { module } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});

const appConfig = {
  contentBrowseConfig: {
    categoriesConfig: [
      {
        category: "templates",
        collectionId: "urn:aaid:sc:VA6C2:34756608-9fa0-4fdc-80b0-65e17ffb29c8",
      },
    ],
    searchQuery: "Instagram story",
    shortcutPillTerms: ["Social", "Business", "Events", "Personal"],
    headerText: "Browse our Business Card templates",
  },
};

module.startFromContent(appConfig);

Design Viewer

const { module } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});

const docConfig = {
  asset: {
    type: "image",
    dataType: "base64",
    data: "<base64-encoded-string>",
  },
};

const appConfig = {
  designTitle: "Your Gameweek Summary",
  previewThumbnails: {
    collectionConfig: {
      collectionId: "urn:aaid:sc:VA6C2:35e85094-7807-45aa-abac-c9aeac11eb2e",
      count: 7,
    },
  },
  callbacks: {
    onPublish: (intent, publishParams) => {
      console.log("Published:", publishParams);
    },
    onCancel: () => {},
    onError: (err) => console.error("Error:", err.toString()),
  },
};

module.viewDesign(docConfig, appConfig);