Expand my Community achievements bar.

Adobe Summit 2025: AEM Session Recordings Are Live! Missed a session or want to revisit your favorites? Watch the latest recordings now.
SOLVED

Is Experience Fragment supported in Edge Delivery Service with Document-Based Authoring?

Avatar

Level 2

Hi everyone,

I am exploring Edge Delivery Service (EDS) with document-based authoring and wanted to check if Experience Fragments (XFs) are supported in this approach. Specifically:

  • Can Experience Fragments be used in EDS when authoring content using documents (Google Docs, Word, etc.)?
  • If supported, how can they be included and rendered within EDS-powered pages?
  • If not supported, what are the recommended alternatives for reusing structured, styled content in document-based authoring?
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @SurabhiAc3 

EDS does support loading content from another page but it all client side, Please check fragment block

https://github.com/adobe/aem-block-collection/tree/main/blocks/fragment 

Arun Patidar

AEM LinksLinkedIn

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi @SurabhiAc3 

EDS does support loading content from another page but it all client side, Please check fragment block

https://github.com/adobe/aem-block-collection/tree/main/blocks/fragment 

Arun Patidar

AEM LinksLinkedIn

Avatar

Community Advisor

@SurabhiAc3 yes you should be able to load external html file into EDS.. you can create your own custom block and write JS to include html from external paths.

 

Please refer to below code from adobe docs on how they included header and footer.

 

import { getMetadata } from '../../scripts/aem.js';

import { loadFragment } from '../fragment/fragment.js';

 

...

 

export default async function decorate(block) {

  // load nav as fragment

 

  // Get the path to the AEM page fragment that defines the header content from the <meta name="nav"> tag. This is set via the site's Metadata file.

  const navMeta = getMetadata('nav');

 

  // If the navMeta is not defined, use the default path `/nav`.

  const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav';

 

  // Make an XHR (AJAX) call to request the AEM page fragment and serialize it to a HTML DOM tree.

  const fragment = await loadFragment(navPath);

 

  // Add the content from the fragment HTML to the block and decorate it as needed

  ...

}

 

https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/edge-delivery-services/dev...

 

 

Avatar

Administrator

@SurabhiAc3 Did you find the suggestions helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you !



Kautuk Sahni