Modules

This guide will demonstrate how to embed our Generate Image and Edit Image 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.

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

module.createImageFromText();

TextToImageParams

All the properties in this object are optional.

editImage()

This 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.

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

module.editImage(docConfig);

The only required property is docConfig.

Example: Generate from text

The following code will invoke the generate module. In this example, we pass a string to be used as a prompt. If that field is left empty, the user will be prompted to input a prompt once the modal is open.

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

const appConfig = {
  promptText: "Flying cows",
  thumbnailOptions: ["edit-dropdown", "rich-preview", "publish"],
  enableNewUI: true, // 👈 Enable the new Generate Image experience
  publishConfig: {
    id: "saveToHostApp",
    label: "Save in App",
  },
  editDropdownOptions: [
    { option: "add-effects" },
    { option: "remove-background" },
    { option: "apply-adjustment" },
    { option: "insert-object" },
    { option: "remove-object" },
  ],
  featureConfig: {
    "community-wall": true,
    "fast-mode": true,
  },
  fastModeConfig: { defaultFastModeState: "on" },
  callbacks: {
    onCancel: () => {},
    onError: (err) => {},
    onLoadStart: () => {},
    onLoad: () => {},
    onPublishStart: () => {},
    onPublish: (publishParams) => {},
  },
};

const exportConfig = [
  {
    action: {
      context: "new",
      target: "express",
    },
    id: "editor",
    label: "Create a design",
    style: {
      uiType: "button",
    },
  },
  {
    action: {
      target: "publish",
      outputype: "URL",
      closeTargetOnExport: true,
    },
    id: "saveToHostApp",
    label: "Save in App",
    style: {
      uiType: "button",
    },
  },
];
module.createImageFromText(appConfig, exportConfig);

Example: Edit Image

The following code will invoke the Edit Image module.

Copy
Copied to your clipboard
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);

Last updated 2/27/2025

Was this helpful?

Yes

No