### Install Dependencies and Run

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/getting-started

Install project dependencies and start the development server using npm commands.

```bash
npm install
```

```bash
npm run start
```

--------------------------------

### Install dependencies and start development server

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/mobile-web

Run these commands in the Mobile-web directory to prepare the environment and launch the server on port 5566.

```bash
npm install
npm run gen:cert
npm run dev
```

--------------------------------

### Start From Content Configuration Properties

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/shared/src/types/module/app-config-types/interfaces/preview-mode-config

Configuration properties for initializing the Start From Content module.

```APIDOC
## Start From Content Configuration

### Description
Configuration object properties for the Start From Content module.

### Parameters
#### Request Body
- **headerText** (string) - Optional - The text to be displayed in the header of the Start From Content module. Default is an empty string.
- **launchMode** ("preview") - Required - Launch mode for Start From Content. Must be set to 'preview' to enable direct preview mode.
- **assetId** (string) - Required - The ID of the asset to preview directly. Currently supports templates only.
```

--------------------------------

### Open Start From Content Module

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/workflows/3p/module-workflow/classes/module-workflow

Use this method to open the Start From Content module. Optional parameters can configure image generation, export options, and the SDK container.

```typescript
startFromContent(
   appConfig?,
   exportConfig?,
   containerConfig?
): void;
```

--------------------------------

### Full iOS Example - ViewController Setup

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-webview

This Swift code sets up a ViewController for embedding a WKWebView. It configures the web view with custom settings and assigns navigation and UI delegates. Ensure `getWebviewConfig()` and `setCustomUserAgent(for:)` are implemented elsewhere.

```swift
import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
    var newWebviewPopupWindow: WKWebView?

    @IBOutlet weak var loadButton: UIButton!
    @IBOutlet weak var footerView: UIView!

    lazy var webView: WKWebView = {
        let webViewConfig = getWebviewConfig()

        let webView = WKWebView(
            frame: .zero,
            configuration: webViewConfig
        )
        webView.navigationDelegate = self
        webView.uiDelegate = self
        self.setCustomUserAgent(for: webView)
        

```

--------------------------------

### startFromContent()

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/workflows/3p/module-workflow-types/interfaces/module-workflow

Opens the Start From Content module.

```APIDOC
## startFromContent()

### Description
Opens the Start From Content module to allow users to begin a project from existing content.

### Parameters
- **appConfig** (Object) - Optional
- **exportConfig** (ExportOptions) - Optional
- **containerConfig** (ContainerConfig) - Optional

### Returns
- **void**
```

--------------------------------

### Initialize and start the Template Browser

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/browse-template

Initializes the SDK and triggers the template browsing workflow using the startFromContent method.

```javascript
await import("https://cc-embed.adobe.com/sdk/v4/CCEverywhere.js");

const { module } = await window.CCEverywhere.initialize(
  { clientId: "your-client-id", appName: "your-app-name" },
  {}
);

module.startFromContent({ /* ... */ });
```

--------------------------------

### Clone Embed SDK Edit Image Sample

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/edit-image

Clone the sample project from GitHub to start your integration. Navigate to the project directory after cloning.

```bash
git clone https://github.com/AdobeDocs/embed-sdk-samples.git
cd embed-sdk-samples/code-samples/tutorials/embed-sdk-edit-image
```

--------------------------------

### Browse Mode Configuration

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/shared/src/types/module/app-config-types/interfaces/browse-mode-config

Configuration options for the 'Start From Content' browse mode.

```APIDOC
## Browse Mode Configuration Options

### Description
These options configure the 'Start From Content' browse mode within the Adobe Express Embed SDK.

### Parameters
#### Query Parameters
- **launchMode?** (string) - Optional - Launch mode for Start From Content. Default: 'browse'. Possible values: 'browse'.
- **categoriesConfig** (Array<BrowseSearchConfigUnion>) - Required - Configuration for browse search functionality. Can be configured for templates or photos based on the category. Browse mode needs category to show assets.
- **searchQuery?** (string) - Optional - Search Query to be used to search across all browse search categories. Default: empty string.
- **hideSearchBar?** (boolean) - Optional - Property to hide the search bar in the Browse Search. Default: false.
```

--------------------------------

### Clone Embed SDK Generate Image Sample

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/generate-image

Clone the sample project from GitHub to start building your application. Navigate to the cloned directory to begin.

```bash
git clone https://github.com/AdobeDocs/embed-sdk-samples.git
cd embed-sdk-samples/code-samples/tutorials/embed-sdk-generate-image
```

--------------------------------

### Start Workflow from Content with ModuleWorkflow

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/workflows/3p/module-workflow-types/interfaces/module-workflow

Initiate a workflow using the startFromContent method, allowing users to begin with existing content. Optional application, export, and container configurations are supported.

```typescript
startFromContent(
   appConfig?,
   exportConfig?,
   containerConfig?): void;
```

--------------------------------

### Start Edit Image Export Configuration

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/workflow-tethering

Configuration for starting the Edit Image workflow. This snippet is a placeholder and would typically define actions relevant to image editing.

```javascript
export const startEditImageExportConfig = [
  {
    id: "download",
    label: "Download",
    action: { target: "download" },
    style: { uiType: "button" },
  },
  {
    id: "save-generated-image",
    label: "Save generated image",
    action: { target: "publish" },
    style: { uiType: "button" },
  },
  {
    id: "open-edit-image",
    label: "Edit image",
    action: { target: "image-module" },
    style: { uiType: "button" },
  },
];
```

--------------------------------

### Start ngrok tunnel

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/mobile-web

Executes the ngrok tunnel command from the project root to generate a public URL.

```bash
npm run ngrok
```

--------------------------------

### Configure Mobile Container Sizing and Features

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-browser

