docs for aem headless. Download Advanced-GraphQL-Tutorial-Starter-Package-1. docs for aem headless

 
 Download Advanced-GraphQL-Tutorial-Starter-Package-1docs for aem headless  Last update: 2023-06-27

AEM provides AEM React Editable Components v2, an Node. Learn to create a custom AEM Component that is compatible with the SPA editor framework. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. Explore the power of a headless CMS with a free, hands-on trial. Learn. Headless and AEM; Headless Journeys. Now that we’ve seen the WKND Site, let’s take a closer look at content modeling in Adobe Experience Manager. Sign In. 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. Rich text with AEM Headless. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. After that rebuild the project and run your task bootRun which comes with SpringBoot. Developer. AEM: GraphQL API. Using the GraphQL API in AEM enables the efficient delivery. Understand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. Headless Authoring Journey - Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how to model. Tap Save & Close to save the changes to the Team Alpha fragment. SPA application will provide some of the benefits like. This document provides an overview of the different models and describes the levels of SPA integration. github","contentType":"directory"},{"name":"src","path":"src","contentType. Moving forward, AEM is planning to invest in the AEM GraphQL API. We’ll guide you through configuring your React app to connect to AEM Headless APIs using. jar) to a dedicated folder, i. html with . Or in a more generic sense, decoupling the front end from the back end of your service stack. A headless CMS completely separates the backend (creation and storage) from the frontend (design and. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. com. Learn how to connect AEM to a translation service. js app uses AEM GraphQL persisted queries to query. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. Below is a summary of how the Next. The below video demonstrates some of the in-context editing features with. Learn how to enable, create, update, and execute Persisted Queries in AEM. Use GraphQL schema provided by: use the drop-down list to select the required configuration. The latest version of AEM and AEM WCM Core Components is always recommended. Time; Headless Developer Journey: For developers 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. This persisted query drives the initial view’s adventure list. The following subtypes of raster image file formats that are not supported in Dynamic Media: PNG files that have an IDAT chunk size greater than 100 MB. Developer. In the upper-right corner of the page, click the Docs link to show in-context documentation so you can build your queries that adapt to your own models. Authoring for AEM Headless as a Cloud Service - An Introduction. Following AEM Headless best practices, the Next. This persisted query drives the initial view’s adventure list. AEM Interview Questions. AEM Headless APIs allow accessing AEM content from any client app. AEM WKND Headless React Sandbox. Instead, you control the presentation completely with your own code. The following Documentation Journeys are available for headless topics. Understand how the Content Fragment Model. AEM as a Cloud Service and AEM 6. Navigate to the Software Distribution Portal > AEM as a Cloud Service and download the latest version of the AEM SDK. The Story So Far. Persisted Queries and. Experience LeagueAEM Headless Developer Portal A collection of documentation, tutorials, and technical resources for developing applications using AEM Headless. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. AEM. Looking for a hands-on tutorial? Check out Getting Started with AEM Headless and GraphQL 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. The AEM SDK. This component is able to be added to the SPA by content authors. A modern content delivery API is key for efficiency and performance of Javascript-based frontend. Rich text with AEM Headless. 1. The session will be split in two halves as follows: Part 1: AEM as a headless CMS Where/When/Why? Presenter: Vengadesh Shanmugavelu - Technical Architect, Qatar Airways. Develop Jamstack-ready front-end applications integrated with XM Cloud. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. Anatomy of the React app. For publishing from AEM Sites using Edge Delivery Services, click here. Learn about headless technologies, why they might be used in your project,. Permission considerations for headless content. json to be more correct) and AEM will return all the content for the request page. Examples in documents are based. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. AEM’s GraphQL APIs for Content Fragments. AEM GraphQL API requests. The Story So Far. Prerequisites. AEM Forms Headless Adaptive Forms provide a fast and efficient way to create forms for various platforms including Headless or Headful CMS, React applications, Single Page Applications (SPA), Web Apps, Mobile apps, Amazon Alexa, Google Assistant, WhatsApp, and more. An introduction to the headless features of Adobe Experience Manager as a Cloud Service, and how to author content for your project. The AEM translation management system uses these folders to define the. Using a REST API introduce challenges: Tutorials by framework. Before calling any method initialize the instance with GraphQL endpoint, GraphQL serviceURL and auth if needed Functions getToken(credentialsFilePath) ⇒ Promise. 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;. 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. To securely setup AEM GraphQL for use with Content Fragments and your apps you need to configure various components. The diagram above depicts this common deployment pattern. It is the main tool that you must develop and test your headless application before going live. Topics: Content Fragments. UPDATE 11/13: Samuel Haskell IV, 35, who was arrested last week after a woman’s torso was discovered in Encino, has been charged with three counts of murder. AEM Assets add-on for Adobe Express allows you to directly access the assets stored in AEM Assets from within the Adobe Express user interface. Persisted queries. AEM HEADLESS SDK API Reference Classes AEMHeadless . The application uses two persisted queries: wknd/adventures-all persisted query, which returns all adventures in AEM with an abridged set of properties. Learn about the various data types used to build out the Content Fragment Model. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. Locate the Layout Container editable area beneath the Title. As a result, I found that if I want to use Next. Real-time collaboration and field-level history. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Hit "Finish" and profit!Improve the way you engage with documents. Once we have the Content Fragment data, we’ll integrate it into your React app. 1. A well-defined content structure is key to the success of AEM headless implementation. AEM’s WCM Core Components have built-in functionality to support a normalized JSON schema of exported Pages and Components. Pop music stars Billie Eilish and brother Finneas are putting their money where their mouth is. Configuring the container in AEM. Next. You’ll learn how to format and display the data in an appealing manner. Learn about headless technologies, why they might be used in your project, and how to create. Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how to use them on your project. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. Content Fragment Models define the elements (or fields) that define what content. </li> <li>Understand the steps to implement. AEM is built on four primary Java™ API sets. Learn. X) the GraphiQL Explorer (aka GraphiQL IDE) tool needs to be manually installed, follow instruction from here. Last update: 2023-08-16. First, explore adding an editable “fixed component” to the SPA. I checked the Adobe documentation, including the link you provided. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. 924. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. Headful : Website AnatomyThis exceptional AEM GEMs session features two speakers who are operating AEM as customers. AEM Headless Content Author Journey - Overview; Authoring for Headless with AEM - An Introduction;. AEM WCM Core Components 2. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. Learn how to define and use Content Fragments in Adobe Experience Manager (AEM) for use with GraphQL. Client type. Last update: 2023-09-26. Authoring Basics for Headless with AEM. Explore tutorials by API, framework and example applications. This is a common use case for larger websites. Learn headless concepts, how they map to AEM, and the theory of AEM translation. A collection of Headless CMS tutorials for Adobe Experience Manager. In the previous document of the AEM. The SPA Editor offers a comprehensive solution for supporting SPAs. Edge Delivery Services are part of Adobe Experience Manager and as such Edge Delivery and AEM sites can co-exist on the same domain. <any> . Using the GraphQL API in AEM enables the efficient delivery of Content Fragments. Experience League. Documentation AEM AEM Tutorials AEM Headless Tutorial Tutorial Set up The latest version of AEM and AEM WCM Core Components is always recommended. Anatomy of the React app. Translating Headless Content in AEM. In this video you will: Learn how to create a variation of a Content Fragment. Learn. Learn how variations can be used in a real-world 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. To configure asynchronous submission for an Adaptive Form: In Adaptive Form authoring mode, select the Form Container object and tap to open its properties. @adobe/aem-spa-page-model-manager: provides the API for retrieving content from AEM. This user guide contains videos and tutorials on the many features and capabilities of AEM Assets. Experience League. js app uses AEM GraphQL persisted queries to query. The application uses two persisted queries: wknd/adventures-all persisted query, which returns all adventures in AEM with an abridged set of properties. You also learn how you can create editable SPAs using AEM’s SPA Editor framework, and integrate external SPAs, enabling editing capabilities as required. Vercel’s Frontend Cloud provides the developer experience and infrastructure to build, scale, and secure a faster, more personalized Web. Introduction. Prerequisites. AEM Headless Content Author Journey. This document. The two only interact through API calls. 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. Wait for AEM to. Tutorial Set up. Last update: 2023-04-03 Topics: Content Fragments APIs Created for: Beginner Developer AEM’s Content Services leverages traditional AEM Pages to compose headless REST. X. You have learned the basics of Headless CMS Authoring, with an introduction to authoring with AEMaaCS and in particular, authoring Content Fragments. The Story So Far. Content Fragments architecture. You also learn how you can create editable SPAs using AEM's SPA Editor framework, and integrate external SPAs, enabling editing capabilities as required. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. The following list provides the documentation for APIs supported by AEM: AEM Single-Page Application (SPA) Editor SDK framework JavaScript API references: Assets: The Assets HTTP API allows for create-read-update-delete. js. HTL Use the HTML Template Language (HTL) to create an enterprise-level web framework. This level of integration is the traditional headless model and allows your content authors to create content in AEM and deliver it heedlessly to any number of external services using GraphQL or to edit them from external services using the Assets API. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. src/api/aemHeadlessClient. The latest version of AEM and AEM WCM Core Components is always recommended. Know best practices to make your headless journey smooth,. 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. Developers using the React framework create a SPA and then map areas of the SPA to AEM components, allowing authors to use familiar AEM Sites editing tools. Adobe Experience Manager (AEM) Assets is a digital asset management tool on AEM Platform that allows users to create, manage, and share their digital assets (images, videos, documents, and audio clips) in a web-based repository. Along with the configrations and list of dependencies required to render the form, the directory includes the following important content:. Last update: 2023-06-23. AEM Headless Content Author Journey - Overview; Authoring for Headless with AEM - An Introduction; Authoring Basics for Headless with AEM; Learn about using references in Content Fragments; Learn about defining Metadata and Tagging for Content Fragments; Implementing. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. adobe. js implements custom React hooks. With a headless implementation, there are several areas of security and permissions that should be addressed. 2. “AEM Developer Tools” is an Eclipse plug-in based on the Eclipse plugin for Apache Sling released under the Apache License 2. Persisted queries are GraphQL queries that are created and stored on the Adobe Experience Manager (AEM) server. AEM Forms provide an out of the box template for email notifications. Build from existing content model templates or create your own. It is helpful for scalability, usability, and permission management of your content. js implements custom React hooks. Understand how to create new AEM component dialogs. Along with the configrations and list of dependencies required to render the form, the directory includes the following important content:. Learn about headless content and how to translate it in AEM. Now that you have created some content fragments, you can use AEM’s APIs to deliver them headlessly. AEM Headless Content Author Journey - Overview; Authoring for Headless with AEM - An Introduction; Authoring Basics for Headless with AEM; Learn about using references in Content Fragments; Learn about defining Metadata and Tagging for Content Fragments; Implementing. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. src/api/aemHeadlessClient. References to other content, such as images. react. Understand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. Once we have the Content Fragment data, we’ll integrate it into your React app. infinity. AEM offers the flexibility to exploit the advantages of both models in one project. 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. The AEM translation management system uses these folders to define the. Persisted queries. 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. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. Let’s start by looking at some existing models. When using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM. You can place content managed in AEM Assets in the Express canvas and then save new or edited content in an AEM Assets repository. A PDF document can have multiple annotations. From the AEM Start menu, navigate to Tools > Deployment > Packages. Experience League. Launch Configuration: Main - Calculator. This class provides methods to call AEM GraphQL APIs. A language root folder is a folder with an ISO language code as its name such as EN or FR. Created for: Intermediate. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. In the context of headless content management in AEM, think of a configuration as a workplace within AEM where you can create your Content Models, which define the structure of your future content and. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Design configurations to policies. By deploying the AEM Archetype 41 or later based project to your AEM 6. AEM Headless as a Cloud Service. Sign In. --remote-debugging-port=9222 . First, we’re going to navigate to Tools, then. A well-defined content structure is key to the success of AEM headless implementation. The Content author and other. Session description: There are many ways by which we can. The Angular app is developed and designed to be. The Headless implementation of AEM uses Content Fragments Models and Content Fragments to focus on the creation of structured, channel-neutral, and reusable fragments of content and their cross-channel delivery. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. Use Experience Manager Assets Brand Portal to meet marketing needs by securely distributing approved brand and product assets to external agencies, partners, internal. Tutorial - Getting Started with AEM Headless and GraphQL. Connectors User GuideReact has three advanced patterns to build highly-reusable functional components. Learn how to deep link to other Content Fragments within a. gradlew init this will initiate the . The GraphQL API lets you create requests to access and deliver Content Fragments. Learn how to use Content Fragments in Adobe Experience Manager (AEM) as a Cloud Service with the AEM GraphQL API for headless content delivery. 2. Click Create and Content Fragment and select the Teaser model. Clone and run the sample client application. In the previous document of the AEM headless journey, Path to Your First Experience Using AEM Headless, you then learned the steps needed to implement your first project. This setup establishes a reusable communication channel between your React app and AEM. 0 versions enable the GraphQL runtime platform to expose the Content Fragments through GraphQL API. We’ll look at the benefits of GraphQL, the GraphQL tooling available in AEM, and simple and advanced GraphQL query creation. 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. Learn how to extend an existing Core Component to be used with the AEM SPA Editor. Developer. From the AEM Start Screen, tap Content Fragments to open up the Content Fragments UI. In, some versions of AEM (6. The command creates a directory called react-starter-kit-aem-headless-forms in your current location and clones the Headless adaptive forms React starter app into it. Prerequisites. Learn about the concepts and mechanics of. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. With Adobe services, you can extend applications like Adobe Acrobat Reader DC and integrate our platform into your systems and apps. Knowledge manager: make information authentic and discoverable by centrally managing the information models that keep every piece of information relevant in real time. AEM’s headless features. Learn how to use Content Fragments in Adobe Experience Manager (AEM) as a Cloud Service with the AEM GraphQL API for headless content delivery. Is there any way to get access not to my AEM instance, but to another user's instance? The user can give the URL of the instance in format (not local in. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Headless content management is the practice of decoupling your content management system (CMS) from your front-end. Learn how to define and use Content Fragments in Adobe Experience Manager (AEM) for use with GraphQL. Please find my responses in bold inline to your queries. Developer. Enable developers to add automation. 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 persisted queries in a client application. In the previous document of the AEM headless journey, How to Model Your Content you learned the basics of content modeling in AEM,. Define the trigger that will start the pipeline. A React sandbox application to play with Adobe Experience Manager's GraphQL APIs and WKND content. GraphQL API View more on this topic. How to Access Your Content via AEM Delivery APIs {#access-your-content} . You really don't invest much in the FE design in AEM , as the content is delivered only as JSON to be consumed by your services. These are defined by information architects in the AEM Content Fragment Model editor. Courses Recommended courses Tutorials Events Instructor-led training Browse content library View all learning options. The dialog editor interface is composed of four panes: The palette, in the upper-left corner. A full step-by-step tutorial describing how this React app was build is available. Last update: 2023-04-26 Topics: GraphQL API Created for: Intermediate Developer Deploying an AEM Headless application requires attention to how AEM URLs are. Experience League. The Story So Far. I use the command: java -jar Calculator. Tap Get Local Development Token button. The creation of a Content Fragment is presented as a wizard in two steps. Create Export Destination. React app with AEM Headless View the source code on GitHub A full. Sanity Studio provides content creators with tailored editing interfaces that match the unique ways content drives your business. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. AEM makes it easy to manage your marketing content and assets. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. Persisted queries. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. Browse the following tutorials based on the technology used. Tricky AEM Interview Questions. 0+ version supports GraphQL API to expose the Content Fragment to enable the headless content experience. Created for: Beginner. Experience League. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Using Sling Adapters. 2. The Story So Far. 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. We do this by separating frontend applications from the backend content management system. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Dynamic Media is now part of AEM Assets and works the same way. Perform the following steps to create a Headless adaptive form using Adaptive Forms editor: Before you start: You require the following to create an Adaptive Form. It also seamlessly integrates with external headless digital asset management systems like Cloudinary. In the Submission properties section, enable Use asynchronous submission. AEM is a Java-based. To enable Headless Adaptive Forms on your AEM 6. The author name specifies that the Quickstart jar starts in Author mode. Prerequisites. First select which model you wish to use to create your content fragment and tap or click Next. A Document will be deemed “unique” unless it is an identical copy of a Deployed Document, is a direct language translation of a Deployed Document, differs from other. In this tutorial, we’ll cover a few concepts. Learn how to bootstrap the SPA for AEM SPA Editor. We’ll cover best practices for handling and rendering Content Fragment data in React. This includes higher order components, render props components, and custom React Hooks. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This journey is designed for the translation specialist persona, often referred to as the Translation Project Manager or TPM. 5 or later; AEM WCM Core Components 2. Navigate to the folder you created previously. This integration streamlines the content creation. In this optional continuation of the AEM Headless Developer Journey, you learn how AEM can combine headless delivery with traditional full-stack CMS features. Navigate to the Software Distribution Portal > AEM as a Cloud Service. Learn about the different data types that can be used to define a schema. The AEM Headless client, provided by the AEM Headless Client for JavaScript, must be initialized with the AEM Service host it connects to. Document means an electronic or printed file that is processed or generated by AEM Forms, including Documents that contain data fields where data may be entered and saved. Review existing models and create a model. Following AEM Headless best practices, the Next. You can also use Edge Delivery Services in. Adobe Experience Manager projects can be implemented in both headful and headless models, but the choice is not binary. Tap Home and select Edit from the top action bar. 4. Getting Started with AEM Headless - GraphQL by Adobe Docs Abstract AEM’s GraphQL APIs for Content Fragments supports headless CMS scenarios where external client applications render experiences using content managed in AEM. Select the location and model you wish. See full list on experienceleague. You can expand the different categories within the palette by clicking the desired divider bar. Following AEM Headless best practices, the Next. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. AEM GraphQL API requests. These remote queries may require authenticated API access to secure headless content. The full code can be found on GitHub. This project was bootstrapped with Vite. AEM offers the flexibility to exploit the advantages of both models in one project. From the command line navigate into the aem-guides-wknd-spa. NOTE. Created for: Beginner. Learn about the concepts and mechanics of. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). Before you start your. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. Learn how to configure AEM Publish Dispatcher filters for use with AEM GraphQL. Last update: 2023-08-16. Implementing Applications for AEM as a Cloud Service;. For AEM SPA Editor to integrate a SPA into it’s authoring context, a few additions must be made to the SPA. Topics: Content Fragments View more on this topic. e ~/aem-sdk/author. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. sites. The full code can be found on GitHub. The build will take around a minute and should end with the following message:In this chapter, we enable two dynamic Adventure Detail routes to support editable components; Bali Surf Camp and Beervana in Portland. Unlike the traditional AEM solutions, headless does it without the presentation layer. A primary use case for The Adobe Experience Manager as a Cloud Service (AEM) GraphQL API for Content Fragment Delivery is to accept remote queries from third-party applications or services. By default, the starter kit uses Adobe’s Spectrum components. 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. Prerequisites. GraphQL API View more on this topic. Connectors User GuideThe configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. 1. By utilizing the AEM Headless SDK, you can easily query and fetch Content Fragment data using GraphQL. SPA Editor Overview. can be easily dragged and dropped to build your content. 4. 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. The app leverages your GPU when. 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.