x-schema-name
demo-slides
title
content-fragment-overlay
topbarTitle
AEM Content Fragment Overlay with Edge Delivery Services
slides
  • self://#slides-0bcs80
  • self://#slides-eacgg2
  • self://#slides-pq2m3u
  • self://#slides-s7xkpk
  • self://#slides-ioou5q
  • self://#slides-056xbx
slideTitle
AEM Content Fragment Overlay with Edge Delivery Services
eyebrowLabel
The Challenge
slideTitle
Publishing AEM Content Fragments to EDS
leadParagraph
The traditional approach to publishing AEM Content Fragments to Edge Delivery Services only embedded a reference to the fragment in the page HTML — not the actual content itself. This created fundamental limitations for discoverability, AI, and authoring complexity.
bulletPoints
  • Embedded references limit an LLM agent's ability to ingest and understand page content
  • Search indexes built on reference-only pages lack the actual content needed to be meaningful
  • Each Content Fragment model required its own custom block and GraphQL endpoint configuration
  • Intermediate pages acted as wrappers that referenced fragments rather than publishing their HTML content
keyTakeaways
The Content Fragment Overlay publishes fragments as self-contained semantic HTML — actual content on the page, not a pointer to it.
eyebrowLabel
The Solution
slideTitle
Content Fragments publish directly as EDS pages
leadParagraph
The json2html Content Fragment Overlay intercepts requests for specific URL paths, fetches the matching Content Fragment from AEM author, transforms the JSON through a Mustache template, and stores the result in the EDS content bus — just like any authored page.
bulletPoints
  • Authors work exclusively in the AEM Content Fragment editor
  • Mustache template maps Content Fragment fields to EDS semantic HTML blocks
  • Pages are cached on the CDN with full EDS performance characteristics
keyTakeaways
One tool for authors. One publish action. One URL — delivered from the CDN at full EDS speed.
buttonText
Try the json2html Simulator
url
https://tools.aem.live/tools/json2html-simulator/
buttonText
View Mustache Template
url
https://github.com/scdemos/demo/blob/main/templates/article.html
eyebrowLabel
The Mustache Template
slideTitle
One template maps Content Fragment fields to EDS blocks
leadParagraph
A single Mustache template defines how Content Fragment fields become EDS-compatible HTML. The template is committed to GitHub and can be used to generate unlimited pages from Content Fragments authored in AEM.
bulletPoints
  • {{properties.elements.title.value}} → page title and H1 in the hero block
  • {{properties.elements.author.value}} → author metadata, rendered by the article template
  • {{{properties.elements.image.value}}} → hero image (triple braces pass DAM paths unescaped)
  • {{properties.elements.summary.value}} → meta description and lead paragraph
  • Meta tags (author, date, image) drive the article template JS for breadcrumb and byline
openInBrowser
  • self://#openinbrowser-vzcnp5
  • self://#openinbrowser-942l5z
keyTakeaways
A single Mustache template can be used to create unlimited pages in EDS from Content Fragments authored in AEM.
buttonText
The 4% Rule Article
url
https://main--demo--scdemos.aem.live/articles/the-4-percent-rule-how-to-calculate-your-fire-number
buttonText
The 50/30/20 Rule Article
url
https://main--demo--scdemos.aem.live/articles/the-50-30-20-rule-a-beginners-blueprint-for-financial-clarity
buttonText
Savings Rate Article
url
https://main--demo--scdemos.aem.live/articles/why-your-savings-rate-matters-more-than-your-income
eyebrowLabel
Live Demo
slideTitle
Three articles. Three Content Fragments. Zero DA pages.
leadParagraph
Each of the following article pages is generated entirely from an AEM Content Fragment — there is no corresponding page in Document Authoring.
bulletPoints
  • The 4% Rule: How to Calculate Your FIRE Number
  • The 50/30/20 Rule: A Beginner's Blueprint for Financial Clarity
  • Why Your Savings Rate Matters More Than Your Income
openInBrowser
  • self://#openinbrowser-ksyppw
  • self://#openinbrowser-7vc6qs
  • self://#openinbrowser-g0shz5
keyTakeaways
The pages live entirely in the json2html content bus overlay — not in Document Authoring. Publishing a Content Fragment in AEM is the only authoring action required.
buttonText
Content Fragment Overlay Docs
url
https://www.aem.live/developer/content-fragment-overlay
eyebrowLabel
Setup
slideTitle
Configuring the Content Fragment Overlay
leadParagraph
Three components are required: a content overlay entry in content.json, a json2html path configuration, and a Mustache template committed to the repo.
bulletPoints
  • content.json: add overlay pointing to json2html.adobeaem.workers.dev/<org>/<site>/<branch>
  • POST json2html config: path, AEM author Assets API endpoint, regex, template, forwardHeaders
  • forwardHeaders: ["Authorization"] — required for AEM author API authentication
  • relativeURLPrefix: set to AEM author base URL to resolve relative DAM asset paths in image fields
  • Commit Mustache template to /templates/ in the repo and reference it in the config
openInBrowser
  • self://#openinbrowser-tler34
keyTakeaways
The overlay intercepts only the configured paths — the existing content source (DA, SharePoint, or Google Drive) remains authoritative for all other pages. The same pattern applies to any Content Fragment model with any Mustache template.