Ensure the SDK interface fits properly on smaller mobile screens by configuring container sizing. This example demonstrates setting default mobile dimensions and conditionally applying mobile-specific settings like allowed file types.

```javascript
// Mobile container constants
const DEFAULT_MOBILE_SIZE = { width: 390, height: 850, unit: 'px' };
const MIN_DESKTOP_WIDTH = 768;

const getMobileConfig = () => {
  const isMobile = window.innerWidth < MIN_DESKTOP_WIDTH;

  return {
    skipBrowserSupportCheck: true,
    // Mobile-specific optimizations
    ...(isMobile && {
      // Use mobile container sizing
      containerSize: DEFAULT_MOBILE_SIZE,
      // Limit features for mobile
      allowedFileTypes: ['image/png', 'image/jpeg'], // Skip video/PDF on mobile
    })
  };
};

// Platform category detection for applications
const ccEverywhereConfig = {
  hostInfo: {
    ...hostInfo,
    platformCategory: 'web' // applications always use 'web' platform
  },
  configParams: getMobileConfig()
};

const { editor, module, quickAction } = await window.CCEverywhere.initialize(
  ccEverywhereConfig.hostInfo,
  ccEverywhereConfig.configParams
);
```

--------------------------------

### Start Editor with Asset

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/workflows/3p/editor-workflow/classes/editor-workflow

Initiates the editor workflow by loading a specified image asset. Optional parameters can configure the application, export, and container.

```typescript
createWithAsset(
   docConfig,
   appConfig?,
   exportConfig?,
   containerConfig?): void;
```

--------------------------------

### Set Basic WebViewClient

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-webview

Assigns a basic WebViewClient to the WebView. This is a minimal setup for handling WebView events.

```kotlin
// Set a basic WebViewClient
        webView?.webViewClient = WebViewClient()
```

--------------------------------

### Export Configuration Example

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/workflow-tethering

Defines export configurations, including the option to disable cache updates.

```javascript
export const exportConfigurations = {
  // ... other configurations
  updateCache: false
};
```

--------------------------------

### Handle WebView URL Loading

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/mobile-web

Triggers the WebView to load the configured URL when the start button is clicked.

```kotlin
// MainActivity.kt
private fun setUpStartGameHandlers() {
    findViewById<Button>(R.id.btnStartGame)
        .setOnClickListener {
            webView?.loadUrl(START_GAME_URL)
        }
}
```

--------------------------------

### Create Editor with Asset Configuration

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/workflows/3p/editor-workflow/classes/editor-workflow

Use this method to start the editor workflow by passing an image asset as a base64 string. Configure the editor, export options, and container as needed.

```typescript
createWithAsset(
   docConfig: CreateWithAssetDocConfig,
   appConfig?: BaseEditorAppConfig,
   exportConfig?: ExportOptions,
   containerConfig?: ContainerConfig
): void;
```

--------------------------------

### V3 to V4 API Transformation Example

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/migration-v3-v4

Illustrates the transformation of a V3 API call to its V4 equivalent, showing the change from a single createDesign call to a more structured editor.create call with multiple configuration objects.

```javascript
V3: 
ccEverywhere.createDesign(inputParams);

V4: 
ccEverywhere.editor.create(docConfig, appConfig, exportConfig, containerConfig);
```

--------------------------------

### MainActivity Kotlin Code

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-webview

This is the main activity code for the Android example. It sets up the WebView and necessary configurations for the Adobe Express Embed SDK.

```kotlin
package com.example.embedsdk

import android.annotation.SuppressLint
import android.app.Dialog
import android.os.Bundle
import android.view.View
import android.webkit.WebChromeClient
import android.webkit.WebSettings
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Button
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import android.os.Build
import android.os.Message
import android.webkit.CookieManager


class MainActivity : AppCompatActivity() {
    private var webView: WebView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

```

--------------------------------

### Edit Image to Full Editor Workflow Setup

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/workflow-tethering

This snippet is part of the 'Edit Image to Full Editor' workflow, handling the transition from the Edit Image workflow to the Full Editor workflow. It includes necessary imports for image manipulation and workflow resets.

```javascript
import {
  expressImage,
  resetWorkflow,
  updateImageAndCache,

```

--------------------------------

### Start Generate Image Export Configuration

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/workflow-tethering

Defines export options when initiating the Generate Image workflow. Includes actions for downloading, publishing, and editing the generated image.

```javascript
export const startGenImageExportConfig = [
  {
    id: "download",
    label: "Download",
    action: { target: "download" },
    style: { uiType: "button" },
  },
  {
    id: "save-generated-image",
    label: "Save generated image",
    action: { target: "publish" },
    style: { uiType: "button" },
  },
  {
    id: "open-edit-image",
    label: "Edit image",
    action: { target: "image-module" },
    style: { uiType: "button" },
  },
];
```

--------------------------------

### Define Export Options Configuration

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/edit-image

Defines the configuration for export options available to the user within the Adobe Express Embed SDK. This example shows an initial setup for a 'Download' option.

```javascript
// Configuration for the export options made available
// to the user when creating or editing a document
const exportConfig = [
  {
    id: "download", label: "Download",
  }
];
```

--------------------------------

### Clone the Embed SDK Mobile Web Sample

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/mobile-web

Use these commands to download the sample repository and enter the mobile web tutorial directory.

```bash
git clone https://github.com/AdobeDocs/embed-sdk-samples.git
cd embed-sdk-samples/code-samples/tutorials/embed-sdk-mobile-web
```

--------------------------------

### Initialize SDK and Components in main.js

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/generate-image

Imports necessary Spectrum Web Components and initializes the Adobe Express Embed SDK.

