Reuse experience fragments in EDS | Community
Skip to main content
S
SCTech
Level 1
February 23, 2026
Solved

Reuse experience fragments in EDS

  • February 23, 2026
  • 3 replies
  • 61 views

I have a site running on AEMAACS, I would like to create few pages of my site using EDS (universal editor).

For the EDS pages, I want to re-use the header and footer from my AEMAACS site, which are experience fragments.

What would be the best possible solution in this case? How do I get the header and footer content from experience fragments and place them on my EDS site pages?

Best answer by BrianKasingli

​@SCTech ,  I hope this helps.

Re-use XF on Header and Footer on EDS website.

From one of the implementations at https://www.splunk.com/en_us/blog , their EDS blog runs under the same domain space as their AEM classic website. If you inspect the network tab in the browser, you can see that the page initially loads with an empty <header> element.

After the page loads, a network request is made to retrieve the header markup from their AEM classic site at:

https://www.splunk.com/en_us/blog/fragments/header.plain.html 
 

The .plain.html rendition returns clean HTML from the Experience Fragment. That HTML is then injected into the page by replacing the contents of the <header> element.
 

However, the .plain.html file only returns the markup. Any required JavaScript behavior and CSS styling must be re implemented separately within the EDS project. This is something I observed in production while analyzing how they reused their header.
 

The same approach is used for the footer. The Splunk blog makes a request to:

https://www.splunk.com/en_us/blog/fragments/footer.plain.html 
 

Once the response is returned, JavaScript replaces the contents of the <footer> element with the HTML from the .plain.html file. Again, any necessary JavaScript logic and CSS styling must be re implemented within the EDS site to ensure the footer behaves and looks correct.
 

This pattern allows the header and footer to remain centrally managed in AEM, while still being reused inside EDS pages.

Take a look at https://www.splunk.com/en_us/blog, and analyze to see how this pattern is achieved. 

3 replies

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
February 24, 2026

​@arunpatidar ​@BrianKasingli Tagging you to see if you might want to share any best practices or insights on this topic. Your expertise would be greatly appreciated, thank you!

Kautuk Sahni
BrianKasingli
Community Advisor and Adobe Champion
BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
February 24, 2026

​@SCTech ,  I hope this helps.

Re-use XF on Header and Footer on EDS website.

From one of the implementations at https://www.splunk.com/en_us/blog , their EDS blog runs under the same domain space as their AEM classic website. If you inspect the network tab in the browser, you can see that the page initially loads with an empty <header> element.

After the page loads, a network request is made to retrieve the header markup from their AEM classic site at:

https://www.splunk.com/en_us/blog/fragments/header.plain.html 
 

The .plain.html rendition returns clean HTML from the Experience Fragment. That HTML is then injected into the page by replacing the contents of the <header> element.
 

However, the .plain.html file only returns the markup. Any required JavaScript behavior and CSS styling must be re implemented separately within the EDS project. This is something I observed in production while analyzing how they reused their header.
 

The same approach is used for the footer. The Splunk blog makes a request to:

https://www.splunk.com/en_us/blog/fragments/footer.plain.html 
 

Once the response is returned, JavaScript replaces the contents of the <footer> element with the HTML from the .plain.html file. Again, any necessary JavaScript logic and CSS styling must be re implemented within the EDS site to ensure the footer behaves and looks correct.
 

This pattern allows the header and footer to remain centrally managed in AEM, while still being reused inside EDS pages.

Take a look at https://www.splunk.com/en_us/blog, and analyze to see how this pattern is achieved. 

    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    February 25, 2026

    You need to update blocks/header.js and blocks/footer.js to load HTML from AEM
    The new path would be <XF path>.content.html 

    Below code needs to be adjusted,

     const navPath = navMeta ? new URL(navMeta).pathname : '/nav';
     const resp = await fetch(`${navPath}.plain.html`);

    If you are not using same domain for EDS and AEM content then use full path above.

    Arun Patidar
      Terms & ConditionsAccessibility statement

      Loading footer...