Canva Apps SDK Starter Kit

The richtext_replacement example demonstrates how to programmatically replace and modify selected rich text elements within a Canva design. It covers:

• Formatting changes: Applying styles such as bold, italics, and other text properties.
• Advanced text selection: Manipulating how text is selected for editing.
• Formatting manipulation: Modifying existing text properties.

Important Production Considerations: This example is a demonstration and does not meet all requirements for a public app submission to Canva. When building production apps, you must:

• Replace hardcoded operations with user input interfaces or dynamic content.
• Implement robust handling for complex formatting scenarios to preserve user styling.
• Implement comprehensive error handling with clear user feedback.
• Implement internationalization using the @canva/app-i18n-kit package.
• For apps using intents, use the prepareDesignEditor function from src/intents/design_editor/index.tsx instead of the simplified structure used here.

The Text translation example demonstrates advanced text transformation patterns within a Canva App. It covers:

• Translation workflows: Implementing translation both with and without preserving existing text formatting.
• Bulk editing: Managing text transformations across multiple elements.
• Content session management: Handling the lifecycle of content changes.
• Complex replacement: Executing sophisticated text replacement workflows.

Note for Production Apps: This example is a demonstration and differs from production requirements in several ways:

• Translation Services: Use real translation services instead of the mock data provided here.
• Error Handling: Implement comprehensive error handling and user feedback.
• Formatting: Ensure robust handling of various text formats.
• Internationalization: Use the @canva/app-i18n-kit package to support multiple languages.
• Intents: For production apps using intents, it is recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx instead of the simplified structure used in this example.

When building a Canva app that supports multiple intents (e.g., both a Design Editor and a Content Publisher), use a modular structure where a central entry point initializes each intent separately.

Recommended Code Structure

1. Root Entry Point: The main entry file (e.g., src/index.tsx) should call a prepare function for every intent you want to support.
2. Intent Modules: Create a dedicated folder for each intent within a src/intents/ directory. Each folder should contain an index file that implements the specific intent contract.
3. App Configuration: Ensure your canva-app.json file includes both intents in its enrollment configuration.

Example Pattern

In src/index.tsx:

// Import implementations from their respective intent folders
import { DesignEditorIntent } from './intents/design_editor/index.tsx';
import { ContentPublisherIntent } from './intents/content_publisher/index.tsx';

// Call the prepare function for each intent
prepareDesignEditor(DesignEditorIntent);
prepareContentPublisher(ContentPublisherIntent);

This pattern demonstrates how to automate the process of filling design elements with data. The workflow involves three main steps:

1. Identify tagged fields: Use getDesignMetadata to read which elements in the current design have been tagged with specific field labels.
2. Match data fields: Use requestDataFieldMatching to allow the user to map their data source columns (e.g., "Name", "Role") to the labels tagged in the Canva design.
3. Apply data: Use autofillDesign to populate the tagged design elements with the values from a DataTable.

Note that the DataTable shape used here is defined by the DataTable type from @canva/intents/data, which is the same format returned by a Data Connector's getDataTable method.

import { 
  requestDataFieldMatching, 
  autofillDesign, 
  getDesignMetadata 
} from '@canva/design';
import { DataTable } from '@canva/intents/data';

// Example workflow logic:
// 1. const metadata = await getDesignMetadata();
// 2. await requestDataFieldMatching(sampleTable);
// 3. await autofillDesign(sampleTable);

When moving from this demonstration example to a production app intended for Canva review, you must implement the following improvements:

• Asset Hosting: Do not use static assets. Host assets on a CDN or hosting service and use the upload function from the @canva/asset package.
• Format Validation: Implement image format validation and handle unsupported formats gracefully.
• Error Handling: Implement comprehensive error handling with clear user feedback and graceful failure modes.
• Internationalization: Support multiple languages using the @canva/app-i18n-kit package.
• Intents Integration: For apps using intents, it is recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx.
• User Feedback: Replace basic loading states with detailed progress indicators for long-running operations.