```javascript
import "./style.css";

// Importing theme and typography styles from Spectrum Web Components
import "@spectrum-web-components/styles/typography.css";
import "@spectrum-web-components/theme/express/theme-light.js";
import "@spectrum-web-components/theme/express/scale-medium.js";
import "@spectrum-web-components/theme/sp-theme.js";

// Importing Spectrum Web Components
import "@spectrum-web-components/button/sp-button.js";
import "@spectrum-web-components/button-group/sp-button-group.js";
import "@spectrum-web-components/divider/sp-divider.js";

import { fetchCommunityAssets } from "./community-wall.js";

// Importing the Adobe Express Embed SDK
await import("https://cc-embed.adobe.com/sdk/v4/CCEverywhere.js");
console.log("CCEverywhere loaded", window.CCEverywhere);

// Parameters for initializing the Adobe Express Embed SDK
const hostInfo = {
```

--------------------------------

### Inline Alert Example (Slots)

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/generate-image-v2

Example of an inline alert utilizing slots for content.

```html
data-slots=text1
```

--------------------------------

### Clone Embed SDK Sample Project

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/workflow-tethering

Clone the sample project from GitHub and navigate into the project directory to begin development.

```bash
git clone https://github.com/AdobeDocs/embed-sdk-samples.git
cd embed-sdk-samples/code-samples/tutorials/embed-sdk-workflow-tethering
```

--------------------------------

### Project Structure Overview

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/generate-image

Understand the file structure of the Embed SDK Generate Image sample project. Key files include configuration, UI container, Embed SDK logic, custom community wall logic, and styles.

```txt
. 
├── package.json             📦 Project configuration
├── vite.config.js           🔧 Build configuration
└── src
    ├── images               📷 Images for the Custom Community Wall
    │   └── ...
    ├── index.html           🌐 UI container
    ├── main.js              💻 Embed SDK logic
    ├── community-wall.js    🖼️ Custom Community Wall logic
    └── style.css            🎨 CSS styles
```

--------------------------------

### Enable Page Margin Guides

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/appconfig

Display page margin guides to assist users in designing within printable areas. Enable for print-focused workflows where margin awareness is critical.

```javascript
const appConfig = {
  showPageMargin: true, // Show margin guides for print layouts
};
```

--------------------------------

### Enable Bleed Area Guides

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/appconfig

Display bleed area guides for designs that extend to the edge of printed materials. Essential for professional print workflows where content extends beyond trim lines.

```javascript
const appConfig = {
  showBleedArea: true, // Show bleed guides for print-ready designs
};
```

--------------------------------

### Create Popup WebView with WKUIDelegate

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-webview

Implement `webView(_:createWebViewWith:for:windowFeatures:)` to create and configure a new WKWebView for popup windows. Use the provided configuration as-is to maintain communication with the opener. Ensure safe area insets are applied to prevent content from being hidden.

```swift
var newWebviewPopupWindow: WKWebView?

func webView(
    _: WKWebView,
    createWebViewWith configuration: WKWebViewConfiguration,
    for navigationAction: WKNavigationAction,
    windowFeatures _: WKWindowFeatures
) -> WKWebView? {
    newWebviewPopupWindow = WKWebView(frame: view.bounds, configuration: configuration)
    newWebviewPopupWindow!.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    newWebviewPopupWindow!.navigationDelegate = self
    newWebviewPopupWindow!.uiDelegate = self
    self.setCustomUserAgent(for: newWebviewPopupWindow!)

    // Set content insets for safe areas
    let topInset = view.safeAreaInsets.top
    newWebviewPopupWindow!.scrollView.contentInset = UIEdgeInsets(top: topInset, left: 0, bottom: 0, right: 0)
    newWebviewPopupWindow!.scrollView.scrollIndicatorInsets = newWebviewPopupWindow!.scrollView.contentInset

    view.addSubview(newWebviewPopupWindow!)
    return newWebviewPopupWindow!
}
```

--------------------------------

### Example Base64 Encoded Image Data

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/shared/src/types/browse-search-config-types/interfaces/host-contextual-data-for-images

Provides an example of how to structure an array of Base64 encoded images for contextual browse. It's recommended to use images with a width of 330px while maintaining the aspect ratio.

```typescript
{
  [ { type: AssetType.IMAGE, dataType: AssetDataType.BASE64, name: "example-image.jpg", // optional data: "data:image/jpeg;base64,/9j/4AAQSkZJRg.." } ]
}
```

--------------------------------

### Get ErrorHandler instance

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/error/error-handler/classes/error-handler

Retrieves the singleton instance of the ErrorHandler.

```ts
static instance(): ErrorHandler;
```

--------------------------------

### edit()

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/workflows/3p/editor-workflow/classes/editor-workflow

Starts the editor workflow by passing an Express Document ID.

```APIDOC
## edit()

### Description
Start the editor workflow by passing an Express Document ID.

### Parameters
#### Request Body
- **docConfig** (Object) - Required - The document configuration.
- **appConfig** (BaseEditorAppConfig) - Optional - Properties to configure the Editor.
- **exportConfig** (ExportOptions) - Optional - Properties to configure the export options.
- **containerConfig** (ContainerConfig) - Optional - Properties to configure the SDK container.

### Response
- **Returns** (void)
```

--------------------------------

### Initialize Generate Image workflow in main.js

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/workflow-tethering

Imports necessary configurations and sets up the click handler to trigger the Generate Image workflow.

```javascript
//... other imports...
import { startGenImageExportConfig    } from "./config/exportConfigs.js";
import { createGenerateImageAppConfig } from "./config/appConfigs.js";

//... Import and initialize the SDK...

// Create the Generate Image workflow appConfig using the factory function
const generateImageAppConfig = createGenerateImageAppConfig();

// Click handler for the Generate Image button
document.getElementById("generateBtn").onclick = async () => {

  // Set the current workflow to "generate"
  setCurrentWorkflow("generate");

  module.createImageFromText(
    generateImageAppConfig,    // the appConfig
    startGenImageExportConfig  // the exportConfig
  );
};
```

