Editor Customization

Use Editor.AppConfig to customize the Adobe Express Embed SDK editor's behavior and appearance. This configuration object provides comprehensive control over the editor experience, from user interface elements to file handling capabilities.

What is Editor.AppConfig?

The Editor.AppConfig object is the primary interface for customizing the Adobe Express Embed SDK editor. Use this configuration object to:

Configuration Categories

The Editor.AppConfig object organizes configuration options into the following categories:

  1. Event Handling

    • Respond to editor events and user actions
    • Connect with your application's workflow

  2. Interface and Navigation

    • Control the editor's appearance and layout
    • Manage user navigation and panel views
    • Filter available templates and assets

  3. File Management and Export

    • Control supported file types and formats
    • Manage export and publishing options
    • Configure multi-page document support

  4. Canvas Display and Layout

    • Control visual elements and guides
    • Manage page margins and bleed areas
    • Customize the editing environment

Event Handling

callbacks

Define callback functions to handle editor events and integrate with your application's workflow.

const appConfig = {
  callbacks: {
    onPublish: (publishData) => {
      // Handle the published content
      console.log("User published content:", publishData);
      // Send to your backend, show success message, etc.
    },
    onCancel: () => {
      // Handle when user cancels editing
      console.log("User canceled editing");
    },
  },
};

Interface and Navigation

selectedCategory

Control which panel view displays by default when the editor loads.

const appConfig = {
  selectedCategory: "templates", // Start with template selection
};

categorySearchText

Pre-populate the search field with specific terms to filter content automatically.

const appConfig = {
  categorySearchText: "business cards", // Show business card templates
};

assetCollection

Filter available templates to a specific collection or category.

const appConfig = {
  assetCollection: "premium-business-templates", // Show only premium business templates
};

templateType

Specify the type of canvas template to use for new designs.

const appConfig = {
  templateType: "social-media", // Optimize for social media content
};

multiPage

Enable or disable support for multi-page documents.

const appConfig = {
  multiPage: false, // Restrict to single-page designs only
};

File Management and Export

allowedFileTypes

Restrict the file formats available for export and publishing to match your application's requirements.

const appConfig = {
  allowedFileTypes: ["image/png", "image/jpeg"], // Only allow image exports
};

Common configurations:

allowedSubFileTypes

Configure PDF export options when PDF format is enabled in allowedFileTypes.

const appConfig = {
  allowedFileTypes: ["application/pdf"],
  allowedSubFileTypes: ["pdfPrint"], // High-quality PDF for printing
};

Available PDF types:

Canvas Display and Layout

showPageMargin

Display page margin guides to help users design within printable areas.

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

When to enable:

showBleedArea

Display bleed area guides for designs that extend to the edge of printed materials.

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

When to enable:

canvasBackgroundColor

Set the default background color of the canvas to match your application's design or brand guidelines.

const appConfig = {
  canvasBackgroundColor: "#f5f5f5", // Light gray background
};

Common use cases:

Complete Configuration Example

This example demonstrates a comprehensive configuration for a marketing team's design workflow:

const appConfig = {
  // Event handling
  callbacks: {
    onPublish: (publishData) => {
      // Send published content to marketing asset library
      uploadToAssetLibrary(publishData);
      showSuccessNotification("Design saved to marketing library");
    },
    onCancel: () => {
      // Track cancellation for analytics
      trackEvent("editor_cancelled");
    },
  },

  // Interface and navigation
  selectedCategory: "templates",
  categorySearchText: "social media",
  assetCollection: "brand-approved-templates",
  templateType: "social-media",
  multiPage: false, // Single-page social media posts only

  // File management and export
  allowedFileTypes: ["image/png", "image/jpeg", "video/mp4"],
  // Note: PDF not needed for social media workflow

  // Canvas display (minimal for social media)
  showPageMargin: false,
  showBleedArea: false,
  canvasBackgroundColor: "#ffffff", // White background for clean designs
};

See a working implementation of these configuration options in the Adobe Express Embed SDK demo application.

Best Practices

Configuration Management

Event Handling

Performance and Integration

Configuration Decision Guide

Use this decision guide to determine which configuration options best fit your use case:

1. What type of content will users create?

Social Media Content

Print Materials

Web Graphics

Multi-page Documents

2. Do you need to control template access?

Curated Template Experience

Open Template Access

3. Do you need event handling?

Basic Integration

callbacks: {
  onPublish: (data) => handlePublishedContent(data);
}

Advanced Event Handling

callbacks: {
  onPublish: (data) => handlePublishedContent(data),
  onCancel: () => trackCancellation()
}

4. Implementation checklist