Building Headless AEM Apps Using Content Fragments: A Complete Guide

 Adobe Experience Manager (AEM) is no longer just a traditional CMS for page-based websites-it has evolved into a powerful

This article explains how to build headless AEM applications using Content Fragments, with a step-by-step development flow, architectural guidance, and best practices.

---

 What Are Content Fragments in AEM?

Content Fragments are structured, channel-agnostic content units stored in AEM’s DAM.
They are ideal for headless scenarios because:

• They follow schema-defined models

• They deliver raw structured content (JSON)

• They are reusable across apps, channels, and devices

• They decouple content from presentation

Example use cases:

• Mobile app content (banners, FAQs, promotions)

• Product details and catalogs

• Multi-language content distribution

• Chatbot or voice assistant responses

• API-driven websites or micro frontends

---

 How Content Fragment Models Work

A Content Fragment Model (CFM) defines the structure of a fragment.
Typical field types include:

• Text (plain or rich)

• Multi-line text

• Number

• Boolean

• Enumeration

• Date/time

• JSON objects

• References to other fragments (nested content)

• Content references (DAM, images, etc.)

A well-designed CFM acts like a lightweight backend schema.

Example CFM (Blog Post):

• Title

• Summary

• Body (rich text)

• Author

• Tags

• Publish Date

• Related Articles (fragment reference)

---

 Why Use Content Fragments for Headless Apps?

1. Pure Headless JSON Output

AEM provides out-of-the-box JSON endpoints via:

• Content Fragment APIs

• AEM GraphQL APIs

• Sling Model Exporter (optional for custom structures)

2. Reusable Structured Content

CFs can be reused across:

• Apps

• Websites

• Campaigns

• Voice interfaces

• Third-party systems

3. Built-in Governance

• Versioning

• Workflows

• Approvals

• Translation

• Multi-site management

4. Cloud-Ready Scaling

In AEM as a Cloud Service, headless delivery automatically scales globally.

---

 Building a Headless AEM App Using Content Fragments (Step-by-Step)

Step 1: Create a Content Fragment Model

1. Go to Tools → Assets → Content Fragment Models

2. Create a new model (ex: “Product Details”)

3. Add fields:

   • Product Name

   • Price

   • Description

   • Image

   • Specifications (JSON)

4. Save and publish the model

Step 2: Create Content Fragments

1. Go to Assets → Files

2. Create a new fragment using your model

3. Enter structured content

4. Add references or nested fragments if needed

5. Publish the fragments

Step 3: Expose Content via JSON (Two Options)

---

Option A: Using AEM GraphQL APIs (Recommended)

GraphQL is the preferred headless API for complex queries.

Example query:

{ productList { items { name price description image { ... on Asset { _path } } } } }

Endpoint example:
/content/graphql/global/endpoint.json

Benefits:

• Dynamic filtering

• Query only required fields

• Faster payloads

---

Option B: Direct CF JSON API

Default JSON endpoint:

https://publish.author-domain/content/dam/path/to/cf.model.json

Best for:

• Simple apps

• Static integrations

• Low-logic use cases

---

 Step 4: Consume Content in Your App

Use CF JSON in any frontend:

• React

• Angular

• Vue

• iOS / Android

• Flutter

• Next.js / Nuxt.js

Example React fetch:

fetch("https://publish-domain/content/dam/app/products/product1.model.json") .then(res => res.json()) .then(data => console.log(data));

Or use GraphQL:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client'; const client = new ApolloClient({ uri: '/content/graphql/global/endpoint.json', cache: new InMemoryCache() }); client.query({ query: gql` { productList { items { name price description } } } ` }).then(result => console.log(result));

---

 Step 5: Deploy & Integrate at Scale

On AEM as a Cloud Service:

• CF APIs are globally cached

• Publish tier auto-scales

• CDN caching + edge delivery optimizes load

• Pipelines ensure safe deployments

---

 Best Practices for Headless AEM Using CFs

1. Keep CF Models small & reusable

Avoid bloated schemas; break content into smaller fragments.

2. Use fragment references for relationships

Good for product families, related posts, FAQs, etc.

3. Prefer GraphQL over JSON endpoints

More efficient, especially for filtering and multi-level queries.

4. Enable caching with immutable paths

CF JSON paths work great with CDN caching.

5. Use AEM workflows for approvals

Ensure consistent publishing across channels.

6. Don’t mix presentation logic into CFs

UI should be controlled by the consuming app.

---

 Conclusion

Content Fragments make AEM a powerful headless CMS.
By combining robust content modeling, GraphQL APIs, and cloud scalability, AEM enables developers to build fast, flexible, and enterprise-grade omnichannel applications.

Whether you’re building a mobile app, a React SPA, or a global multi-channel platform, Content Fragments deliver clean structured content that fits seamlessly into modern headless architectures.