--------------------------------

### CCEverywhereError.code Accessor

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/shared/src/error/cc-everywhere-error/classes/cc-everywhere-error

Gets the error code associated with the CCEverywhereError instance.

```APIDOC
## Accessor code

### Description
Gets the error code associated with the CCEverywhereError instance.

### Get Signature
```ts
get code(): T;
```

### Returns
`T`
```

--------------------------------

### animateFromAudio()

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/workflows/3p/quick-action-workflow-types/interfaces/quick-action-workflow

Initiates the animate from audio quick action using the provided configurations.

```APIDOC
## animateFromAudio()

### Description
Initiates the animate from audio quick action.

### Parameters
- **docConfig** (DocConfig) - Optional - Configuration for the document.
- **appConfig** (AppConfig) - Optional - Configuration for the application.
- **exportConfig** (ExportOptions) - Optional - Configuration for export options.
- **containerConfig** (ContainerConfig) - Optional - Configuration for the container.

### Response
- **Returns** (void)
```

--------------------------------

### Version Retrieval

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/cc-everywhere-base/classes/cc-everywhere-base

Get the version of the Adobe Express Embed SDK.

```APIDOC
## Get Version

### Description
Retrieves the version of the Adobe Express Embed SDK.

### Method
GET

### Endpoint
`/version`

### Response
#### Success Response (200)
- **version** (string) - The version string of the SDK.

#### Response Example
```json
{
  "version": "1.2.3"
}
```
```

--------------------------------

### Get SDK version

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/cc-everywhere-base/classes/cc-everywhere-base

Retrieve the current version string of the SDK.

```ts
get version(): string;
```

--------------------------------

### Get and Set state

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/cc-everywhere-base/classes/cc-everywhere-base

Access or modify the static state of the SDK.

```ts
get static state(): State;
```

```ts
set static state(value): void;
```

--------------------------------

### Project Structure Overview

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/edit-image

This outlines the file structure of the Embed SDK Edit Image sample project. Key files include project configuration, build configuration, and source files for UI and SDK logic.

```txt
. 
├── package.json             💾 Project configuration
├── vite.config.js           ⚙️ Build configuration
└── src
    ├── images               ὏7 Images
    │   └── ...
    ├── index.html           🌐 UI container
    ├── main.js              💻 Embed SDK logic
    └── style.css            🎨 CSS styles
```

--------------------------------

### StartFromContentAppConfig Interface

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/shared/src/types/module/app-config-types/interfaces/start-from-content-app-config

Details the StartFromContentAppConfig interface, its properties, and its inheritance.

```APIDOC
## Interface: StartFromContentAppConfig

StartFromContentAppConfig is the app config for the Start From Content module.

### Extends

- [`BaseAppConfig`](/express/embed-sdk/docs/v4/shared/src/types/design-config-types/interfaces/base-app-config)
```

--------------------------------

### Get and Set activeInstance

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/cc-everywhere-base/classes/cc-everywhere-base

Access or modify the static active instance of the SDK.

```ts
get static activeInstance(): CCEverywhereBase | undefined;
```

```ts
set static activeInstance(instance): void;
```

--------------------------------

### Initialize Embed SDK

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/full-editor

Initializes the SDK using host information and optional configuration parameters.

```javascript
// 👀 Required parameters for initializing the Embed SDK
const hostInfo = {
  clientId: import.meta.env.VITE_API_KEY,
  // The appName must match the Public App Name in the Developer Console
  appName: "Embed SDK Sample",
};

// Optional parameters
const configParams = {
  // Users can log in only when exporting/saving the document
  loginMode: "delayed",
};

// Initializing the Adobe Express Embed SDK
const { editor } = await window.CCEverywhere.initialize(
  hostInfo,
  configParams
);
```

--------------------------------

### captionVideo()

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/workflows/3p/quick-action-workflow-types/interfaces/quick-action-workflow

Initiates the caption video quick action using the provided configurations.

```APIDOC
## captionVideo()

### Description
Initiates the caption video quick action.

### Parameters
- **docConfig** (DocConfig) - Optional - Configuration for the document.
- **appConfig** (AppConfig) - Optional - Configuration for the application.
- **exportConfig** (ExportOptions) - Optional - Configuration for export options.
- **containerConfig** (ContainerConfig) - Optional - Configuration for the container.

### Response
- **Returns** (void)
```

--------------------------------

### HTML Data Slot Example

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/mobile-web

This HTML attribute is used to define a slot for content, such as a heading.

```html
data-slots=heading
```

--------------------------------

### Type Alias: PublishStartCallback

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/shared/src/types/callbacks-types/type-aliases/publish-start-callback

Defines the signature for the callback function triggered when a publish action starts.

```APIDOC
## Type Alias: PublishStartCallback

### Description
A callback function type that is invoked when a publish operation is initiated. It does not accept any arguments and returns nothing.

### Signature
`type PublishStartCallback = () => void;`

### Returns
- **void** - This function does not return a value.
```

--------------------------------

### Access the Module Entry Point

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/generate-image

After initializing the SDK, destructure the `module` object from the returned properties. This `module` is the entry point for workflows like `createImageFromText`.

```javascript
module.createImageFromText({ /* ... */ });
```

--------------------------------

### Initialize WKWebView with Configuration and Delegates

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-webview

Initializes a WKWebView with custom configuration, setting navigation and UI delegates. The frame is set to zero, with layout handled later. Ensure all preferences are set in the configuration before initialization.

```swift
lazy var webView: WKWebView = {
    let webViewConfig = getWebviewConfig()

    let webView = WKWebView(
        frame: .zero,
        configuration: webViewConfig
    )
    webView.navigationDelegate = self
    webView.uiDelegate = self
    self.setCustomUserAgent(for: webView)

    return webView
}()
```

