The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. Developers maintain code for Cloud Service and local development environment in a common git repository. 6. Connectors User Guide Experience Manager tutorials. The. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and. Navigate to the folder you created previously. Instead of an out-of-the-box solution, Adobe Developer App Builder provides a common, consistent, standardized development platform for extending Adobe Cloud solutions such as AEM including: Adobe Developer Console — For custom microservice and extension development, letting developers build and manage projects while accessing all the tools. Ask role-relevant questions. API. Log into AEM as a Cloud Service and from the main menu select Navigation -> Content Fragments. Experience League. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Integrating Adobe Target on AEM sites by using Adobe Launch. In this part of the AEM Headless Developer Journey, learn how to use the REST API to access and update the content of your Content Fragments. The creation of a Content Fragment is presented as a wizard in two steps. What are GraphQL and Assets REST APIs? Now that you have created some content fragments, you can use AEM’s APIs to. For authoring AEM content for Edge Delivery Services, click here. This guide uses the AEM as a Cloud Service SDK. Navigate to the folder you created previously. AEM Headless Developer Journey - Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities,. Access Package Manager. The Single-line text field is another data type of Content. This setup establishes a reusable communication channel between your React app and AEM. Tap or click the folder that was made by creating your configuration. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Experience Manager Developer Tools for Eclipse is an Eclipse plugin based on the Eclipse plugin for Apache Sling released under the Apache License 2. Errors - When problems occur, details are shown for each. It offers several features that make AEM development easier: Seamless integration with AEM instances through Eclipse Server Connector. Users with the Cloud Manager User role only can log into Cloud Manager and navigate to the AEM author environments (if they exist) by using the Programs menu options. Provides links to the detailed documentation. 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating GraphQL Queries; 4 - Content Fragment Variations; 5 - GraphQL Endpoints; 6 - Author and Publish Architecture; 7 - GraphQL Persisted. This getting started guide assumes knowledge of both AEM and headless technologies. For publishing from AEM Sites using Edge Delivery Services, click here. Adobe Creative Cloud provides creative teams with an ecosystem of solutions and services to help them. Tap or click the folder you created previously. js) Remote SPAs with editable AEM content using AEM SPA Editor. This document helps you understand the AEM headless publication pipeline and the performance considerations you must be aware of before you go live with your application. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. AEM provides robust content management capabilities and exposes Headless APIs that allow developers to access content and data stored in AEM through a variety of channels and applications. AEM Local Development Access Tokens are used to accelerate the development of integrations with AEM as a Cloud Service that programmatically interacts with AEM Author or Publish services over HTTP. First select which model you wish to use to create your content fragment and tap or click Next. This guide uses the AEM as a Cloud Service SDK. This GraphQL API is independent from AEM’s GraphQL API to access Content. At the beginning of the AEM Headless Content Author Journey the Introduction covered the basic concepts and terminology relevant to authoring for headless. The Story So Far. Learn how AEM can go beyond a pure headless use case, with. Set up headless content delivery and management in AEM by Jeremy Lanssiers Overview We set up headless content delivery and headless content management by using AEM’s GraphQL to deliver and Assets API to manage content (via Content Fragments). Select AEM in the dialog and click Open. The AEM users product profile is typically. Additional resources can be found on the AEM Headless Developer Portal. : Guide: Developers new to AEM and headless: 1. Build a React JS app using GraphQL in a pure headless scenario. This guide leads you through the most headless implementation topics in AEM so that on completion you:. Authoring Concepts. Every user assigned to an AEM as a Cloud Service product profile has read-only access to Cloud Manager via the Cloud Manager User role. This guide provides important information about the latest release of Experience Manager as a Cloud Service, including what is new, deprecated and removed features, and known issues. Create and maintain LESS files. The SPA is implemented using: Maven AEM Project Archetype; AEM SPA Editor; Core. Adobe Experience Manager headless CMS is the most flexible content management system that helps teams quickly build and deliver customer experiences across all channels and devices. Log into AEM and from the main menu select Tools -> General -> Configuration Browser. Moving to AEM as a Cloud Service: Understand the. This guide uses the AEM as a Cloud Service SDK. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. Created for: Beginner. you can move on to the third part of the getting started guide and create folders where you will store the. This article provides insights into how Headless Adaptive Forms work, and how they can be integrated with different applications to simplify the form building process. The following configurations are examples. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and. where the content authors and developers work on the same platform to deliver the experiences to the content consumers. Apache Maven 3. It also serves as a best-practice guide to several AEM features. AEM offers an out of the box integration with Experience Platform Launch. The models available depend on the Cloud Configuration you defined for the assets. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. Resource Description Type Audience Est. x. Run the React app. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. To use this, endpoints must be defined and enabled in AEM, and if necessary, the GraphiQL interface installed. Developers can use the JSON Preview in the Content Fragment editor to show all values of the current Content Fragment that can be returned using the GraphQL API. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. First, we’ll guide you through enabling Content Fragments in AEM, covering necessary configurations and settings for seamless integration. Tap or click Create. Develop your test cases and run the tests locally. The authoring environment of AEM provides various mechanisms for organizing and editing your content. Asset microservices lets you process a broad range of file types covering more formats out-of-the-box than. Tutorials by framework. Customise and extend the functionality of your CMS with our headless capabilities, API-first architecture and vast number of integrations. Learn how to build next-generation apps using headless technologies in Experience Manager as a Cloud Service. AEM Headless Content Architect Journey Overview; Content Modeling for Headless with AEM - An Introduction; Learn the Content Modeling Basics for Headless with AEM; Learn about Creating. The creation of a Content Fragment is presented as a dialog. 5. They can be used by developers to provide website business users, editors, and administrators with the functionality to adapt their websites to changing business needs (content agility). Last update: 2023-08-15 Topics: Developer Tools Created for: Developer The Story so Far At the beginning of the AEM Headless Content Architect Journey the Introduction. Understand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. Implementing User Guide: Understand how to build and customize experiences using Experience Manager’s powerful features by exploring these development and deployment topics. Access to assets folders on AEM Publish should be controlled via User Groups, rather than user directly. Visit the AEM Headless developer resources and documentation. How to organize and AEM Headless project. 5 Authoring User Guide; AEM 6. Developers want to be able to build sites using SPA frameworks and authors want to seamlessly edit content within AEM for a site built using such frameworks. SOLVED WKND Tutorial - Getting Started with AEM Headless - Content Services. Log into AEM and from the main menu select Tools -> General -> Configuration Browser. Headless Developer Journey. An Experience Fragment is a stand-alone experience that can be re-used across channels and have variations, saving the trouble of repeatedly copying and pasting experiences or parts of experiences. AEM is a robust platform built upon proven, scalable, and flexible technologies. We believe it is beneficial for any developer involved in an AEM SPA Editor project to complete this tutorial. The developer develops the client that will consume content from AEM headless as the content authors are still creating the content. What’s Next. Developer. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of Experience Manager to prepare for your. Adobe Experience Manager’s Referrer Filter enables access from third-party hosts. Last update: 2023-07-11. js) Remote SPAs with editable AEM content using AEM SPA Editor. The new architecture supporting AEM as a Cloud Service involves some key changes to the overall developer experience. For example, C:aemauthor. Learn how to use AEM’s Assets REST API to manage Content Fragments and the GraphQL API for headless delivery of Content Fragment content. This journey lays out the requirements, steps, and approach to translate headless content in AEM. Define the structure of the content you will create and serve using AEM's headless capabilities by using Content Fragment Models. Universal Editor Introduction. To support customers with enterprise development setups, AEM as a Cloud Service fully integrates with Cloud Manager and its purpose-built, opinionated CI/CD pipelines. Anyone with administrator access to a test AEM instance can follow these guides to understand headless delivery in AEM, though someone with developer experience is ideal. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. Provide a Model Title, Tags, and Description. Please can someone guide me on this, also if there is a reference/ example of doing this,. Level 10 19-03-2021 00:01. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. For the purposes of this getting started guide, we only need to create one configuration. Join us at Adobe Developers Live on May 23 for a day filled with insights on composable experiences in Adobe Experience Manager. The tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand, the WKND. Translating Headless Content in AEM. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. Working with Workflows. WKND Developer TutorialThe UI caters for both mobile and desktop devices, though rather than creating two styles, AEM uses one style that works for all screens and devices. The following tools should be installed locally: JDK 11;. : Guide: Developers new to AEM and. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. In the previous document of the AEM headless translation journey, Get started with AEM headless translation you learned how to organize your headless content and how AEM’s translation tools work and you should now: Understand the importance. The tagged content node’s NodeType must include the cq:Taggable mixin. Enabling Content Fragments in AEM allows modular content creation, enhancing consistency and adaptability. Open the Templates Console (via Tools -> General) then navigate to the required folder. This document provides an overview of the different models and describes the levels of SPA integration. For example, when publishing, an editor has to review the content - before a site administrator activates the page. The language copy already includes the page: AEM treats this situation as an updated translation. Adobe has adopted Adobe Commerce’s GraphQL APIs as its official commerce API for all commerce-related data. This document is intended as a high-level quick start guide for the key page authoring actions in AEM. Last update: 2023-06-27. When the translated page is imported into AEM, AEM copies it directly to the language copy. This guide focuses on the full headless implementation model of AEM. This document provides an overview of the different models and describes the levels of SPA integration. In the future, AEM is planning to invest in the AEM GraphQL API. That is why the API definitions are really. With CRXDE Lite,. 5. In previous releases, a package was needed to install the GraphiQL IDE. Allow the candidate to ask questions (about the company, team, position, etc. Adobe manages the services for optimal handling of different asset types and processing options. Headless Developer Journey. Q: “How is the GraphQL API for AEM different from Query Builder API?” A: “The AEM GraphQL API offers total control on the JSON output, and is an industry standard for querying content. Universal Editor Introduction. Open command prompt and navigate to the aem-forms-addon-native-<version> folder. This journey is designed for the translation specialist persona, often referred to as the Translation Project Manager or TPM. Headful and Headless in AEM; Headless Experience Management. Connectors User Guide: Learn how to integrate Connectors into Experience Manager as a Cloud Service. bat start. AEM 6. AEM Headless Content Architect Journey Overview; Content Modeling for Headless with AEM - An Introduction; Learn the Content Modeling Basics for Headless with AEM; Learn about Creating. This account is available on AEM 6. After you do this, the Migration set. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. Headless Journeys. Prerequisites. An AEM installation generally consists of at least two environments: Author. In this part of the AEM Headless Developer Journey, you will understand the steps to implementing your first headless experience in AEM including planning considerations and also learn best practices to make your path as smooth as possible. Instead, you control the presentation completely with your own code. Integrating Adobe Target on AEM sites by using Adobe Launch. You also add or delete users and what group they belong to. In the previous document of the AEM headless journey, How to Model Your Content you learned the basics of content modeling in AEM,. AEM offers the flexibility to exploit the advantages of both models in one project. Log into AEM as a Cloud Service and from the main menu select Navigation -> Content Fragments. In a headless setup, the presentation system (the head) is decoupled from the content management (the tail). Created for: Beginner. This holds default templates and acts as a fallback if no policies and/or template-types are found in the current folder. Create a new Adaptive Form from the Form Creation wizard. AEM GraphQL API requests. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). For other programming languages, see the section Building UI Tests in this document to set up the test project. Authoring for AEM Headless - An Introduction. Log into AEM and from the main menu select Tools -> Assets -> Content Fragment Models. Web Component HTML tag. Different from the AEM SDK, the AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. 0. In the Query tab, select XPath as Type. Navigate to the Software Distribution Portal > AEM as a Cloud Service. For users new to AEM and headless technologies, start here for a comprehensive introduction to AEM and its headless features from the theory of headless through going live with your first headless project. To tag content and use the AEM Tagging infrastructure : The tag must exist as a node of type cq:Tag under the taxonomy root node. Adobe Experience Manager Sites lets marketers create content while allowing developers to focus on building and shipping code. An OSGi configuration for the Referrer Filter is needed to enable access to the GraphQL endpoint for headless applications over HTTP POST. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The journey will define additional personas with which the content architect must interact for a successful project, but the point-of-view for the journey is that of the content architect. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. Now that you have learned the concepts and terminology, the next step is to Learn the basics of modeling with Content Fragment Models. AEM 6. Enter the preview URL for the Content Fragment. adobe. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. Learn how the Universal Editor enables what-you-see-is-what-you-get (WYSIWYG) editing of any headless and headful experience. Populates the React Edible components with AEM’s content. It contains the following artifacts: The Quickstart jar - an executable jar file that can be used to set up both an author and a publish instance. We believe it is beneficial for any developer involved in an AEM SPA Editor project to complete this tutorial. Change into the. These are defined by information architects in the AEM Content Fragment Model editor. In this part of the AEM Headless Developer Journey, you will understand the steps to implementing your first headless experience in AEM including planning considerations and also learn best practices to make your path as smooth as possible. Learn more. Select the root of the site and not any child pages. After reading it, you can do the following: From these takeaways we can recommend AEM headless or hybrid to be considered when the following points are met: You aim to deliver the same experience and code base for a content-focused page on the web and a hybrid mobile app. Developer. We’ll guide you through configuring your React app to connect to AEM Headless APIs using the AEM Headless SDK. The following tools should be installed locally: JDK 11; Node. When creating a GraphQL query, developers can choose different response types from html, plaintext, markdown, and json from a multi-line field. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). Details. Tap or click the folder that was made by creating your configuration. Sample Multi-Module Project. Getting Started with the AEM SPA Editor and React. Additional Resources. AEM is a robust platform built upon proven, scalable, and flexible technologies. 8+. The. AEM 6. New Reference Site and Tutorial. Once uploaded, it appears in the list of available templates. In this part of the AEM Headless Developer Journey, learn how to use the REST API to access and update the content of your Content Fragments. Understand Headless in AEM; Learn about CMS Headless Development;. Define the developer’s process. A development environment allows your developers to implement, and test AEM applications under the same runtime conditions as the stage and production environments. With your site selected, open the rail selector at the left and choose Site. The following tools should be installed locally: JDK 11; Node. The models available depend on the Cloud Configuration you defined for the assets. In a headless model, the content is managed in the AEM repository, but delivered via. Different from the AEM SDK, the AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. In this optional continuation of the AEM Headless Developer Journey, you learn how AEM can combine headless delivery with traditional full-stack CMS features. Know the prerequisites for using AEM’s headless features. We do this by separating frontend applications from the backend content management system. It contains the following artifacts: The Quickstart jar - an executable jar file that can be used to set up both an author and a publish instance. AEM’s GraphQL APIs for Content Fragments. In this part of the AEM Headless Developer Journey, learn about headless technology and why you would use it. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. This opens a side panel with several tabs that provide a developer with information about the current page. 5 Deploying User Guide; AEM 6. A developer uses the underlying configuration mechanism that implements configurations to persist and look up settings in AEM. Tap or click on the folder that was made by. Ensure you adjust them to align to the requirements of your. Reference Setup: Developers, Administrators with AEM experience: 20 minutes: Headless hands-on tutorial: If you prefer a hands-on approach and are familiar. This guide uses the AEM as a Cloud Service SDK. Headless Developer Journey. Q: “How is the GraphQL API for AEM different from Query Builder API?” A: “The AEM GraphQL API offers total control on the JSON output, and is an industry standard for querying content. Using this path you (or your app) can: receive the responses (to your GraphQL queries). In this part of the journey, you learn how to plan and perform the migration once both the code and the content are ready to be moved over to AEM as a Cloud Service. Now that you have created some content fragments, you can use AEM’s APIs to deliver them headlessly. A name will be automatically generated based on the title and adjusted according to AEM naming conventions. Resource Description Type Audience Est. The roles of AEM users, developers, and deployment managers are explored briefly as additional, optional parts of the journey. Accumulate the information and insights into their values, experience, and thought processes. Headless CMS with AEM Content Fragments and Assets. AEM Headless developer is quite popular among enterprises looking to deliver content to the front end by decoupling backend from. Quickstart in 5 mins. For Java and WebDriver, use the sample code from the AEM Test Samples repository. Headless Developer Journey - Start here for a guided course for developing headless applications with AEM. Secure and Scale your application before Launch. It includes new asset upload module, API reference, and information about the support provided in post-processing. Use GraphQL schema provided by: use the drop-down list to select the required configuration. Implementing User Guide: Understand how to build and customize experiences using AEM’s powerful features. This document: Is not intended as comprehensive coverage. Objective This document helps you understand headless content delivery and why it should be used. Monitor Performance and Debug Issues. The Create new GraphQL Endpoint dialog box opens. The two only interact through API calls. js with a fixed, but editable Title component. Also, you learn what are the best practices and known limitations when performing the migration. Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how to leverage them on your first headless development project. Confirm with Create. My requirement is the opposite i. These users will need to access AEM to do their tasks. AEM Headless is a CMS solution from Experience Manager that allows structured content (Content Fragments) in AEM to be consumed by any app over HTTP using GraphQL. Welcome to this tutorial chapter where we will explore configuring a React app to connect with Adobe Experience Manager (AEM) Headless APIs using the AEM Headless SDK. Or in a more generic sense, decoupling the front end from the back end of your service stack. Log in to AEM Author service as an Administrator. An introduction to the headless features of Adobe Experience Manager, and how to author content for your project. AEM Headless Overview; GraphQL. Developers want to be able to build sites using SPA frameworks and authors want to seamlessly edit content within AEM for a site built using such frameworks. Download the latest GraphiQL Content Package v. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. . Developer. When creating a GraphQL query, developers can choose different response types from html, plaintext, markdown, and json from a multi-line field. Search for “GraphiQL” (be sure to include the i in GraphiQL ). The power of AEM allows it to deliver content either headlessly, full-stack, or in both. Widgets in AEM. Front end developer has full control over the app. Prerequisites. The WKND tutorial is a multi-part tutorial designed for developers new to Adobe Experience Manager. Permission considerations for headless content. The Experience Manager Developer Tools for Eclipse comes with a sample, multi-module project that helps you quickly get up to speed with a project setup in Eclipse. Experience Manager Developer Tools for Eclipse is an Eclipse plugin based on the Eclipse plugin for Apache Sling released under the Apache License 2. Before you configure front-end pipelines, review the AEM Quick Site Creation Journey for an end-to-end guide through the easy-to-use AEM Quick Site Creation tool. Introduction. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Synchronization for both content and OSGi. - Adobe Experience League Community - 551540 Headless CMS with AEM Content Fragments. At the beginning of the AEM Headless Content Author Journey the Content Modeling Basics for Headless with AEM covered the basic concepts and terminology relevant to authoring for headless. A name will be automatically generated based on the title and adjusted according to AEM naming conventions. This user guide contains videos and tutorials helping you maximize your value from AEM. Last update: 2023-06-27. They allow you to prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. Headless Developer Journey. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. To validate the package, click More -> Validate, In the modal dialog box that then appears, use the checkboxes to select the type (s) of validation and begin the validation by clicking Validate. Rich text with AEM Headless. This journey provides you with all the AEM Headless Documentation you need to develop your first headless application. This pom. In this part of the AEM Headless Developer Journey, learn how to model your content for AEM Headless delivery using Content Modeling with Content Fragment Models and Content Fragments. Developer. Learn about headless technologies, what they bring to the user experience, how AEM supports headless models, and how to implement your own headless development project from A to Z. Select Create > Folder. The creation of a Content Fragment is presented as a wizard in two steps. Start here for a guided journey through the powerful and flexible headless features of. If you are new to either AEM or headless, see Adobe’s Headless Documentation Journeys for an end-to-end introduction to both headless and how AEM supports it. Each guide builds on the previous, so it is recommended to explore them thoroughly and in order. ” Tutorial - Getting Started with AEM Headless and GraphQL. In this part of the AEM Headless Developer Journey, learn about headless technology and why you would use it. In the folder’s Cloud Configurations tab, select the configuration created earlier. For an end-to-end example of building your own single-page application that is editable with AEM starting with project setup through application routing, see the WKND SPA Tutorials: Getting Started with the AEM SPA Editor and Angular. Provide a Title for your configuration. Headless is an example of decoupling your content from its presentation. Understand Headless in AEM; Learn about CMS Headless Development; Getting Started with AEM Headless as a Cloud Service; Path to your first experience using AEM Headless; How to model your content as AEM Content Models; How to access your content via AEM delivery APIs;. Throughout this tutorial, we will guide you through building the Image List component, handling nested references, rendering referenced image assets, and integrating the Universal Editor. Before you Configure Front-End Pipelines. Experience League. When creating a GraphQL query, developers can choose different response types from html, plaintext, markdown, and json from a multi-line field. that consume and interact with content in AEM in a headless manner. Enable developers to add automation to. For more information on the AEM Headless SDK, see the documentation here. Tap or click Create. Once created, the Quick Site Creation tool also enables fast customization of the theme and styling of the AEM site (JavaScript, CSS, and static resources). ” Tutorial - Getting Started with AEM Headless and GraphQL. Developers can use the JSON Preview in the Content Fragment editor to show all values of the current Content Fragment that can be returned using the GraphQL API. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables.