Building an AEM Headless Site Without Using EDS How to Build Headless Applications with AEM GraphQL and Content Fragments

Modern digital experiences require content to be delivered quickly, consistently, and across multiple platforms—from websites to mobile apps and beyond. For organizations, this means adopting architectures that allow content to be reused, scaled, and managed efficiently.

Headless content delivery addresses this challenge by separating content management from presentation. Adobe Experience Manager supports this approach through Content Fragments and GraphQL APIs, enabling teams to deliver structured content across channels while improving performance, scalability, and development speed.

In this tutorial, we will explore how to build a simple headless setup using AEM, Content Fragments, and GraphQL. Specifically, we will:

• Create a Content Fragment Model.

• Create sample Content Fragments.

• Query the content using GraphQL.

• Simulate how a frontend application can consume the data.

All examples in this tutorial can be executed using a local AEM environment, making it easy to experiment without requiring a cloud setup.

What You Will Build

By the end of this tutorial, you will have:

• A Blog Post Content Fragment Model

• A few Blog Post Content Fragments

• A GraphQL query that retrieves blog content

• A simple example showing how a frontend app could fetch the data

Before You Start

Before starting, make sure you have:

• A local AEM environment (AEM SDK or AEM 6.5)

• A project created

• Access to Tools → Assets → Content Fragment Models

• GraphQL is enabled in AEM.

• Basic understanding of JSON and APIs

No front-end framework is required to follow the tutorial.

Set Up the Project Configuration

To use GraphQL inside a project, the first step is to create a project configuration and enable the required features.

1. Open the author interface: http://localhost:4502/aem/start.html.

2. Navigate to: Tools → General → Configuration Browser

3. Click on Create

4. Add:

   1. Title

   2. Name (must be lowercase)

      The title and name should match your project (e.g., My Site)

5. Enable

   1. GraphQL Persisted Queries

   2. Content Fragment Models

6. Click Create

   

Once the configuration is ready, you can proceed to create Content Fragment Models.

Create a Content Fragment Model

Content Fragment Models define the structure of reusable content.

1. Navigate to: Tools → General → Content Fragment Models.

2. Open your project folder (My Site)

3. Create a new model

   1. Blog Post

   2. Enable “Enable model.”

4. Click on Create and open the model.

   

5. Add fields to the model:

   1. In the Data Types tab, drag fields into the editor.

   2. In the Properties tab, define: Field Label and Property Name

6. Add the following fields:

   Field Name	Type
   Title	Single line text
   Slug	Single line text
   Summary	Multi-line text
   Author	Single line text
   Publish Date	Date and time
   Main Content	Rich Text

7. Click Save

   This model defines how blog content will be structured in AEM. Each field has more properties that you can use depending on your needs.

   

Create Content Fragments

Next, create actual content based on the model.

1. Navigate to: Assets → Files → My Site

2. Create a new Content Fragment using the Blog Post model.

   1. Add a Title

   2. Optionally, add a Description and Tags.

      

3. Click Create

4. Open the Content Fragment

5. Fill all the fields

6. Click Save

Example Blog Post Content

You can create multiple blog entries to test your queries.

Query Content with GraphQL

Once the Content Fragment Model is created, AEM automatically generates a GraphQL endpoint and a schema. To see the endpoint:

1. Navigate to the GraphQL endpoint: Tools → General → GraphQL.

2. You should see the GraphQL endpoint’s path based on the Content Fragment Model.

There are several ways to create and test GraphQL queries, including the GraphQL Query Editor, JavaScript, and external tools like Postman.

GraphQL Query Editor

• Navigate to: Tools → General → GraphQL Query Editor.

• Make sure the selected endpoint matches the one created in the GraphQL Endpoints view.

• Create a query to retrieve blog content

Query example:

query { 
  blogPostList { 
    items { 
      title 
      slug 
      summary { 
        plaintext 
      } 
      author 
      publishDate 
    } 
  } 
}

This query retrieves all blog posts along with selected fields such as title, summary, and publish date.

GraphQL queries can also use variables to filter or limit the data returned by the API. GraphQL allows the frontend to request only the fields it needs, improving efficiency compared to traditional REST APIs.

In AEM GraphQL, multi-line and rich text fields are exposed as structured types rather than simple strings. This means you must explicitly specify how the data should be returned (for example, plaintext or HTML).

Postman