--------------------------------

### HTML Data Repeat Example

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/mobile-web

This HTML attribute is used to specify the number of times an element should be repeated.

```html
data-repeat=1
```

--------------------------------

### Initialize Adobe Express Embed SDK

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/generate-image

Configure host information including client ID and app name before initializing the SDK. Ensure `import.meta.env.VITE_API_KEY` is correctly set.

```javascript
const hostInfo = {
  clientId: import.meta.env.VITE_API_KEY,
  appName: "Embed SDK Sample",
};

const { module } = await window.CCEverywhere.initialize(hostInfo, {});
```

--------------------------------

### Initialize WebView in Activity

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-webview

Locate the WebView instance and trigger the configuration method within the Activity's onCreate lifecycle method.

```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    webView = findViewById(R.id.webview)
    configureWebView()
}
```

--------------------------------

### Caption video using captionVideo

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/workflows/3p/quick-action-workflow-types/interfaces/quick-action-workflow

Initializes the video captioning process using optional configuration objects.

```ts
captionVideo(
   docConfig?, 
   appConfig?, 
   exportConfig?, 
   containerConfig?): void;
```

--------------------------------

### Configure API Key

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/getting-started

Replace the placeholder with your Embed SDK API Key in the .env file.

```bash
VITE_API_KEY="your-api-key-here!"
```

--------------------------------

### HTML Data Summary Example

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/mobile-web

This HTML attribute provides a summary or tooltip for an element, often used for interactive elements.

```html
data-summary=Click to view the iOS simulator settings
```

--------------------------------

### Configure Export Workflow Stages

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/workflow-tethering

JavaScript definitions for start and end export configurations across different image editing workflows.

```javascript
// 1. Starting with the Generate Image workflow...
export const startGenImageExportConfig = [
  { id: "download", label: "Download", /* ... */ },
  { id: "save-generated-image", label: "Save generated image", /* ... */ },
  // 👇 Enables transition
  { id: "open-edit-image", label: "Edit image", /* ... */ },
];

// ... and ending with the Edit Image workflow
export const endEditImageExportConfig = [
  { id: "download", label: "Download", /* ... */ },
  { id: "save-final-image", label: "Save final image", /* ... */ },
];

// 2. Starting with the Edit Image workflow...
export const startEditImageExportConfig = [
  { id: "download", label: "Download", /* ... */ },
  { id: "save-edited-image", label: "Save edited image", /* ... */ },
  // 👇 Enables options
  { type: "continue-editing", label: "Do More", /* ... */ },
];

// ... and ending with the Full Editor workflow
export const endFullEditorExportConfig = [
  { id: "download", label: "Download", /* ... */ },
  { id: "save-full-editor-result", label: "Save design", /* ... */ },
];
```

--------------------------------

### Handle New WebView Windows

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-webview

Implements a custom WebChromeClient to manage the creation of new WebView windows, typically used for pop-ups or external links. It sets up a dialog to display the new WebView and handles its closure.

```kotlin
webView?.webChromeClient = object : WebChromeClient() {
            override fun onCreateWindow(
                view: WebView?,
                isDialog: Boolean,
                isUserGesture: Boolean,
                resultMsg: Message?
            ): Boolean {
                val newWebView = WebView(this@MainActivity)
                setupPopupWebView(newWebView)
                val dialog = Dialog(this@MainActivity, android.R.style.Theme_Black_NoTitleBar_Fullscreen)
                dialog.setContentView(newWebView)
                dialog.show()
                newWebView.webChromeClient = object : WebChromeClient() {
                    override fun onCloseWindow(window: WebView?) {
                        dialog.dismiss()
                    }
                }
                val transport = resultMsg?.obj as? WebView.WebViewTransport
                transport?.webView = newWebView
                resultMsg?.sendToTarget()
                return true
            }
        }
```

--------------------------------

### Import and Initialize Adobe Express Embed SDK

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/edit-image

Import necessary styles and components, then load and initialize the Adobe Express Embed SDK. Ensure your client ID is set in your environment variables.

```javascript
// Import theme and typography styles from Spectrum Web Components
import "@spectrum-web-components/styles/typography.css";
import "@spectrum-web-components/theme/express/theme-light.js";
import "@spectrum-web-components/theme/express/scale-medium.js";
import "@spectrum-web-components/theme/sp-theme.js";

// Import Spectrum Web Components
import "@spectrum-web-components/button/sp-button.js";
import "@spectrum-web-components/button-group/sp-button-group.js";
import "@spectrum-web-components/divider/sp-divider.js";
import "./style.css";

// Import the Adobe Express Embed SDK
await import("https://cc-embed.adobe.com/sdk/v4/CCEverywhere.js");
console.log("CCEverywhere loaded", window.CCEverywhere);

// Parameters for initializing the Adobe Express Embed SDK
const hostInfo = {
  clientId: import.meta.env.VITE_API_KEY,
  appName: "Embed SDK Sample",
};

// Optional parameters
const configParams = {
  /* ... */
};

// Initialize the Adobe Express Embed SDK
const { module } = await window.CCEverywhere.initialize(
  hostInfo,
  configParams
);

```

--------------------------------

### Initialize the Embed SDK

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/edit-image

Initialize the SDK by passing host information and optional configuration parameters to the CCEverywhere object.

```javascript
// main.js
//... previous imports ...

// 👀 Required parameters to initialize the Embed SDK
const hostInfo = {
  clientId: import.meta.env.VITE_API_KEY,
  // The appName must match the Public App Name in the Developer Console
  appName: "Embed SDK Sample",
};

// Optional parameters
const configParams = { /* ... */ };

// Initialize the Adobe Express Embed SDK
// Destructure the `module` property only
const { module } = await window.CCEverywhere.initialize(
  hostInfo,
  configParams
);
```

