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. We do this by separating frontend applications from the backend content management system. Installation The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. Below is a summary of how the iOS application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. In this video you will: Learn how to use Content Fragments references to link one or more Content Fragments. npm module; Github project; Adobe documentation; For more details and 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. AEM Headless Overview; GraphQL. js Web Component iOS Android Node. 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. 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 server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Populates the React Edible components with AEM’s content. Cloud Service; AEM SDK; Video Series. Install AEM SPA Editor JS SDK npm dependencies. Certain points on the SPA can also be enabled to allow limited editing. The full code can be found on GitHub. View the source code on GitHub. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The full code can be found on GitHub. js application is invoked from the command line. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. The tutorial includes defining Content Fragment Models with more advanced data. The author name specifies that the Quickstart jar starts in Author mode. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. The Single-line text field is another data type of Content. Rich text with AEM Headless. $ cd aem-guides-wknd-spa. Developer. An Adaptive Form template: A template provides a basic structure and defines appearance (layouts and styles) of an Adaptive Form. 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 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 AEM Headless SDK for JavaScript also supports Promise syntax. AEM provides AEM React Editable Components v2, an Node. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. NET Core rendering host project and Sitecore instance using Docker. Sitecore provides a step-by-step walkthrough on using a provided “Getting Started” sample template to set up an ASP. Build from existing content model templates or create your own. AEM Headless Overview; GraphQL. AEM Headless Overview; GraphQL. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. AEM Headless Overview; GraphQL. Understand how the Content Fragment Model. Create Content Fragment Models. Persisted queries. AEM Headless Overview; GraphQL. Quick links. Opening the multi-line field in full screen mode enables additional formatting tools like Paragraph type, find and replace, spell check, and more. Cloud Service; AEM SDK; Video Series. AEM Headless APIs allow accessing AEM content from any client app. 3. AEM Headless Developer Portal; Overview; Quick setup. Understand Headless in AEM; Learn about CMS Headless Development; Getting Started with AEM Headless as a Cloud Service; Path to your first experience. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Welcome to the multi-part tutorial for developers looking to augment an existing Remote SPAs with editable AEM content using AEM SPA Editor. Developer. 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. 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. Prerequisites. jar. Build from existing content model templates or create your own. js application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. AEM’s GraphQL APIs for Content Fragments. AEM Headless Developer Portal; Overview; Quick setup. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. Select the authentication scheme. Build a React JS app using GraphQL in a pure headless scenario. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. AEM Headless Overview; GraphQL. Additionally, the Sitecore GitHub account provides an example Helix project. This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. AEM WCM Core Components 2. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. If you currently use AEM, check the sidenote below. Java™ API Jar - The Java™ Jar/Maven Dependency that exposes all allowed Java™ APIs that can be used to develop against AEM as a Cloud Service. This class provides methods to call AEM GraphQL APIs. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. AEM Headless Overview; GraphQL. jar. e ~/aem-sdk/author. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Deploy the AEM Project to AEM SDK. GraphQL Model type ModelResult: object ModelResults: object. You signed out in another tab or window. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. An end-to-end tutorial illustrating how to build. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Tap Get Local Development Token button. Following AEM Headless best practices, the iOS application uses AEM GraphQL persisted queries to. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of 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 other AEM Headless resources. The Headless Client SDK will automatically encode any query variables appropriately in the request. The AEM Headless SDK for JavaScript also supports Promise syntax. 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 tutorial covers the end to end creation of the SPA and the. The following video provides a high-level overview of the concepts that are covered in this tutorial. src/api/aemHeadlessClient. So in this regard, AEM already was a Headless CMS. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the image, so change the. The SDK consists of various artifacts—Quickstart Jar and Dispatcher Tools. Copy the Quickstart JAR file to ~/aem-sdk/author and rename it to aem-author-p4502. js (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL. npm module; Github project; Adobe documentation; For more details and code. Use GraphQL schema provided by: use the drop-down list to select the required configuration. Integrate personalization into a React-based AEM Headless app using the Adobe Web SDK. Overview. The zip file is an AEM package that can be installed directly. Prerequisites. View. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. AEM Headless applications support integrated authoring preview. Search for “GraphiQL” (be sure to include the i in GraphiQL ). You also learn how you can create editable SPAs using AEM’s SPA Editor framework, and integrate external SPAs, enabling editing capabilities as required. Dynamic navigation is implemented using React Router and React Core Components. 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 AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Developer. jar. X. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. AEM HEADLESS SDK API Reference Classes AEMHeadless . Experience LeagueAEM Headless as a Cloud Service. 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 server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Deploy the AEM Project to AEM SDK. Before calling any method initialize the instance with GraphQL endpoint, GraphQL serviceURL and auth if needed Typedefs Model: object . AEM Headless Tutorial - React App by Adobe Docs Abstract Example applications are a great way to explore the headless capabilities of Adobe - 541985. The AEM Headless SDK for JavaScript also supports Promise syntax. Formerly referred to as the Uberjar. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. SDK contains helper function to get Auth token from credentials config file. AEM Headless Developer Portal; Overview; Quick setup. You’ll learn how to format and display the data in an appealing manner. Advanced concepts of AEM Headless overview. TIP. The execution flow of the Node. AEM as a Cloud Service lets you capitalize on the AEM applications in a cloud-native way, so that you can: Scale your DevOps efforts with Cloud Manager: CI/CD framework, autoscaling, API connectivity, flexible deployment modes, code quality gates, service delivery transparency, and guided updates. AEM Headless SPA deployments. The code is not portable or reusable if it contains static references or routing. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. Last update: 2023-07-11. Last update: 2023-11-17. This Android application demonstrates how to query content using the GraphQL APIs of AEM. See moreBrowse the following tutorials based on the technology used. Dynamic navigation is implemented using React Router and React Core Components. With a traditional AEM component, an HTL script is typically required. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. Prerequisites. SPA Editor Overview. AEM Headless Overview; GraphQL. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Contribute to adobe/aem-headless-client-nodejs development by creating an account on GitHub. The full code can be found on GitHub. Learn how to define and use Content Fragments in Adobe Experience Manager (AEM) for use with GraphQL. It does not look like Adobe is planning to release it on AEM 6. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. Open the Page Editor’s side bar, and select the Components view. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. js (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL. AEM Headless Developer Portal; Overview; Quick setup. 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 provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. js (JavaScript) AEM Headless SDK for Java™. 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. Confirm with Create. js app. Cloud Service; AEM SDK; Video Series. Learn how to define and use Content Fragments in Adobe Experience Manager (AEM) for use with GraphQL. jar. 5 the GraphiQL IDE tool must be manually installed. The following tools should be installed locally: JDK 11;. The use of Android is largely unimportant, and the consuming mobile app. Quick links. The AEM Headless SDK supports two types of authentication:This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Open the Page Editor’s side bar, and select the Components view. 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. The React WKND App is used to explore how a personalized Target activity using Content. We’ll guide you through configuring your React app to connect to AEM Headless APIs using. For more information on the AEM Headless SDK, see the documentation here. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. AEM Headless supports a offset/limit and cursor-based pagination queries to smaller subsets of a larger result set. Select Edit from. The following configurations are examples. You switched accounts on another tab or window. 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 AEM Headless SDK. Cloud Service; AEM SDK; Video Series. This code assumes a persisted query with the name wknd/adventureNames has been created on AEM Author and published to AEM Publish. Cloud Service; AEM SDK; Video Series. Transferring a persisted query to your Production environment Persisted queries should always be created on an AEM Author service and then published (replicated) to an AEM Publish service. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. AEM Headless Developer Portal; Overview; Quick setup. AEM Headless Overview; GraphQL. This guide uses the AEM as a Cloud Service SDK. The following video provides a high-level overview of the concepts that are covered in this tutorial. AEM Headless Developer Portal; Overview; Quick setup. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. Deploy the AEM Project to AEM SDK. The tutorial includes defining Content Fragment Models with. AEM provides AEM React Editable Components v2, an Node. Note . js app uses AEM GraphQL persisted queries to query. View the source code on GitHub. The preview experience links the AEM Author’s Content Fragment editor with your custom app (addressable via HTTP), allowing for a deep link into the app that renders the Content Fragment being previewed. This code assumes a persisted query with the name wknd/adventureNames has been created on AEM Author and published to AEM Publish. The Single-line text field is another data type of Content. The following video provides a high-level overview of the concepts that are covered in this tutorial. 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. Experience League. @adobe/aem-spa-component-mapping: provides the API that map AEM content to SPA components. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. Following AEM Headless best practices, the Next. 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 (JavaScript) AEM Headless SDK for Java™. With our headless CMS you can create structured content once and reuse it across any digital touchpoint via APIs. 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. Advanced concepts of AEM Headless overview. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. AEM Headless tutorials - If you prefer to learn by doing and have existing knowledge of AEM, take our hands-on tutorials organized by API and framework, that explore creating and using applications built on AEM Headless. Persisted queries. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. AEM Headless Developer Portal; Overview; Quick setup. js (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. In AEM 6. It has pre-formatted components containing. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. js application is as follows: The Node. For AEM SPA Editor to integrate a SPA into it’s authoring context, a few additions must be made to the SPA. Reload to refresh your session. Opening the multi-line field in full screen mode enables additional formatting tools like Paragraph type, find and replace, spell check, and more. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. A “Hello World” Text component displays, as this was automatically added when generating the project from. js (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL. 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. 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. import AEMHeadless from '@adobe/aem-headless-client-js'; // Initialize the AEMHeadless client with connection details const. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. The following video provides a high-level overview of the concepts that are covered in this tutorial. Ensure that AEM Author service is running on port 4502. Authorization requirements. Prerequisites. AEM Headless Overview; GraphQL. Using Rich Text with AEM Headless—Shows how to manage, consume, and render rich text content in an AEM Headless implementation. 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. Learn how to integrate AEM Headless with Adobe Target, by exporting AEM Content Fragments to Adobe Target, and use them to personalize headless experiences using the Adobe Experience Platform Web SDK’s alloy. The examples below use small subsets of results (four records per request) to demonstrate the techniques. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). AEM’s GraphQL APIs for Content Fragments. Web Component/JS deployments differ from SPA deployments in that they don’t use a robust SPA framework, and are expected to be embedded in the context. import AEMHeadless from '@adobe/aem-headless-client-js'; // Initialize the AEMHeadless client with connection details const. The AEM Headless SDK for JavaScript also supports Promise syntax. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. AEM Headless Developer Portal; Overview; Quick setup. Ensure that AEM Author service is running on port 4502. 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 Queries; Basic Tutorial. All of the WKND Mobile components used in this. x. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). @adobe/aem-spa-component-mapping: provides the API that map AEM content to SPA components. js) Remote SPAs with editable AEM content using AEM SPA Editor. The onboarding journey is written specifically for the system administrator of customer’s new to AEM as a Cloud Service and to AEM in general. Before calling any method initialize the. AEM Headless Developer Portal; Overview; Quick setup. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. json to be more correct) and AEM will return all the content for the request page. Currently t he GraphQL feature is enabled by default only on the AEM SDK from 2021-02-04 or newer on AEM as Cloud Service. AEM Headless Overview; GraphQL. Single page applications (SPAs) can offer compelling experiences for website users. 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. 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. js) Remote SPAs with editable AEM content using AEM SPA Editor. In, some versions of AEM (6. Prerequisites. The AEM as a Cloud Service SDK is composed of the following artifacts: Quickstart Jar - The AEM runtime used for local development. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Cloud Service; AEM SDK; Video Series. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Persisted queries. js (JavaScript) AEM Headless SDK for Java™. Cloud Service; AEM SDK; Video Series. e ~/aem-sdk/author. 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. The AEM as a Cloud Service SDK is composed of the following artifacts: Quickstart Jar - The AEM runtime used for local development. This class provides methods to call AEM GraphQL APIs. Java™ API Jar - The Java™ Jar/Maven Dependency that exposes all allowed Java™ APIs that can be used to develop against AEM as a Cloud Service. AEM Headless Developer Portal; Overview; Quick setup. import AEMHeadless from '@adobe/aem-headless-client-js'; // Initialize the AEMHeadless client with connection details const. Dynamic navigation is implemented using React Router and React Core Components. AEM Headless applications support integrated authoring preview. It is also possible to connect the app to a local Author instance using the AEMaaCS SDK using basic authentication. Tap the Local token tab. Cloud Service; AEM SDK; Video Series. An Adobe IMS Configuration that facilitates the authentication between AEM and Adobe Target. 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. The following configurations are examples. 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. Integrate requests for persisted queries into the sample WKND GraphQL React app using the AEM Headless JavaScript SDK. From the AEM Start screen, navigate to Tools > General > GraphQL Query Editor. Cloud Service; AEM SDK; Video Series. jar) to a dedicated folder, i. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Server-to-server Node. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. js application run from the command line to update asset metadata on AEM as a Cloud Service using Assets HTTP API. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Since the SPA renders the component, no HTL script is needed. @adobe/aem-spa-page-model-manager: provides the API for retrieving content from AEM. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. npm module; Github project; Adobe documentation; For more details and code samples for AEM React Editable Components v2 review the technical. The above instructions are to connect the React app to the AEM Publish service, however to connect to the AEM Author service obtain a local development token for your target AEM as a Cloud Service environment. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. Below is a summary of how the React application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. The tutorial includes defining Content Fragment Models with. Wrap the React app with an initialized ModelManager, and render the React app. Content authors cannot use AEM's content authoring experience. Create (or reuse) an AEM User Group that grants access to assets folders containing content exposed by GraphQL APIs. Formerly referred to as the Uberjar. e ~/aem-sdk/author. Build React app that fetches content/data from AEM GraphQL API, also see how AEM Headless JS SDK is used. 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. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. An end-to-end tutorial illustrating how to build. Build a React JS app using GraphQL in a pure headless scenario. Navigate to the Software Distribution Portal > AEM as a Cloud Service and download the latest version of the AEM SDK. Cloud Service; AEM SDK; Video Series. AEM Headless APIs allow accessing AEM content from any client app. AEM GraphQL API requests. View the source code. jar) to a dedicated folder, i. AEM HEADLESS SDK API Reference Classes AEMHeadless . Ensure that AEM Author service is running on port 4502. AEM Headless APIs allow accessing AEM content from any client app. Learn about the various data types used to build out the Content Fragment Model. import AEMHeadless from '@adobe/aem-headless-client-js'; // Initialize the AEMHeadless client with connection details const aemHeadlessClient =. To determine the correct approach for managing build dependent configurations, reference the AEM Headless app’s framework (for example, React, iOS, Android™, and so on) documentation, as the approach varies by framework. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. Cloud Service; AEM SDK; Video Series. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Navigate to the Software Distribution Portal > AEM as a Cloud Service and download the latest version of the AEM SDK. Cloud Service; AEM SDK; Video Series. Example applications are a great way to explore the headless. Cloud Service; AEM SDK; Video Series. This code assumes a persisted query with the name wknd/adventureNames has been created on AEM Author and published to AEM Publish. 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 any in. The following video provides a high-level overview of the concepts that are covered in this tutorial. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Following AEM Headless best practices, the Next. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless.