The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. 4+ and AEM 6. We’ll be using the sample Weekend React app that is an AEM headless app, so the majority of the content on this app is powered by content fragments over AEM’s GraphQL APIs. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). In today’s series, we’re going to take a look at modeling basics in Adobe Experience Manager by first looking at the WKND Site. Clone the adobe/aem-guides-wknd-graphql repository:An end-to-end tutorial illustrating how to build-out and expose content using AEM and consumed by a native mobile app, in a headless CMS scenario. Cross-origin resource sharing (CORS) Last update: 2023-09-28. The code is not portable or reusable if it contains static references or routing. The SPA is implemented using: The SPA is implemented using: Maven AEM Project ArchetypeAEM Headless as a Cloud Service. X) the GraphiQL Explorer (aka GraphiQL IDE) tool needs to be manually installed, follow instruction from here. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. In this part of the AEM Headless Content Author Journey, you can learn the (basic) concepts and terminology necessary to understand authoring content when using Adobe Experience Manager (AEM) as a Cloud Service as a Headless CMS. The front-end developer has full control over the app. // src/lib/aem-headless-client. An end-to-end tutorial illustrating how. In this tutorial, we’ll take a look at how we can export content fragments from AEM to Adobe Target in order to personalize headless experiences. Developer. We’ll start by looking at nested models. AEM Headless Web Component /JS deployments are pure JavaScript apps that run in a web browser, that consume and interact with content in AEM in a headless manner. ), executing the persisted GraphQL query. Create Content Fragments based on the. AEM Headless GraphQL Video Series; AEM Headless GraphQL Hands-on Tutorial. Multiple requests can be made to collect as many results as required. Persisted queries are queries that are stored on the Adobe Experience Manager (AEM) server. Created for: Intermediate. Content Fragments used in AEM Headless content modeling, often reference image assets intended for display in the headless experience. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). react $ mvn clean install -PautoInstallSinglePackage Update the Template Policy. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). react project directory. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to power the app. AEM Headless Overview; GraphQL. Once headless content has been. Included in the WKND Mobile AEM Application Content Package below. The AEM Headless client, provided by the AEM Headless Client for JavaScript, must be initialized with the AEM Service host it connects to. AEM Headless Developer Portal; Overview; Quick setup. npm module; Github project; Adobe documentation; For more details and code. Developer. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. AEM 6. An end-to-end tutorial illustrating how to build-out and expose content using AEM’s GraphQL APIs and consumed by an external app, in a headless CMS scenario. AEM Headless applications support integrated authoring preview. AEM Preview is intended for internal audiences, and not for the general delivery of content. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Created for: Intermediate. iOS SwiftUI app with AEM Headl. Headless content management is a key development for today’s web design that decouples the frontend, client-side applications from the backend, content management system. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. 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. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. 0 or later. In today’s rapidly evolving digital landscape, delivering content seamlessly across multiple channels and devices has become essential for businesses. GraphQL API View more on this topic. AEM Headless as a Cloud Service. Topics: SPA Editor View more on this topic. Last update: 2023-09-26. The WKND Site is an Adobe. 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. AEM Headless CMS Developer Journey. Build complex component. . This React. 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. Anatomy of the React app. js (JavaScript) AEM Headless SDK for Java™. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. The <Page> component has logic to dynamically create React components based on the. $ cd aem-guides-wknd-spa. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. The tutorial explores token-based authentication using AEM Assets HTTP APIs but the same concepts and approaches are applicable to apps interacting with AEM Headless GraphQL APIs. Last update: 2023-04-21. For publishing from AEM Sites using Edge Delivery Services, click here. The following configurations are examples. react $ mvn clean install -PautoInstallSinglePackage Update the Template Policy. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. runPersistedQuery(. Click on gear icon of your newly created project and click on ‘Project Settings’. . 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. Clients interacting with AEM Author need to take special care, as. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. Learn how AEM can go beyond a pure headless use case, with. Additional resources can be found on the AEM Headless Developer Portal. AEM's headless CMS features allow you to employ many technologies to provide content across all channels. 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. Map the SPA URLs to. Developer. In the left-hand rail, expand My Project and tap English. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). An end-to-end tutorial illustrating how to build-out and expose content using AEM’s GraphQL APIs and consumed by an external app, in a headless CMS scenario. All of the WKND Mobile components used in this. Implementing Applications for AEM as a Cloud Service; Using. AEM Headless Web Component /JS deployments are pure JavaScript apps that run in a web browser, that consume and interact with content in AEM in a headless manner. 5. View the source code. 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. The following tools should be installed locally: JDK 11;. AEM Headless Web Component/JS deployments are pure JavaScript apps that run in a web browser, that consume and interact with content in AEM in a headless manner. This video series explains Headless concepts in AEM, which includes-. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Ensure that a fresh instance of Adobe Experience Manager, started in author mode, is running locally. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. Experience Manager tutorials. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Learn about headless technologies, why they might be used in your project, and how to create. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Chapter 7 of the tutorial uses a native Android Mobile App to consume content from AEM Content Services. In a real application, you would use a larger. View the source code on GitHub. Learn how to model content and build a schema with Content Fragment Models in AEM. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. Create Content Fragment Models. Modeling data in the real world can be complex. APIs View more on this topic. Each persisted query has a corresponding function in src/lib//aem-headless-client. The use of AEM Preview is optional, based on the desired workflow. Browse the following tutorials based on the technology used. Experience LeagueHello and welcome to the Adobe Experience Manager Headless Series. Last update: 2023-04-21. Last update: 2022-11-11. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. This simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content, and displays the web-optimized image using img element with srcset and picture element. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Learn. Each function in turn invokes the aemHeadlessClient. To learn more about authenticating requests to AEM as a Cloud Service, review the token-based authentication tutorial. Hello and welcome to the Adobe Experience Manager Headless Series. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. The focus lies on using AEM to deliver and manage (un. Learn about deployment considerations for mobile AEM Headless deployments. The tutorial explores token-based authentication using AEM Assets HTTP APIs but the same concepts and approaches are applicable to apps interacting with AEM Headless GraphQL APIs. AEM tutorials. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. AEM is considered a Hybrid CMS. Prerequisites. In, some versions of AEM (6. This tutorial builds upon the WKND GraphQL App , a React app that consumes AEM Content Fragment content over AEM’s GraphQL APIs, however does not provide. 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. js. A popup will open, click on “ Copy ” to copy the content. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. In today’s series, we’re going to take a look at modeling basics in Adobe Experience Manager by first looking at the WKND Site. Create Content Fragments based on the. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. Example server-to-server app Persisted queries are queries that are stored on the Adobe Experience Manager (AEM) server. What do you think about it? Afterwards, I would like to do the following two tutorials, among others because they are compatible with AEM 6. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a React App that consumes the content over AEM Headless GraphQL APIs. Each persisted query has a corresponding function in src/lib//aem-headless-client. AEM Headless as a Cloud Service. AEM GraphQL API requests. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. AEM GraphQL API requests. Merging CF Models objects/requests to make single API. js (JavaScript) AEM Headless SDK for. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Deploy all of the updates to a local AEM environment from the root of the project directory, using your Maven skills: $ cd aem-guides-wknd-spa. The execution flow of the Node. Let’s create some Content Fragment Models for the WKND app. @adobe/aem-spa-page-model-manager: provides the API for retrieving content from AEM. Topics: GraphQL API View more on this topic. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Developer. js implements custom React hooks. runPersistedQuery(. In this tutorial, you learn how to integrate the requests for persisted queries into the sample WKND GraphQL React app using the AEM Headless Client for JavaScript. This guide uses the AEM as a Cloud Service SDK. js (JavaScript) AEM Headless SDK for Java™. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. Created for: Intermediate. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. The examples below use small subsets of results (four records per request) to demonstrate the techniques. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Server-to-server Node. X. 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. View. js application run from the command line to update asset metadata on AEM as a Cloud Service using Assets HTTP API. Tutorial: Developers: 2 hours: AEM Developer Portal: This collection of resources are provided for both new and experienced developers. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a React App that consumes the content over AEM Headless GraphQL APIs. AEM Headless APIs allow accessing AEM content from any client app. AEM Headless Tutorial - iOS app by Adobe Docs Abstract Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Dynamic routes and editable components. Open the Program containing the AEM as a Cloud Service environment to integrate set up the Service Credentials for. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Select WKND Shared to view the list of existing. Developer. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Next, navigate to AEM to verify the updates and allow the Custom Component to be added to the SPA. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. x. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. Welcome to the multi-part tutorial for developers looking to augment an existing Remote SPAs with editable AEM content using AEM SPA Editor. Dynamic routes and editable components. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all. Learn about AEM’s GraphQL capabilities through the in-depth walk-through of Content Fragments and and AEM’s GraphQL APIs and development tools. Resource Description Type Audience Est. Dispatcher filters. This tutorial will cover the following topics: Create content that represent an Event using Content Fragments Define an AEM Content Services end-points using AEM Sites’. The use of AEM Preview is optional, based on the desired workflow. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless technology, how AEM. This simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content, and displays the web-optimized image using img element with srcset and picture element. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. In previous releases, a package was needed to install the GraphiQL IDE. Last update: 2023-04-21. Build a React JS app using GraphQL in a pure headless scenario. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Documentation AEM AEM Tutorials AEM Headless Tutorial How to use AEM React Editable Components v2 How to use AEM React Editable Components v2 AEM provides AEM React Editable Components v2 , an Node. Author in-context a portion of a remotely hosted React application. // src/lib/aem-headless-client. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). In, some versions of AEM (6. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. js, that calls the AEM GraphQL end point, and returns the adventure data. The latest version of AEM and AEM WCM Core Components is always recommended. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. See how AEM powers omni-channel experiences. Wrap the React app with an initialized ModelManager, and render the React app. A collection of Headless CMS tutorials for Adobe Experience Manager. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. 5 the GraphiQL IDE tool must be manually installed. Developing View more on this topic. 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. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. Objective. Learn how AEM can go beyond a pure headless use case, with. AEM is used as a headless CMS without using the SPA Editor SDK framework. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. Throughout this tutorial, we’ll walk you through the step-by-step process of building a web experience using React and AEM Headless APIs with GraphQL. Learn how features like. Anatomy of the React app. An end-to-end tutorial illustrating how to build-out and expose content using AEM's GraphQL APIs and consumed by an external app, in a headless CMS scenario. AEM Headless applications support integrated authoring preview. AEM Headless mobile deployments. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Browse the following tutorials based on the technology used. Scroll to the bottom and click on ‘Add Firebase to your web app’. Content Fragment Variations. The Android Mobile App. Experience League. Next, navigate to AEM to verify the updates and allow the OpenWeather component to be added to the SPA. View the source code on GitHub. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. This Web Component application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and render a portion of UI, accomplished using pure JavaScript. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). From the AEM Start screen, navigate to Tools > General > GraphQL Query Editor. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. Chapter 4 - Defining Content Services Templates. js. AEM 6. Sign In. Next, deploy the updated SPA to AEM and update the template policies. : Guide: Developers new to AEM and headless: 1. By the way, since I asked my original question, I found out that the "AEM Headless Developer Journey" will be probably a good starting point for me to get an overview of some available headless features. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. ), executing the persisted GraphQL query. Tap the Technical Accounts tab. This Web Component application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and render a portion of UI, accomplished using pure JavaScript. Topics: Content Fragments View more on this topic. 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. Next, navigate to AEM to verify the updates and allow the OpenWeather component to be added to the SPA. From the AEM Start screen, navigate to Tools > General > GraphQL Query Editor. Understanding how to add properties and content to an existing component is a powerful technique to expand the capabilities of an AEM SPA Editor implementation. Tap the ellipsis next to the environment in the Environments section, and select Developer Console. 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. Anatomy of the React app. It’s ideal for getting started with the basics. Chapter 4 of the AEM Headless tutorial covers the role of AEM Editable Templates in the context of AEM Content Services. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). react. Let’s take a look at the learning objectives for this tutorial. To learn more about authenticating requests to AEM as a Cloud Service, review the token-based authentication tutorial. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Author in-context a portion of a remotely hosted React. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. It is the main tool that you must develop and test your headless application before going live. GraphQL Endpoints. Next several Content Fragments are created based on the Team and Person models. Last update: 2023-10-02. The WKND Site is an Adobe Experience Manager sample reference site. Let’s create some Content Fragment Models for the WKND app. AEM GraphQL API requests. The use of AEM Preview is optional, based on the desired workflow. 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. Server-to-server Node. Select WKND Shared to view the list of existing. The below video demonstrates some of the in-context editing features with. Wrap the React app with an initialized ModelManager, and render the React app. Locate the Layout Container editable area beneath the Title. Headless AEM emerges as a modern architectural approach that revolutionizes content management, offering flexibility, scalability, and faster content delivery. React environment file React uses custom environment files , or . Developer. npm module; Github project; Adobe documentation; For more details and code. 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. x. This tutorial builds upon the WKND GraphQL App , a React app that consumes AEM Content Fragment content over AEM’s GraphQL APIs, however does not provide. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the SPA against the AEM JSON model API. Let’s create some Content Fragment Models for the WKND app. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. AEM Headless as a Cloud Service. AEM Headless GraphQL Video Series. Author in-context a portion of a remotely hosted React application. Tap Create to bring up the New Content Fragment dialog and enter the following values: Tap Create. 0 or later. env files, stored in the root of the project to define build-specific values. js implements custom React hooks. Chapter 6 of the AEM Headless tutorial covers ensuring all the necessary packages, configuration and content are on AEM Publish to allow consumption from the Mobile App. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Tutorials by framework. Example applications are a great way to explore the headless. Next Steps. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. Browse the following tutorials based on the technology used. Experience League. The tutorial explores token-based authentication using AEM Assets HTTP APIs but the same concepts and approaches are applicable to apps interacting with AEM Headless GraphQL APIs. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. Send GraphQL queries using the GraphiQL IDE. You’ll learn how to set up your development environment, establish a connection between React and AEM, retrieve content using GraphQL queries, and render it dynamically in your web application. This document provides an overview of the different models and describes the levels of SPA integration. json to be more correct) and AEM will return all the content for the request page. Tap Create new technical account button. The WKND Site is an Adobe Experience Manager sample reference site. You’ll learn how to set up your development environment, establish a connection between React and AEM, retrieve content using GraphQL queries, and render it dynamically in your web application. $ cd aem-guides-wknd-spa. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. The <Page> component has logic to dynamically create React components. For publishing from AEM Sites using Edge Delivery Services, click here. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. Dynamic navigation is implemented using React Router and React Core Components. Rich text with AEM Headless. Adobe Experience Manager projects can be implemented in both headful and headless models, but the choice is not binary. This Web Component application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and render a portion of UI, accomplished using pure JavaScript code.