--------------------------------

### Start Editor with Empty Canvas

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/workflows/3p/editor-workflow/classes/editor-workflow

Initiates the editor workflow with an empty canvas. Optional parameters can configure the document, application, export, and container.

```typescript
create(
   docConfig?,
   appConfig?,
   exportConfig?,
   containerConfig?): void;
```

--------------------------------

### Implement Initialization Fallbacks

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-browser

Handle SDK initialization errors by providing specific feedback for mobile versus desktop environments.

```javascript
const initializeWithFallback = async () => {
  try {
    const sdk = await window.CCEverywhere.initialize(hostInfo, configParams);
    return sdk;
  } catch (error) {
    if (isMobile) {
      // Show mobile-specific error message
      showMobileErrorMessage();
    } else {
      // Show desktop error message
      showDesktopErrorMessage();
    }
    throw error;
  }
};
```

--------------------------------

### Configure Edit Image Workflow

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/workflow-tethering

Minimal configuration for editing a single image. This setup includes essential callbacks like onPublish and onIntentChange.

```javascript
export function createEditImageWorkflowConfig(
  baseCallbacks,
  onIntentChangeHandler
) {
  return {
    appVersion: "2",
    callbacks: {
      ...baseCallbacks,
      onPublish: handleEditImagePublish,
      onIntentChange: onIntentChangeHandler,
    },
  };
}
```

--------------------------------

### Create Design with Template using V4 API

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/migration-v3-v4

Initiates an editor workflow starting with an Adobe Express template ID using the V4 API.

```javascript
CCEverywhere.editor.createWithTemplate()
```

--------------------------------

### CCEverywhere Initialization API

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/3p/cc-everywhere/variables/default

The `initialize` method is the primary API for setting up the SDK. It should be called only once to establish the CCEverywhere instance.

```APIDOC
## POST /initialize

### Description
Initializes the SDK and returns a CCEverywhere object for further interactions. This method should be called only once.

### Method
POST

### Endpoint
/initialize

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **hostInfo** (HostInfo) - Required - Information about the host environment.
- **configParams** (ConfigParamsBase) - Optional - Configuration parameters for the SDK.
- **authOption** (AuthOption) - Optional - Authentication configuration.
- **clientAuthProvider** (ClientAuthProvider) - Optional - Client authentication provider for fetching client authentication details.

### Request Example
```json
{
  "hostInfo": { ... },
  "configParams": { ... },
  "authOption": { ... },
  "clientAuthProvider": { ... }
}
```

### Response
#### Success Response (200)
- **CCEverywhere** (Promise<CCEverywhere>) - A promise that resolves with the CCEverywhere object, which provides access to other SDK APIs.

#### Response Example
```json
{
  "CCEverywhere": { ... }
}
```
```

--------------------------------

### Image Editing Module API

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/migration-v3-v4

Use this API to start editing an asset using the image module. This is part of the new Module Workflow introduced in V4.

```javascript
CCEverywhere.module.editImage
```

--------------------------------

### Initialize Adobe Express SDK and Configure Workflows

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/full-editor

Initializes the SDK instance and defines the callback handlers and configuration objects required for document creation and editing.

```javascript
const { editor } = await window.CCEverywhere.initialize(
  hostInfo, configParams
);

// Will hold the project ID when a document is saved on Adobe Express
var existingProjectId = null;
var expressImage = document.getElementById("savedImage");

// Callbacks to be used when creating or editing a document
const callbacks = {
  onCancel: () => {},
  onPublish: (intent, publishParams) => {
    existingProjectId = publishParams.projectId;
    console.log("Project ID", existingProjectId);
    expressImage.src = publishParams.asset[0].data;
    console.log("Image data", publishParams.asset[0].data);
    // enable the editDesign button
    document.getElementById("editBtn").disabled = false;
  },
  onError: (err) => {
    console.error("Error!", err.toString());
  },
};

// Configuration for the app, shared by both Create and Edit flows
const appConfig = { selectedCategory: "media", callbacks };

// Configuration for the export options made available
// to the user when creating or editing a document
const exportConfig = [
  {
    id: "download",
    label: "Download",
    action: { target: "download" },
    style: { uiType: "button" },
  },
  {
    id: "save-modified-asset",
    label: "Save image",
    action: { target: "publish" },
    style: { uiType: "button" },
  },
];

// Click handler for the Create Design button
document.getElementById("createBtn").onclick = async () => {
  // Presetting the canvas size
  let docConfig = { canvasSize: "BusinessCard" };
  // Using the global appConfig and exportConfig
  editor.create(docConfig, appConfig, exportConfig);
};

// Click handler for the Edit Design button
document.getElementById("editBtn").onclick = async () => {
```

--------------------------------

### ImageConceptStyle Enumeration

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/shared/src/types/panel-settings-types/enumerations/image-concept-style

The ImageConceptStyle enumeration sets the conceptual mood and emotional tone for your image. These styles define the abstract feeling or conceptual approach that guides the image.

```APIDOC
## Enumeration: ImageConceptStyle

Sets the conceptual mood and emotional tone for your image. These styles define the abstract feeling or conceptual approach that guides the image.

### Enumeration Members

- **CHAOTIC**: "chaotic"
- **KITSCHY**: "kitschy"
- **NOSTALGIC**: "nostalgic"
- **BEAUTIFUL**: "beautiful"
- **DIVINE**: "divine"
- **SIMPLE**: "simple"
```

--------------------------------

### Initialize Adobe Express Embed SDK

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/generate-image

Imports necessary Spectrum Web Components and the Adobe Express Embed SDK to initialize the environment.

