AdobeDocs · BaskarMitrah · Jun 5, 2026 · Jun 5, 2026 · Jul 7, 2026
diff --git a/README.md b/README.md
@@ -5,14 +5,119 @@ This repository contains a set of samples that demonstrate how to implement and
 > [!WARNING]
 > This repository is a work-in-progress: the samples are being added and updated regularly—please check back often, and excuse any temporary inconsistencies.
 
+## How to get started
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) (v18 or later recommended)
+- An [Adobe Express Embed SDK API key](https://developer.adobe.com/express/embed-sdk/docs/guides/quickstart/)
+
+### Run a sample
+
+Each sample is a standalone Vite project. To run one:
+
+1. **Get an API key** — Follow the [Quickstart guide](https://developer.adobe.com/express/embed-sdk/docs/guides/quickstart/) to create an Embed SDK API key. When configuring the key, allowlist `localhost:5555` for local development.
+
+2. **Choose a sample** — Pick a project from [`tutorials`](./code-samples/tutorials/README.md) (guided lessons) or [`demo-app`](#demo-app-samples) (one sample per SDK method). For your first run, try [`embed-sdk-getting-started`](./code-samples/tutorials/embed-sdk-getting-started/README.md) or [`embed-sdk-full-editor`](./code-samples/demo-app/embed-sdk-full-editor/README.md).
+
+3. **Configure the API key** — Open the sample’s `.env` file (usually in `src/`, or in the project root for some tutorials) and set your key:
+
+   ```bash
+   VITE_API_KEY="your-embed-sdk-api-key-allowlisting-localhost:5555"
+   ```
+
+4. **Install and start** — From the sample directory:
+
+   ```bash
+   npm install
+   npm start
+   ```
+
+5. **Open in the browser** — Go to [https://localhost:5555](https://localhost:5555). Samples use HTTPS via `vite-plugin-mkcert`; you may need to accept the local certificate on first visit.
+
+Each sample’s own `README.md` has feature-specific notes and links to related tutorials.
+
 ## Samples in this repository
 
 The `code-samples` folder contains the following collections:
 
 - [`tutorials`](./code-samples/tutorials/README.md): samples that are part of the Adobe Express Embed SDK tutorials on the [Adobe Developer](https://developer.adobe.com/express/embed-sdk/docs/guides/tutorials/) website.
+- [`demo-app`](#demo-app-samples): standalone demo applications—one folder per SDK method (see below).
 - [`cc-everywhere`](./code-samples/cc-everywhere/README.md): samples written by the Adobe Express Embed SDK engineering team, and originally distributed in the [`AdobeDocs/cc-everywhere`](https://github.com/AdobeDocs/cc-everywhere) repository.
 - [`contributed`](./code-samples/contributed/): code samples that cover various Embed SDK features.
 
+---
+
+## Demo app samples
+
+The [`demo-app`](./code-samples/demo-app/) folder contains standalone sample applications—one per Embed SDK capability. Each project is a complete Vite app with:
+
+- `src/main.js` — SDK initialization, configuration, and the API call
+- `src/index.html` — UI with a button to launch the workflow
+- `src/.env` — your `VITE_API_KEY`
+- `vite.config.js` — HTTPS dev server on port `5555`
+
+After `CCEverywhere.initialize()`, the SDK exposes three APIs. Each sample calls one SDK method and passes a standard set of configuration objects:
+
+| API | Parameters |
+| --- | --- |
+| `editor` | `docConfig`, `appConfig`, `exportConfig`, `containerConfig` |
+| `module` | `docConfig`, `appConfig`, `exportConfig`, `containerConfig` |
+| `quickAction` | `docConfig`, `appConfig`, `exportConfig`, `containerConfig` |
+
+### Editor (`editor`)
+
+Embed the complete Adobe Express editor on your website—with thousands of templates and assets for creating logos, banners, flyers, and other marketing content.
+
+| Sample | SDK method | Description |
+| --- | --- | --- |
+| [embed-sdk-full-editor](./code-samples/demo-app/embed-sdk-full-editor/) | `editor.create()` | Create a new blank design. |
+| [embed-sdk-full-editor](./code-samples/demo-app/embed-sdk-full-editor/) | `editor.edit()` | Re-open a saved project by `documentId`. |
+| [embed-sdk-create-from-asset](./code-samples/demo-app/embed-sdk-create-from-asset/) | `editor.createWithAsset()` | Open the editor from an uploaded image or video. |
+| [embed-sdk-create-with-template](./code-samples/demo-app/embed-sdk-create-with-template/) | `editor.createWithTemplate()` | Open the editor with a pre-selected template. |
+
+### Modules (`module`)
+
+Mini-editing experiences for focused creative tasks—without loading the full editor. Covers image editing, AI image generation, template browsing, and design viewing.
+
+| Sample | SDK method | Description |
+| --- | --- | --- |
+| [embed-sdk-edit-image](./code-samples/demo-app/embed-sdk-edit-image/) | `module.editImage()` | Edit an image in the image module. |
+| [embed-sdk-create-image-from-text](./code-samples/demo-app/embed-sdk-create-image-from-text/) | `module.createImageFromText()` | Generate images from a text prompt (Firefly). |
+| [embed-sdk-start-from-template](./code-samples/demo-app/embed-sdk-start-from-template/) | `module.startFromContent()` | Browse and pick from Adobe Express templates. |
+| [embed-sdk-view-design](./code-samples/demo-app/embed-sdk-view-design/) | `module.viewDesign()` | View an existing design in read-only mode. |
+
+### Quick actions (`quickAction`)
+
+Fast editing tools for images and videos—ideal for quick touch-ups or adjustments for social media and marketing content.
+
+#### Image
+
+| Sample | SDK method | Description |
+| --- | --- | --- |
+| [embed-sdk-remove-background](./code-samples/demo-app/embed-sdk-remove-background/) | `quickAction.removeBackground()` | Remove the background from an image. |
+| [embed-sdk-crop-image](./code-samples/demo-app/embed-sdk-crop-image/) | `quickAction.cropImage()` | Crop an image. |
+| [embed-sdk-resize-image](./code-samples/demo-app/embed-sdk-resize-image/) | `quickAction.resizeImage()` | Resize an image. |
+| [embed-sdk-convert-to-png](./code-samples/demo-app/embed-sdk-convert-to-png/) | `quickAction.convertToPNG()` | Convert an image to PNG. |
+| [embed-sdk-convert-to-jpg](./code-samples/demo-app/embed-sdk-convert-to-jpg/) | `quickAction.convertToJPEG()` | Convert an image to JPEG. |
+| [embed-sdk-convert-to-svg](./code-samples/demo-app/embed-sdk-convert-to-svg/) | `quickAction.convertToSVG()` | Convert an image to SVG. |
+| [embed-sdk-generate-qr-code](./code-samples/demo-app/embed-sdk-generate-qr-code/) | `quickAction.generateQRCode()` | Generate a QR code. |
+
+#### Video
+
+| Sample | SDK method | Description |
+| --- | --- | --- |
+| [embed-sdk-crop-video](./code-samples/demo-app/embed-sdk-crop-video/) | `quickAction.cropVideo()` | Crop a video. |
+| [embed-sdk-resize-video](./code-samples/demo-app/embed-sdk-resize-video/) | `quickAction.resizeVideo()` | Resize a video. |
+| [embed-sdk-trim-video](./code-samples/demo-app/embed-sdk-trim-video/) | `quickAction.trimVideo()` | Trim a video. |
+| [embed-sdk-merge-videos](./code-samples/demo-app/embed-sdk-merge-videos/) | `quickAction.mergeVideos()` | Merge multiple videos. |
+| [embed-sdk-caption-video](./code-samples/demo-app/embed-sdk-caption-video/) | `quickAction.captionVideo()` | Add captions to a video. |
+| [embed-sdk-convert-to-mp4](./code-samples/demo-app/embed-sdk-convert-to-mp4/) | `quickAction.convertToMP4()` | Convert media to MP4. |
+| [embed-sdk-convert-to-gif](./code-samples/demo-app/embed-sdk-convert-to-gif/) | `quickAction.convertToGIF()` | Convert media to GIF. |
+| [embed-sdk-animate-from-audio](./code-samples/demo-app/embed-sdk-animate-from-audio/) | `quickAction.animateFromAudio()` | Create an animation from an audio file. |
+
+---
+
 ## Resources
 
 Please refer to the [Adobe Express Embed SDK Overview](https://developer.adobe.com/express/embed-sdk/docs/guides/) on the Adobe Developer website for more information, or visit the [Adobe Express Embed SDK Community Forum](https://community.adobe.com/t5/adobe-express-embed-sdk/ct-p/ct-express-embed-sdk?page=1&sort=latest_replies&lang=all&tabid=all) to ask questions and get help.

diff --git a/code-samples/demo-app/README.md b/code-samples/demo-app/README.md
@@ -0,0 +1,123 @@
+# Adobe Express Embed SDK demo applications
+
+The `demo-app` folder contains standalone sample applications—one per Embed SDK capability. Each project is a complete Vite app you can run locally to see how a specific API is wired up, configured, and called from your host application.
+
+Every sample follows the same structure:
+
+- `src/main.js` — SDK initialization, configuration, and the API call
+- `src/index.html` — UI with a button to launch the workflow
+- `src/.env` — your `VITE_API_KEY`
+- `vite.config.js` — HTTPS dev server on port `5555`
+
+See the [repository getting started guide](../../README.md#how-to-get-started) for setup steps.
+
+---
+
+After `CCEverywhere.initialize()`, the SDK exposes three APIs. Each sample calls one SDK method and passes a standard set of configuration objects:
+
+| API | Parameters |
+| --- | --- |
+| `editor` | `docConfig`, `appConfig`, `exportConfig`, `containerConfig` |
+| `module` | `docConfig`, `appConfig`, `exportConfig`, `containerConfig` |
+| `quickAction` | `docConfig`, `appConfig`, `exportConfig`, `containerConfig` |
+
+## Editor (`editor`)
+
+Embed the complete Adobe Express editor on your website—with thousands of templates and assets for creating logos, banners, flyers, and other marketing content.
+
+| Sample | SDK method | Description |
+| --- | --- | --- |
+| [embed-sdk-full-editor](./embed-sdk-full-editor/) | `editor.create()` | Create a new blank design (e.g. business card canvas). |
+| [embed-sdk-full-editor](./embed-sdk-full-editor/) | `editor.edit()` | Re-open a saved project by `documentId`. |
+| [embed-sdk-create-from-asset](./embed-sdk-create-from-asset/) | `editor.createWithAsset()` | Open the editor starting from an uploaded image or video. |
+| [embed-sdk-create-with-template](./embed-sdk-create-with-template/) | `editor.createWithTemplate()` | Open the editor with a pre-selected template (`templateId`). |
+
+## Modules (`module`)
+
+Mini-editing experiences for focused creative tasks—without loading the full editor. Covers image editing, AI image generation, template browsing, and design viewing.
+
+| Sample | SDK method | Description |
+| --- | --- | --- |
+| [embed-sdk-edit-image](./embed-sdk-edit-image/) | `module.editImage()` | Edit an image in the image module. |
+| [embed-sdk-create-image-from-text](./embed-sdk-create-image-from-text/) | `module.createImageFromText()` | Generate images from a text prompt (Firefly). |
+| [embed-sdk-start-from-template](./embed-sdk-start-from-template/) | `module.startFromContent()` | Browse and pick from Adobe Express templates. |
+| [embed-sdk-view-design](./embed-sdk-view-design/) | `module.viewDesign()` | View an existing design in read-only mode. |
+
+## Quick actions (`quickAction`)
+
+Fast editing tools for images and videos—ideal for quick touch-ups or adjustments for social media and marketing content.
+
+### Image
+
+| Sample | SDK method | Description |
+| --- | --- | --- |
+| [embed-sdk-remove-background](./embed-sdk-remove-background/) | `quickAction.removeBackground()` | Remove the background from an image. |
+| [embed-sdk-crop-image](./embed-sdk-crop-image/) | `quickAction.cropImage()` | Crop an image. |
+| [embed-sdk-resize-image](./embed-sdk-resize-image/) | `quickAction.resizeImage()` | Resize an image. |
+| [embed-sdk-convert-to-png](./embed-sdk-convert-to-png/) | `quickAction.convertToPNG()` | Convert an image to PNG. |
+| [embed-sdk-convert-to-jpg](./embed-sdk-convert-to-jpg/) | `quickAction.convertToJPEG()` | Convert an image to JPEG. |
+| [embed-sdk-convert-to-svg](./embed-sdk-convert-to-svg/) | `quickAction.convertToSVG()` | Convert an image to SVG. |
+| [embed-sdk-generate-qr-code](./embed-sdk-generate-qr-code/) | `quickAction.generateQRCode()` | Generate a QR code. |
+
+### Video
+
+| Sample | SDK method | Description |
+| --- | --- | --- |
+| [embed-sdk-crop-video](./embed-sdk-crop-video/) | `quickAction.cropVideo()` | Crop a video. |
+| [embed-sdk-resize-video](./embed-sdk-resize-video/) | `quickAction.resizeVideo()` | Resize a video. |
+| [embed-sdk-trim-video](./embed-sdk-trim-video/) | `quickAction.trimVideo()` | Trim a video. |
+| [embed-sdk-merge-videos](./embed-sdk-merge-videos/) | `quickAction.mergeVideos()` | Merge multiple videos. |
+| [embed-sdk-caption-video](./embed-sdk-caption-video/) | `quickAction.captionVideo()` | Add captions to a video. |
+| [embed-sdk-convert-to-mp4](./embed-sdk-convert-to-mp4/) | `quickAction.convertToMP4()` | Convert media to MP4. |
+| [embed-sdk-convert-to-gif](./embed-sdk-convert-to-gif/) | `quickAction.convertToGIF()` | Convert media to GIF. |
+| [embed-sdk-animate-from-audio](./embed-sdk-animate-from-audio/) | `quickAction.animateFromAudio()` | Create an animation from an audio file. |
+
+---
+
+## Common patterns across samples
+
+### Initialization
+
+```javascript
+await import("https://cc-embed.adobe.com/sdk/v4/CCEverywhere.js");
+
+const hostInfo = {
+  clientId: import.meta.env.VITE_API_KEY,
+  appName: "Embed SDK Sample",
+};
+
+const { editor, module, quickAction } = await window.CCEverywhere.initialize(hostInfo, {
+  loginMode: "delayed",
+});
+```
+
+Only destructure the API you need (`editor`, `module`, or `quickAction`).
+
+### Callbacks
+
+```javascript
+callbacks: {
+  onPublish: (intent, publishParams) => {
+    // publishParams.asset[0].data — image/video URL or base64
+    // publishParams.projectId — saved project ID (editor flows)
+  },
+}
+```
+
+---
+
+## Running any demo app
+
+```bash
+cd embed-sdk-<sample-name>
+npm install
+npm start
+```
+
+Open [https://localhost:5555](https://localhost:5555). Ensure your API key allowlists `localhost:5555`.
+
+## Learn more
+
+- [Embed SDK documentation](https://developer.adobe.com/express/embed-sdk/docs/)
+- [Tutorials](../tutorials/README.md)
+- [cc-everywhere samples](../cc-everywhere/README.md)
diff --git a/code-samples/demo-app/embed-sdk-start-from-template/src/index.html b/code-samples/demo-app/embed-sdk-start-from-template/src/index.html
@@ -17,6 +17,14 @@ <h2>Start from Template Sample</h2>
         <p>
           The <b>Browse Templates</b> button launches a template browser where users can select and customize professionally designed templates.
         </p>
+
+        <div class="template-version-container">
+          <h3>Select Template Version</h3>
+          <select id="templateVersion">
+            <option value="v1">Version 1</option>
+            <option value="v2">Version 2</option>
+          </select>
+        </div>
       </header>
 
       <main>

diff --git a/code-samples/demo-app/embed-sdk-start-from-template/src/main.js b/code-samples/demo-app/embed-sdk-start-from-template/src/main.js
@@ -41,6 +41,7 @@ const configParams = {
 const { module } = await window.CCEverywhere.initialize(hostInfo, configParams);
 
 const outputContainer = document.getElementById("output-container");
+const templateVersion = document.getElementById("templateVersion");
 
 // Helper function to display output
 const displayOutput = (data, type) => {
@@ -85,28 +86,43 @@ const containerConfig = {
 
 // Launch Start from Template module
 document.getElementById("browseBtn").onclick = () => {
-  const appConfig = {
-    colorTheme: "light",
-    contentBrowseConfig: {
-      headerText: "Jump-start your inspiration with thousands of professionally designed templates",
-      searchQuery: "Instagram story",
-      hideSearchBar: false,
-      hideFilters: false,
-      shortcutPillTerms: ["Social", "Business", "Events", "Personal", "Creative"],
-      categoriesConfig: [{ category: "templates" }],
+  const callbacks = {
+    onPublish: (intent, publishParams) => {
+      console.log("intent", intent);
+      console.log("publishParams", publishParams);
+      const localData = publishParams.asset[0].data;
+      const assetType = publishParams.asset[0].type || "image";
+      displayOutput(localData, assetType);
+      window.CCEverywhere.close();
     },
-    callbacks: {
-      onPublish: (intent, publishParams) => {
-        console.log("intent", intent);
-        console.log("publishParams", publishParams);
-        const localData = publishParams.asset[0].data;
-        const assetType = publishParams.asset[0].type || "image";
-        displayOutput(localData, assetType);
-        window.CCEverywhere.close();
+    onIntentChange: () => ({ exportConfig }),
+  }
+  let appConfig;
+  if (templateVersion.value === "v1") {
+    appConfig = {
+      colorTheme: "light",
+      contentBrowseConfig: {
+        headerText: "Jump-start your inspiration with thousands of professionally designed templates",
+        searchQuery: "Instagram story",
+        hideSearchBar: false,
+        hideFilters: false,
+        shortcutPillTerms: ["Social", "Business", "Events", "Personal", "Creative"],
+        categoriesConfig: [{ category: "templates" }],
       },
-      onIntentChange: () => ({ exportConfig }),
-    },
-  };
-
+      callbacks
+    }
+  }
+  else {
+    appConfig = {
+      appVersion: "2",
+      templatesHomeConfig: {
+        tabs: [
+          "yourStuff",
+          "customTemplates",
+        ]
+      },
+      callbacks
+    }
+  }
   module.startFromContent(appConfig, null, containerConfig);
 };
diff --git a/code-samples/demo-app/embed-sdk-start-from-template/src/style.css b/code-samples/demo-app/embed-sdk-start-from-template/src/style.css
@@ -96,3 +96,10 @@ sp-button-group {
   justify-content: center;
   margin-bottom: 40px;
 }
+
+.template-version-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap:20px;
+}