From 2018b17a31e991acc39c284a987200ee3577dfb9 Mon Sep 17 00:00:00 2001 From: BaskarMitrah Date: Fri, 5 Jun 2026 15:09:10 +0530 Subject: [PATCH 1/3] update : readme file --- README.md | 105 +++++++++++++++++++++++++++ code-samples/demo-app/README.md | 123 ++++++++++++++++++++++++++++++++ 2 files changed, 228 insertions(+) create mode 100644 code-samples/demo-app/README.md diff --git a/README.md b/README.md index 7fc48f3..2d3fa6d 100644 --- 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`, `modalParams` | + +### Editor (`editor`) + +Full Adobe Express editor workflows—create blank designs, edit saved projects, or start from an asset or template. + +| 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`) + +Focused workflows without launching the full editor for every task. + +| 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`) + +Single-purpose tools. Most samples accept an uploaded file, then run the action in a modal. + +#### 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 new file mode 100644 index 0000000..852ee26 --- /dev/null +++ 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`) + +Full Adobe Express editor workflows—create blank designs, edit saved projects, or start from an asset or template. + +| 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`) + +Focused workflows without launching the full editor for every task. + +| 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`) + +Single-purpose tools. Most samples accept an uploaded file, then run the action in a modal. + +### 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- +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) From 033f18dcafe91d90d0060d9318f65dae2473b031 Mon Sep 17 00:00:00 2001 From: BaskarMitrah Date: Fri, 5 Jun 2026 16:52:23 +0530 Subject: [PATCH 2/3] update : module description --- README.md | 8 ++++---- code-samples/demo-app/README.md | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 2d3fa6d..e9bd0d6 100644 --- a/README.md +++ b/README.md @@ -63,11 +63,11 @@ After `CCEverywhere.initialize()`, the SDK exposes three APIs. Each sample calls | --- | --- | | `editor` | `docConfig`, `appConfig`, `exportConfig`, `containerConfig` | | `module` | `docConfig`, `appConfig`, `exportConfig`, `containerConfig` | -| `quickAction` | `docConfig`, `appConfig`, `exportConfig`, `modalParams` | +| `quickAction` | `docConfig`, `appConfig`, `exportConfig`, `containerConfig` | ### Editor (`editor`) -Full Adobe Express editor workflows—create blank designs, edit saved projects, or start from an asset or template. +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 | | --- | --- | --- | @@ -78,7 +78,7 @@ Full Adobe Express editor workflows—create blank designs, edit saved projects, ### Modules (`module`) -Focused workflows without launching the full editor for every task. +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 | | --- | --- | --- | @@ -89,7 +89,7 @@ Focused workflows without launching the full editor for every task. ### Quick actions (`quickAction`) -Single-purpose tools. Most samples accept an uploaded file, then run the action in a modal. +Fast editing tools for images and videos—ideal for quick touch-ups or adjustments for social media and marketing content. #### Image diff --git a/code-samples/demo-app/README.md b/code-samples/demo-app/README.md index 852ee26..468e453 100644 --- a/code-samples/demo-app/README.md +++ b/code-samples/demo-app/README.md @@ -23,7 +23,7 @@ After `CCEverywhere.initialize()`, the SDK exposes three APIs. Each sample calls ## Editor (`editor`) -Full Adobe Express editor workflows—create blank designs, edit saved projects, or start from an asset or template. +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 | | --- | --- | --- | @@ -34,7 +34,7 @@ Full Adobe Express editor workflows—create blank designs, edit saved projects, ## Modules (`module`) -Focused workflows without launching the full editor for every task. +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 | | --- | --- | --- | @@ -45,7 +45,7 @@ Focused workflows without launching the full editor for every task. ## Quick actions (`quickAction`) -Single-purpose tools. Most samples accept an uploaded file, then run the action in a modal. +Fast editing tools for images and videos—ideal for quick touch-ups or adjustments for social media and marketing content. ### Image From a5bfb1c296fe6514980b735d8d9855dd125d83ae Mon Sep 17 00:00:00 2001 From: BaskarMitrah Date: Tue, 7 Jul 2026 16:32:53 +0530 Subject: [PATCH 3/3] update version 2 in the template browser --- .../src/index.html | 8 +++ .../embed-sdk-start-from-template/src/main.js | 58 ++++++++++++------- .../src/style.css | 7 +++ 3 files changed, 52 insertions(+), 21 deletions(-) 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 index bd3366c..1467803 100644 --- 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 @@

Start from Template Sample

The Browse Templates button launches a template browser where users can select and customize professionally designed templates.

+ +
+

Select Template Version

+ +
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 index 7f41565..21c0cc0 100644 --- 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 index acc2962..9ffd588 100644 --- 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; +}