```javascript
// Import theme and typography styles from Spectrum Web Components
import "@spectrum-web-components/styles/typography.css";
import "@spectrum-web-components/theme/express/theme-light.js";
import "@spectrum-web-components/theme/express/scale-medium.js";
import "@spectrum-web-components/theme/sp-theme.js";

// Import Spectrum Web Components
import "@spectrum-web-components/button/sp-button.js";
import "@spectrum-web-components/button-group/sp-button-group.js";
import "@spectrum-web-components/divider/sp-divider.js";
import "./style.css";

// Import the Adobe Express Embed SDK
await import("https://cc-embed.adobe.com/sdk/v4/CCEverywhere.js");
console.log("CCEverywhere loaded", window.CCEverywhere);
```

--------------------------------

### Embed SDK Project Structure Overview

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/workflow-tethering

Understand the modular architecture of the Embed SDK project, including configuration, utilities, workflows, and UI files.

```txt
.\n├── package.json                📦 Project configuration\n├── vite.config.js              🔧 Build configuration\n└── src\n    ├── main.js                 🎯 Main orchestration\n    ├── utils/\n    │   └── shared.js           🔧 Common utilities & state management\n    ├── config/\n    │   ├── exportConfigs.js    📋 All export button configurations\n    │   └── appConfigs.js       ⚙️ App configuration factory\n    ├── workflows/\n    │   ├── generateToEdit.js   🖼️ Generate Image → Edit Image workflow\n    │   └── editToFullEditor.js ✨ Edit Image → Full Editor workflow\n    ├── index.html              🌐 UI container\n    └── style.css               🎨 CSS styles
```

--------------------------------

### Get DOM Element References

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/workflow-tethering

Access references to specific DOM elements used for image display and interaction. Ensure these elements exist in the HTML before calling these references.

```javascript
export const generateImage = document.getElementById("image1");
export const expressImage = document.getElementById("image2");
```

--------------------------------

### Start Edit Image Workflow

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/workflow-tethering

Initiates the Edit Image workflow when a user clicks the 'Edit Image' button. Ensure necessary imports and configurations are set up before calling this function.

```javascript
//... other imports...
import { startEditImageExportConfig } from "./config/exportConfigs.js";
import { createEditImageAppConfig   } from "./config/appConfigs.js";

//... Import and initialize the SDK...

// Create the Edit Image workflow appConfig using the factory function
const editImageAppConfig = createEditImageAppConfig();

// Click handler for the Edit Image button
document.getElementById("editBtn").onclick = async () => {
  // Set workflow tracking
  setCurrentWorkflow("edit");

  const docConfig = {
    asset: {
      type: "image",
      name: "Demo Image",
      dataType: "blob",
      data: currentImageBlob, // Use cached blob (default or user-selected)    },
  };

  module.editImage(docConfig, editImageAppConfig, startEditImageExportConfig);
};

```

--------------------------------

### Initialize QuickActionWorkflow

Source: https://developer.adobe.com/express/embed-sdk/docs/v4/sdk/src/workflows/3p/quick-action-workflow/classes/quick-action-workflow

Instantiate a new QuickActionWorkflow object using the required action manager and SDK context.

```ts
new QuickActionWorkflow(actionManager, context): QuickActionWorkflow;
```

--------------------------------

### Configure WKWebView and Handle Popups

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-webview

Implements WKUIDelegate methods to manage popup window creation and lifecycle within the web view.

```swift
return WKUserScript(source: source, injectionTime: .atDocumentStart, forMainFrameOnly: true)
    }

    func webView(
        _: WKWebView,
        createWebViewWith configuration: WKWebViewConfiguration,
        for navigationAction: WKNavigationAction,
        windowFeatures _: WKWindowFeatures
    ) -> WKWebView? {
        newWebviewPopupWindow = WKWebView(frame: view.bounds, configuration: configuration)
        newWebviewPopupWindow!.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        newWebviewPopupWindow!.navigationDelegate = self
        newWebviewPopupWindow!.uiDelegate = self
        self.setCustomUserAgent(for: newWebviewPopupWindow!)

        // Set content insets for safe areas
        let topInset = view.safeAreaInsets.top
        newWebviewPopupWindow!.scrollView.contentInset = UIEdgeInsets(top: topInset, left: 0, bottom: 0, right: 0)
        newWebviewPopupWindow!.scrollView.scrollIndicatorInsets = newWebviewPopupWindow!.scrollView.contentInset

        view.addSubview(newWebviewPopupWindow!)
        return newWebviewPopupWindow!
    }

    func webViewDidClose(_ webView: WKWebView) {
        webView.removeFromSuperview()
        newWebviewPopupWindow = nil
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(webView)
```

--------------------------------

### Initialize SDK with Mobile Web Support

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-browser

Use the skipBrowserSupportCheck parameter to bypass compatibility checks and enable SDK initialization on mobile browsers.

```javascript
const hostInfo = {
  clientId: "your-client-id", // Your application client ID
  appName: "your-app-name", // Your application name
};

// Skip browser compatibility checks for mobile web
const configParams = {
  skipBrowserSupportCheck: true // 👈 Skip browser checks to prevent failures
};

// Initialize the Adobe Express Embed SDK
const { editor, module, quickAction } = await window.CCEverywhere.initialize(
  hostInfo,
  configParams
);
```

--------------------------------

### Disable Pinch-to-Zoom with Viewport Meta Tag

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-webview

Injects a viewport meta tag at document start to prevent pinch-to-zoom and ensure consistent layout. This script should be used when precise viewport control is necessary.

```swift
private func getZoomDisableScript() -> WKUserScript {
    let source = """
    var meta = document.createElement('meta');
    meta.name = 'viewport';
    meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover';
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(meta);
    """
    return WKUserScript(source: source, injectionTime: .atDocumentStart, forMainFrameOnly: true)
}
```

