How to use AEM Content Fragments as Edge Delivery pages using the Content Fragment Overlay pattern

This demo showcases how AEM Content Fragments authored in AEM Sites can be published directly as fully rendered Edge Delivery Services pages — without duplicating content in Document Authoring.

Using the json2html Content Fragment Overlay pattern, each Content Fragment is automatically transformed into an EDS page via a Mustache template. Authors work in the familiar AEM Content Fragment editor; the published result is a fast, SEO-optimized EDS page.

Why This Matters

The challenge: Your editorial team authors long-form articles or product content in AEM Sites as Content Fragments. But your delivery tier is Edge Delivery Services — and EDS pages traditionally come from Document Authoring, not AEM Content Fragments.

The solution: The Content Fragment Overlay pattern bridges the gap. The json2html worker intercepts requests for specific URL paths, fetches the matching Content Fragment from AEM author, applies a Mustache template, and returns fully rendered EDS-compatible HTML — with zero duplication of content.

Why use the Content Fragment Overlay pattern:

• Single source of truth — Authors work in AEM Content Fragment editor; EDS pages are generated automatically on preview
• No content duplication — Content Fragments don't need to be re-authored in Document Authoring
• Full EDS performance — Generated pages are cached on the CDN like any EDS page
• Reusable template — One Mustache template generates unlimited article pages
• Structured authoring — Content Fragment models enforce content structure (e.g. title, author, image, body)
• SEO friendly — Pages appear in the query index and can be included in sitemaps

Real-world use cases:

• Editorial teams authoring articles in AEM Sites that publish to an EDS marketing site
• Product content managed in AEM Content Fragments surfaced as EDS product detail pages
• Press releases or news content authored centrally and distributed to EDS sites
• Knowledge base articles managed in AEM and delivered via EDS

How it works

When a visitor requests an article page such as /articles/the-4-percent-rule-how-to-calculate-your-fire-number, the json2html worker:

1. Matches the URL path against the configured overlay pattern (/articles/)
2. Constructs the AEM author API URL for the corresponding Content Fragment
3. Fetches the Content Fragment JSON from AEM author (forwarding the admin Authorization header)
4. Applies the Mustache template (/cf-templates/article.html) to render EDS-compatible HTML
5. Returns the HTML to be stored in the EDS content bus when previewed via Sidekick

After preview, the page is cached on the CDN like any other EDS page. Use Preview from the Sidekick to regenerate a page whenever the Content Fragment content is updated.

Key insight: The json2html worker is a page generation engine, not a runtime proxy. It generates HTML once at preview time and serves it from the CDN — so there is no runtime dependency on AEM author for page delivery.

For full documentation, see: https://www.aem.live/developer/content-fragment-overlay

Live Examples

Articles landing page: /articles (authored in da.live)

Sample article pages — each generated from an AEM Content Fragment:

• 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

Mustache template source: https://github.com/scdemos/demo/blob/main/cf-templates/article.html

Demo Exercise: Test the Template in the json2html Simulator

Try the json2html Simulator to see exactly how the Mustache template transforms Content Fragment JSON into EDS HTML.

Open: https://tools.aem.live/tools/json2html-simulator/

Steps:

1. JSON Data (left panel) — paste this sample Content Fragment JSON payload:

{
  "properties": {
    "elements": {
      "title": {
        "value": "The 4% Rule: How to Calculate Your FIRE Number"
      },
      "author": {
        "value": "Rachel Kim"
      },
      "publicationDate": {
        "value": "2025-03-15"
      },
      "summary": {
        "value": "Discover the single most powerful planning formula in financial independence — and why 25x your annual spending could be the most important number you calculate."
      },
      "image": {
        "value": "https://picsum.photos/seed/fire/1200/600"
      }
    }
  }
}

1. Mustache Template (middle panel) — paste the article template from: https://github.com/scdemos/demo/blob/main/cf-templates/article.html
2. Click "Render" or press Cmd+Enter

You should see: Fully rendered HTML for an article page — a hero block with image and title, plus a summary paragraph — ready to be ingested by EDS.

Configuration Snippets

Content Overlay (content.json)

{
  "source": {
    "url": "https://content.da.live/<org>/<site>/",
    "type": "markup"
  },
  "overlay": {
    "url": "https://json2html.adobeaem.workers.dev/<org>/<site>/<branch>",
    "type": "markup"
  }
}

json2html Configuration (POST to https://json2html.adobeaem.workers.dev/config/<org>/<site>/<branch>)

[
  {
    "path": "/articles/",
    "endpoint": "https://author-<program>-<env>.adobeaemcloud.com/api/assets/<dam-path>/{{name}}.json",
    "regex": "/[^/]+$",
    "template": "/cf-templates/article.html",
    "forwardHeaders": ["Authorization"],
    "relativeURLPrefix": "https://author-<program>-<env>.adobeaemcloud.com"
  }
]

Configuration notes:

• forwardHeaders: ["Authorization"] — passes the admin token to AEM author so the worker can fetch the Content Fragment JSON
• relativeURLPrefix — prepends the AEM author base URL to relative DAM asset paths (e.g. /content/dam/…) stored in Content Fragment image fields; must point to the author tier, not publish
• The {{name}} token in the endpoint URL is replaced with the last path segment of the requested Content Fragment URL at runtime