When testing GraphQL APIs outside the browser, tools like Postman can simplify authentication and avoid CSRF-related issues. To test the GraphQL API using Postman:

1. Method: POST

2. URL: http://localhost:4502/content/cq:graphql/mysite/endpoint.json

3. Authorization: Basic Auth

   1. Username: admin

   2. Password: admin

4. Headers:

   1. Content-Type: application/json

5. Body (raw JSON):

   { 
     "query": "query { blogPostList { items { title summary { plaintext } } } }" 
   } 
   

   

Postman allows you to validate and debug your GraphQL API independently of the frontend layer.

Consuming GraphQL from a Front-end application

The following example demonstrates how a frontend application can retrieve data from AEM using the Fetch API:

async function fetchBlogPosts() { 
  const response = await fetch('/content/cq:graphql/mysite/endpoint.json', { 
method: 'POST', 
headers: { 
  	'Content-Type': 'application/json' 
}, 
body: JSON.stringify({ 
  	query: `query { blogPostList { items { title } } }` 
}) 
  }); 
  const data = await response.json(); 
  console.log(data); 
} 

fetchBlogPosts();

JavaScript response:

The response can then be rendered by a frontend framework like React, Next.js, or Vue. This demonstrates how AEM-managed content can be consumed by modern frontend applications without relying on server-rendered pages.

Headless benefits

Using GraphQL in a headless architecture enables flexible, scalable content delivery by allowing frontend applications to request only the data they need, reducing unnecessary payload sizes and improving performance. At the same time, Content Fragment Models ensure that content remains structured and reusable, making it easier to maintain consistency across different experiences. This approach allows organizations to deliver content seamlessly across multiple channels, such as websites, mobile applications, and other digital platforms, while improving development efficiency and adaptability.

The Role GraphQL and Edge Delivery Services in AEM

EDS and GraphQL serve different roles within AEM’s headless ecosystem and are not directly comparable. GraphQL is an API layer used to deliver structured content from Content Fragments, enabling frontend applications to query and consume data with fine-grained control. It is particularly suited for headless architectures where content needs to be reused across multiple channels such as mobile apps, SPAs, or external systems.

In contrast, Edge Delivery Services (EDS) is a broader delivery framework designed to optimize how content is authored, delivered, and rendered at the edge. It focuses on high-performance web experiences, combining document-based authoring or Universal Editor capabilities with edge optimization to deliver fast, SEO-friendly pages with minimal development overhead.

Another important distinction lies in the content authoring approach. In traditional headless implementations using GraphQL, content is typically managed through the Content Fragment Editor, which provides a structured and reusable model for API-driven delivery. In contrast, Edge Delivery Services (EDS) offers more flexibility in how content is authored for headless scenarios. While it can also leverage Content Fragments, EDS enables teams to use the Universal Editor, allowing authors to create and manage content directly within the page context. This provides a more intuitive authoring experience while still supporting headless delivery patterns.

These differences become clearer when looking at real-world scenarios.

GraphQL Use Cases

A common real-world scenario where GraphQL is particularly effective is when organizations need to quickly spin up a secondary site using existing content. Instead of duplicating or restructuring content, teams can reuse Content Fragments already managed in AEM and expose them through GraphQL APIs. This approach allows developers to build lightweight sites or microsites—such as campaign pages, regional variations, or temporary experiences—while maintaining a single source of truth for content. As a result, organizations can reduce duplication, accelerate development, and ensure consistency across multiple digital properties.

This approach is especially valuable in teams with a stronger frontend focus and limited AEM development resources, as well as in scenarios where a full authoring experience is not required. It is also well-suited for projects that depend on reusing or aggregating content from multiple sources already available in AEM, enabling faster development cycles and greater flexibility.

This makes GraphQL a strong option for extending existing content into new experiences without increasing content management complexity.

Wrapping up

AEM GraphQL and Content Fragments provide a strong foundation for scalable headless content delivery. By modeling structured content and exposing it through GraphQL APIs, organizations can deliver consistent experiences across multiple platforms while improving development efficiency and time-to-market.

In real-world projects, GraphQL can support dynamic and reusable UI components. For example, it can serve as a data source for components that aggregate content from multiple sources, such as modals that display information from different pages, enabling more flexible and centralized content management.

This tutorial covered the fundamentals, but the same approach can scale to more advanced use cases, such as:

• Persisted queries

• Multi-model content architectures

• Integration with React or Next.js