--------------------------------

### HTML Structure for Embed SDK Example

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/edit-image

This HTML code sets up the basic structure for embedding the Adobe Express SDK. It includes a theme provider, a container for content, and elements for image display and interaction.

```html
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Embed SDK Sample</title>
</head>

<body>
  <sp-theme scale="medium" color="light" system="express">
    <div class="container">
      <header>
        <h1>Adobe Express Embed SDK</h1>
        <sp-divider size="l"></sp-divider>
        <h2>Edit Image Sample</h2>
        <p>
          The <b>Edit Image</b> button launches an image editor instance.
        </p>
      </header>

      <main>
        <img id="image" src="./images/demo-image-1.jpg" alt="An Indian woman holding a cat" />
        <sp-button-group>
          <sp-button id="uploadBtn">Choose Image</sp-button>
          <sp-button id="editBtn">Edit Image</sp-button>
        </sp-button-group>
        <input type="file" id="fileInput" accept="image/*" style="display: none;" />
      </main>
    </div>
  </sp-theme>
</body>
</html>
```

--------------------------------

### Initialize SDK with Mobile Configuration

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-browser

Configures the SDK for mobile web environments by bypassing standard browser checks and setting specific platform categories.

```javascript
const hostInfo = {
  clientId: "your-client-id",
  appName: "your-app-name",
  appVersion: { major: 1, minor: 0 },
  platformCategory: "web" // Required for applications
};

const configParams = {
  skipBrowserSupportCheck: true, // Skip browser checks for mobile web
  locale: "en_US", // Optional: Set locale
  loginMode: "delayed" // Optional: Delay login until export
};

// Initialize with browser check bypass
const { editor, module, quickAction } = await window.CCEverywhere.initialize(
  hostInfo,
  configParams
);
```

--------------------------------

### Initialize Adobe Express Embed SDK

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/workflow-tethering

Imports required modules and initializes the SDK with client credentials and configuration parameters.

```javascript
import "./style.css";

// Import our modular components
import {
  cacheDefaultImageBlob,
  handleFileSelection,
  setCurrentWorkflow,
  currentImageBlob,
} from "./utils/shared.js";
import {
  startGenImageExportConfig,
  startEditImageExportConfig,
} from "./config/exportConfigs.js";
import {
  createGenerateImageAppConfig,
  createEditImageAppConfig,
} from "./config/appConfigs.js";

// Import the Adobe Express Embed SDK
await import("https://cc-embed.adobe.com/sdk/v4/CCEverywhere.js");
console.log("CCEverywhere loaded", window.CCEverywhere);

// Parameters for initializing the Adobe Express Embed SDK
const hostInfo = {
  clientId: import.meta.env.VITE_API_KEY,
  appName: "Embed SDK Sample",
};

// Optional parameters - enable delayed login for Generate Image functionality
const configParams = {
  loginMode: "delayed",
};

// Initialize the Adobe Express Embed SDK
const { module } = await window.CCEverywhere.initialize(hostInfo, configParams);

// Initialize the application
await cacheDefaultImageBlob();

// Create workflow configurations
```

--------------------------------

### HTML Structure for Embed SDK Example

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/generate-image

This HTML file sets up the basic structure for embedding Adobe Express functionality. It includes a theme provider, a container for content, and a header with a title, subtitle, and descriptive paragraph. A placeholder image is also included.

```html
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Embed SDK Sample</title>
</head>

<body>
  <sp-theme scale="medium" color="light" system="express">
    <div class="container">
      <header>
        <h1>Adobe Express Embed SDK</h1>
        <sp-divider size="l"></sp-divider>
        <h2>Generate Image Sample</h2>
        <p>
          The <b>Generate Image</b> button generates an image from the current project.
        </p>
      </header>

      <main>
        <img id="savedImage" src="https://placehold.co/300x300?text=Placeholder+Image&font=source-sans-pro"
          alt="Your design will appear here." />

```

--------------------------------

### Initialize Editor with Project ID

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/full-editor

Configures the editor to open an existing project using its ID and global application settings.

```javascript
// Opening the existing project by ID
let docConfig = { documentId: existingProjectId };
// Using the global appConfig and exportConfig
editor.edit(docConfig, appConfig, exportConfig);
};
```

--------------------------------

### Basic HTML Structure

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/generate-image

A standard HTML5 boilerplate for the Embed SDK sample page.

```html
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Embed SDK Sample</title>
</head>
```

--------------------------------

### Implement V4 Separated Parameters

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/migration-v3-v4

Organizes configuration into four distinct objects for better modularity and moves callbacks to initialization.

```javascript
// V4 - Organized into four distinct parameter objects
const docConfig = { canvasSize: { width: 800, height: 600 } };
const appConfig = { /* application settings */ };
const exportConfig = { format: 'jpeg' };
const containerConfig = { backgroundColor: 'white' };

// Usage (callbacks moved to initialization)
await ccEverywhere.editor.create(docConfig, appConfig, exportConfig, containerConfig);
```

--------------------------------

### Configure Web View and Handle Button Press in Swift

Source: https://developer.adobe.com/express/embed-sdk/docs/guides/concepts/mobile-web-support-webview

Configures the layout of a subview and implements an action to load a URL into a web view.

```swift
view.bringSubviewToFront(footer)

            if let button = loadButton {
                button.frame.origin.x = buttonPadding
                button.frame.origin.y = topPadding
                button.frame.size.width = footer.frame.width - (buttonPadding * 2)
                button.frame.size.height = buttonHeight
            }
        }
    }

    @IBAction func loadButtonPressed(_ sender: UIButton) {
        guard let url = URL(string: "your-embed-experience-url") else { return } // 👈 Replace with your URL
        let urlRequest = URLRequest(url: url)
        webView.load(urlRequest)
    }
}
```