---
title: Building an AEM Headless Site Without Using EDS
description: How to build a headless CMS setup with AEM. This tutorial covers Content Fragment Models, configuring GraphQL endpoints, and querying data for modern apps.
publish date: 2026-04-16
author: Daniela Romero
image: https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2026-04-16-Building-Headless-Apps-with-AEM-GraphQA/blog_hero_building-aem-headless-apps.jpg?rev=9d7aa06df166434992fcaf68364c17bd
url: http://www.oshyn.com/blog/2026/04/aem-headless-apps-graphql
---
# Building an AEM Headless Site Without Using EDS

![Spectrum of stacked multi-colored wooden blocks](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2026-04-16-Building-Headless-Apps-with-AEM-GraphQA/blog_hero_building-aem-headless-apps.jpg?rev=9d7aa06df166434992fcaf68364c17bd&hash=621201300431574D050ECF8B231C5820)

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 Creation of a new Project Configuration

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. Creation of a new Content Fragment 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. Content Fragment Model Editor

## 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. Creation of a new Content Fragment
3. Click Create
4. Open the Content Fragment
5. Fill all the fields
6. Click Save

### Example Blog Post Content


| Field Name | Type |
| --- | --- |
| Title | Getting Started with AEM GraphQL |
| Slug | getting-started-aem-graphql |
| Summary | Learn how to expose structured content from AEM using GraphQL APIs. |
| Author | Jane Doe |
| Publish Date | 2026-03-16 |
| Main Content | AEM GraphQL allows developers to deliver content through APIs instead of traditional page rendering. |

![Example Blog Post](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2026-04-16-Building-Headless-Apps-with-AEM-GraphQA/building-aem-headless-apps_5.png?rev=9f1fc24d21464e9f9ed23d02a15cb973?)

*Example Blog Post*

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.

![GraphQL endpoint’s path based on the Content Fragment Model](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2026-04-16-Building-Headless-Apps-with-AEM-GraphQA/building-aem-headless-apps_6.png?rev=57a3754476cd478e87506593011a76f2?)

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 Explorer’s interface](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2026-04-16-Building-Headless-Apps-with-AEM-GraphQA/building-aem-headless-apps_7.png?rev=88768c485b354625883e458903477f70?)

*GraphQL Explorer’s interface*

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 test

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:

![JavaScript response](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2026-04-16-Building-Headless-Apps-with-AEM-GraphQA/building-aem-headless-apps_9.png?rev=787547bb4f9d474186ea91dfd99cd9e4?)

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