Skip to main content
Level 2
Mar 10, 2025 12:54 PM UTC
Solved

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

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?
arunpatidar
arunpatidarAccepted solution
Community Advisor
Mar 10, 2025 5:01 PM UTC

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

3 replies

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
Mar 10, 2025 5:01 PM UTC

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 

Translate
Arun Patidar
Shashi_Mulugu
Community Advisor and User Group Leader
Community Advisor and User Group Leader
Mar 11, 2025 12:20 AM UTC

@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/developing/universal-editor/how-to/header-and-footer

 

 

Translate
kautuk_sahni
Level 9
Apr 16, 2025 12:12 PM UTC

@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 !

Translate
Kautuk Sahni