DocumentationAEMUser Guide

Integrate Content Fragment Creator using React integrate-content-fragment-creator-using-react

Last update: August 6, 2026
  • Applies to:
  • Experience Manager as a Cloud Service

CREATED FOR:

  • Admin
  • User
  • Developer

You can integrate a React application with Adobe Experience Manager (AEM) as a Cloud repository and create Content Fragments from within that application.

The integration is done by importing the Content Fragment Creator package and connecting to the AEM as a Cloud Service using the React library. Edit an index.html or any appropriate file within your application to:

  • Define the authentication details
  • Access the AEM as a Cloud Service repository
  • Configure the Content Fragment Creator display properties

You can perform authentication without defining some of the IMS properties, if you:

  • are integrating an Adobe application on Unified Shell
  • already have an IMS token generated for authentication

Example - React example-react

CreateContentFragmentDialog does not include a built-in sign-in flow — it expects a valid imsToken to already be available. For example, from an ImsAuthService you registered separately, or from your host application’s own auth.

import {
    CreateContentFragmentDialog,
    type CreateContentFragmentDialogProps,
} from '@aem-sites/content-fragment-creator';

const MyComponent = () => {
    const [open, setOpen] = React.useState(false);
    const repoId = 'author-pXXXXX-eYYYYY.adobeaemcloud.com';
    // Obtain this from your own auth flow (e.g. an ImsAuthService instance) —
    // CreateContentFragmentDialog does not fetch a token for you.
    const imsToken = getImsTokenFromYourAuthFlow();

    const onCreate = (contentFragment) => {
        console.log('Created content fragment:', contentFragment);
        // Handle the created content fragment (e.g., update state, show a message, etc.)
    };

    return (
        <>
            <button onClick={() => setOpen(true)}>Create fragment</button>
            <CreateContentFragmentDialog
                open={open}
                onDismiss={() => setOpen(false)}
                repoId={repoId}
                imsToken={imsToken}
                orgId="YOUR_ORG_ID@AdobeOrg"
                locale="en-US"
                selectedFolder="/content/dam/myfolder"
                onCreate={onCreate}
            />
        </>
    );
};

For a complete, runnable version of this example — including obtaining the imsToken from an already-registered ImsAuthService before opening the dialog — see

The dialog is rendered via the @assets/microfrontend embed (iframe).

recommendation-more-help
experience-manager-cloud-service-help-main-toc