AEM React Editable Components work with both SPA Editor or Remote SPA React apps. Drag some of the enabled components into the Layout Container. Navigate to the root of the project /aem-guides-wknd-spa and deploy the project to AEM using Maven: $ cd . What’s new in Experience Manager 6. 7. The above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. With the Bulk Editor, you can add, modify, delete, filter, and export the rows, save modifications, and import a set of rows. After reading this document, you should: Understand the basic function of the SPA Editor. It allows front-end developers to develop such SPA like they are used to, while having non-technical authors to edit the content in-place. For a step-by-step guide to. If left relative, when the SPA is loaded in SPA Editor for authoring, these URLs default to use AEM’s host rather than the SPA, resulting in 404 requests as illustrated in the image below. This page gives an overview of how SPA support is structured in AEM, how the. Congratulations, you have just created your first AEM SPA Editor Project! The SPA is quite simple. Configure AEM for SPA Editor. Learn how to use an Adobe Experience Manager (AEM) Maven project as a starting point for an Angular application integrated with the AEM SPA Editor. Create your first Angular Single Page Application (SPA) that is editable in Adobe Experience Manager, AEM with the WKND SPA. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM Core WCM Components . 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-context authoring. For example: AEM is accessed via: SPA is accessed via Since AEM and the SPA are accessed from different domains, web browsers enforce security policies such as cross-origin resource sharing. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Hi. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Understand AEM best practices for creating website. 5 in April 2019. Different domains. Content fragments can be referenced from AEM pages, just as any other asset type. Create the Sling Model. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Single page applications (SPAs) can offer compelling experiences for website users. The AEM Brackets Extension provides a smooth workflow to edit AEM components and client libraries. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. Click on “Create Activity” button and select “Experience Targeting”. For publishing from AEM Sites using Edge Delivery Services, click here. The mapping can be done with Sling Mapping defined in /etc/map. This Next. Tap Home and select Edit from the top action bar. Learn how to create a custom weather component to be used with the AEM SPA Editor. You will get hands on experience with Java Content Repository. Add Adobe Target to your AEM web site. Scenario 1: Personalization using AEM Experience Fragment Offers. Solved: Hi, I'm trying to create an Angular SPA which references XF's. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. 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. js, SvelteKit, etc. 2. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. This article talks about the advantages of single-page applications over multi-page applications, and the SPA features rolled out with different versions of AEM, along with the details of how it works with AEM. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). 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. can be angular or react for a Single Page App that implements the SPA Editor). Welcome to the multi-part tutorial for developers looking to augment an existing Remote SPAs with editable AEM content using AEM SPA Editor. AEM 6. Wrap the React app with an initialized ModelManager, and render the React app. 5. We believe it is beneficial for any developer involved in an AEM SPA Editor project to complete this tutorial. Deploy the updated SPA to AEM to see the changes. Click on “Next”. Availability: Cloud Service, 6. The mapping can be done with Sling Mapping defined in /etc/map. From the AEM Start menu, navigate to Tools > Deployment > Packages. Deploy the starter project to a local instance of AEM. 3-SNAPSHOT. zip. The mapping can be done with Sling Mapping defined in /etc/map. Locate the Layout Container editable area beneath the Title. Add Adobe Target to your AEM web site. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. 1. While the SPA codebase is managed outside of AEM, an AEM project is required to setup supporting configuration and content requirements. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. Estimate 1-2 hours to get through each part of the tutorial. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. Deep-dive into key innovations such as Single-Page Application (SPA) Editor, Content & Experience fragments, In-context editing, and many more. The SPA Editor offers a comprehensive solution for supporting SPAs. Add a new Text component to the main Layout Container. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. Option 2: Share component states by using a state library such as NgRx. Next Steps. In the previous two chapters, we mapped editable component content from the SPA’s Home view to corresponding Remote SPA root page in AEM at /content/wknd-app/us/en/. g. 3-SNAPSHOT. View. A SPA and AEM have different domains when they are accessed by end users from the different domain. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. The tutorial covers the end to end creation of the SPA and the. The latest version of the editor allows you to edit single-page sites and immediately submit changes. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Stop the webpack dev server. From the command line navigate into the aem-guides-wknd-spa. This document will guide you through these steps. The following AEM documentation includes everything from essential guides for those new to the content management system (CMS) to videos, tutorials, and further learning resources to get the most out of AEM 6. 5. 5 ready for the world - translation integration & best practices; 2019. 0 (either apis or apis-with-deprecations type) to a clean AEM 6. In the IDE of your choice open the core module at aem-guides-wknd. Install the finished tutorial code directly using AEM Package Manager. 5 Sites - Support for react and Angular - SPA Editor-> A better experiences built with SPA Javascript frameworks - SPA Editor for in-context editing, composition, configuration and layout the experiences. In the IDE, open the ui. Hybrid and SPA with AEM; Enabling JSON Export for a Component; SPA Introduction and Walkthrough; SPA WKND Tutorial; Getting Started using React; Getting Started using Angular; SPA Deep Dives; Developing SPAs for AEM; SPA Editor Overview; SPA Blueprint; SPA Page Component; Dynamic Model to Component Mapping; Model. Developer. It is mainly focused on four areas: Content Velocity. The above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. Hybrid and SPA with AEM; SPA Introduction and Walkthrough; SPA WKND Tutorial; Getting Started using React; Implementing a React Component for SPA; Getting Started using Angular; SPA Deep Dives; Developing SPAs. I have created sling model for each SPA-Enabled component and used componentExporter. Experience League"Experiencing Adobe Experience Manager" or "Experience AEM" or "EAEM" blog content is licensed under a Creative Commons Attribution 4. A project template for AEM-based applications. Hi All, I have created project using archetype 23 for frontEndModule as react. The changes made to the Header are currently only visible through the webpack dev server. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. 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. 5 2. Once headless content has been. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM Core WCM Components . This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Stop the webpack dev server. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. Before even attempting to integrate the two systems, make sure you have access to the following: Adobe Target accoun t with sufficient (at least approver-level) access. 5 contents. For SPA based CSM, you got two options. 1. 0. Type: Boolean. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. If you refer to We Retail Journal example, the related client lib config is defined in the file - 322742Learn how to quickly create an AEM site using a site template. Brief process: AEM exports JSON content through Sling Model, and SPA Editor SDK maps JSON to React components. to gain points, level up, and earn exciting badges like the newThe above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. Stop the webpack dev server. I have created sling model for each SPA-Enabled component and used componentExporter. First, explore adding an editable “fixed component” to the SPA. The delivery of the JSON data is delegated downward to each component (from page, to paragraph, to component, etc. The mapping can be done with Sling Mapping defined in /etc/map. react. 5. js + Headless GraphQL API + Remote SPA Editor; Next. Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). The importance of this configuration is explored later. Difference between traditional client server architecture and single page application. 8+ - use wknd-spa-react. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM Core WCM Components . For publishing from AEM Sites using Edge Delivery Services, click here. This chapter walks through the creation of an AEM project that contains necessary configurations: AEM WCM Core Components proxies; AEM Remote SPA Page proxy;. From the AEM Start screen, navigate to Tools > General > GraphQL. 5 the GraphiQL IDE tool must be manually installed. In the next few chapters more functionality is added. Select Edit from the mode-selector in the top right of the Page Editor. Level 2 13-08-2020 20:28 PDT. 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. See the NPM package @adobe/aem-spa-page-model-manager. Every part of the Bulk Editor (or components derived from the Bulk Editor) can be configured. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of AEM. Open the Page Editor’s side bar, and select the Components view. The SPA Editor offers a comprehensive solution for supporting SPAs. Since the SPA renders the component, no HTL script is needed. Ensure only the components which we’ve provided SPA implementations for are allowed:With a traditional AEM component, an HTL script is typically required. Editable sections for authors to insert components in-context. This tutorial is an introduction to SPA development to be used with AEM's SPA Editor JS SDK. Level 4. Understanding how to extend an existing component is a powerful. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. AEM provides AEM React Editable Components v2, an Node. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. Learn to use the delegation pattern for extending Sling Models and features of Sling Resource Merger. 3. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). 2. These are sample apps and templates based on various frontend frameworks (e. Headless CMS - only JSON API delivery. Browse the following tutorials based on the technology used. The SPA is implemented. Map SPA components to AEM components | Getting Started with the AEM SPA Editor and React | Adobe Experience Manager Overview 1 - Defining Content. phychem_ad. The central idea of SPAs in AEM is the idea of mapping SPA components to AEM components and updating the component when the content is modified (and conversely). js) Remote SPAs with editable AEM content using AEM SPA Editor. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. Bootstrap the SPA. AEM provides several tools and resources for creating workflow models, developing workflow steps, and for programmatically interacting with workflows. react project directory. $ mvn clean install -PautoInstallSinglePackage Hi All, I have created project using archetype 23 for frontEndModule as react. As in newer AEM verison we are using Editable templates, and how do we achieve simil. When defining the page properties to be available for bulk editing you need to consider certain implications. ; Type: cq:RolloutConfig; Add the following properties to this node: Name: jcr:title Type: String Value: An identiying title that will appear in the UI. can be angular or react for a Single Page App that implements the SPA Editor). Open a new command line and check if the installation was performed properly by running this command: java -version. Also included are AEM WCM Components - React Core implementation and AEM WCM Components - Spa editor - React Core implementation. 0 In-context editing of web apps that are hosted on AEM. exl-id. Created for: Beginner. 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. Locate the Layout Container editable area right above the Itinerary. (FYI, the Co. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Lets see how to create a project using AEM + React. js with a fixed, but editable Title component. Adobe Experience Manager (AEM) is a robust solution for content management, spreading from text and encompassing media too. Developer. Learn about the different data types that can be used to define a schema. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. In the IDE, open the ui. 5. js + Headless GraphQL API + Remote SPA Editor; Next. js application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Adobe Experience Manager Sites & More. Defining mapping for editable components for the SPA’s dynamic routes is similar however we must come up 1:1 mapping scheme between instances of the route. The importance of this configuration is explored later. As of 2022, Adobe Experience Manager is currently a 6. Learn to use the delegation pattern for extending Sling Models. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. In the previous two chapters, we mapped editable component content from the SPA’s Home view to corresponding Remote SPA root page in AEM at /content/wknd-app/us/en/. Only a few pages will need authoring but the rest of the application will not need it. Read Full Blog The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. 5 can make it possible. 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. This user guide contains videos and tutorials helping you maximize your value from AEM. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. 5. xml file. Navigate to the Software Distribution Portal > AEM as a Cloud Service. I am using SPA Editor of AEM 6. I have created sling model for each SPA-Enabled component and used componentExporter. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. 5. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. Table of contents. Custom Exporter API - You can expose a custom JSON API for the page component and expose the data on it. The SPA is implemented using: Maven AEM Project Archetype. Know the requirements for building a fully editable SPA for AEM. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. While the SPA codebase is managed outside of AEM, an AEM project is required to setup supporting configuration and content requirements. The latest version of AEM is Adobe Experience Manager 6. This page gives an overview of how SPA support is structured in AEM, how the SPA Editor works, and how the SPA framework and AEM keep in synch. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. 4 SP2. Objective. The latest version of AEM is Adobe Experience Manager 6. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. AEM's SPA Editor provides support for in-context editing of a Single Page Application or SPA. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. Before even attempting to integrate the two systems, make sure you have access to the following: Adobe Target accoun t with sufficient (at least approver-level) access. Tutorials by framework. Tap on the Bali Surf Camp card in the SPA to navigate to its route. Sling Models typically function to encapsulate complex server-side business logic for AEM Components. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. . js) Remote SPAs with editable AEM content using AEM SPA Editor. 5. 5. Feel comfortable using AEM to design your own components from scratch. all-1. The Latest Adobe Experience Manager (AEM) 6. (SPA) Editor, Content & Experience fragments, In-context editing, and many more. Bulk editing of page properties lets you edit the properties of multiple pages at once. Used by the Geometrixx title component. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. 5 release is customer focussed, it conveys development that empowers. Please join us to learn more about the SPA Editor in this. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. ) to render content from AEM Headless. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . 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. . First, update the Maven dependencies of your project. 5 will help organizations build their customer experience journey and deliver the right content to users in a smarter and faster way. 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. Set up local AEM environment. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The following AEM documentation includes everything from essential guides for those new to the content management system (CMS) to videos, tutorials, and further learning resources to get the most out of AEM 6. Ensure an instance of AEM is running locally on port 4502. 4+ or AEM 6. In AEM 6. Overall benefits of Adobe Experience Manager 6. 5 + sp1. Different domains. These are a set of re-usable UI. 5. In the previous two chapters, we mapped editable component content from the SPA’s Home view to corresponding Remote SPA root page in AEM at /content/wknd-app/us/en/. NOTE. Install Java 1. Tap the all-teams query from Persisted Queries panel and tap Publish. language: en: Language code (ISO 639-1) to create the content structure from (e. In Edit mode, add the Card component to the Layout Container: Drag and drop an image from the Asset finder onto the Card component: Open the Card component dialog and notice the addition of a Text Tab. Ensure you adjust them to align to the requirements of your. 0 it’s possible to only deliver content to specific areas or snippets in the app. Hybrid CMS - both JSON API and Page delivery. The tutorial will extend the We. 0. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. We are planning to migrate our AEM site to SPA/SPA Editor/React. SPA Introduction and Walkthrough. AEM 6. Configure AEM for SPA Editor. Navigate to the Software Distribution Portal > AEM as a Cloud Service. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. Best. While the SPA codebase is managed outside of AEM, an AEM project is required to setup supporting configuration and content requirements. Hello. With its new version, Adobe Experience Manager brings together a host of new features and enhancements. From the command line navigate into the aem-guides-wknd-spa. 4 SP2. Deploy the starter project to a local instance of AEM. And I'm including dynamic routing for AEM. Understand the SPA model routing options available when using the SPA Editor. Since the SPA renders the component, no HTL script is needed. content subprojectSPA support was first introduced as part of AEM 6. Currently we running AEM 6. Locate the Layout Container editable area beneath the Title. In part II, we’ll look at how to Install and integrate the AEM SPA Editor JS SDK. In the Comment box, type a translation hint for the translator if necessary. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. In the IDE, open the ui. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. I have searched in the AEM documentation but unable find anything related to AEM SPA Editor with PWA features. This document will guide you through these steps. Single page applications (SPAs) can offer compelling experiences for website users. Integrate a SPA - Learn how the SPA source code is integrated with the AEM Project and understand tools available to rapidly develop the SPA. 5 instance somehow authoring UI of SPA pages appears to be broken: I cannot change edit mode while on a page and Content Finder. 5. Edit the component and enter the text: Page 1 using the RTE and the H2 element. This chapter walks through the creation of an AEM project that contains necessary configurations: AEM WCM Core Components proxies; AEM Remote SPA Page proxy;. See the document SPA Editor Overview for an summary of this communication model. Locate the Layout Container editable area right above the Itinerary. The above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. Developing. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. Search for “GraphiQL” (be sure to include the i in GraphiQL ). 0 includes new features, key customer-requested enhancements, and performance, stability, and security improvements, that are released since the availability of 6. 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. If left relative, when the SPA is loaded in SPA Editor for authoring, these URLs default to use AEM’s host rather than the SPA, resulting in 404 requests as illustrated in the image below. html or cf# from the page URL) 4. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. language: en: Language code (ISO 639-1) to create the content structure from (e. 5. Last update: 2023-09-26. What is included in Experience Manager 6. Developers using the React framework create a SPA and then. Ensure only the components which we’ve provided SPA implementations for are allowed:The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of AEM. listeners)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. Deploy SPA updates to AEM. Adobe Experience Manager has releaed AEM 6. Learn how to add editable fixed components to a remote SPA. This chapter will add navigation to a SPA in AEM. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. all-1. Rich text with AEM Headless. 0+ 8, 11:Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. . Learn how to create a SPA using the React JS framework with AEM's SPA Editor. 5. The. Features are added to embed forms and communications from AEM Forms into SPA Editors. Ensure only the components which we’ve provided SPA implementations for are allowed:Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. 5+SPA editor, is there a way to generate a sitemap to optimize for SEO? or is SSR a - 374668. 7. From the AEM Start screen, navigate to Tools > General > GraphQL. Developing with the AEM SPA Editor - Hello World Tutorial. Learn to use the delegation patter for extending Sling Models and features of Sling Resource. In the next few chapters more functionality is added. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. Understand the structure of a new AEM SPA Editor project built from a Maven archetype. By implementing specific interfaces, Sling Models provide the information necessary to the SPA. Page content is retrieved from AEM as page model using Sling JSON Exporter and can be edited in AEM Remote SPA Editor. 0). You will also learn how to use out of the box AEM React Core. We're in process of upgrading environments as well as code base to support AEM 6. js) Remote SPAs with editable AEM content using AEM SPA Editor. 5 I've managed to get the contents of experience fragments displaying on a react app. About. I am using SPA Editor of AEM 6. Experience LeagueStep 4: Move inside the SPA project folder (“aem-guides-wknd-spa. Instrument the page. 5. 0 (either apis or apis-with-deprecations type) to a clean AEM 6. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM. Developing SPAs for AEM; SPA Editor Overview; SPA Blueprint; SPA Page Component;. If left relative, when the SPA is loaded in SPA Editor for authoring, these URLs default to use AEM’s host rather than the SPA, resulting in 404 requests as illustrated in the image below. 2. In the next few chapters more functionality is added. 4. Review existing models and create a model. 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. content subproject Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. 5 was released in April 2019. 5 version solution. 5 include: Accelerated Digital Transformation – the platform manages and develops established digital channels, allowing teams to focus on. classic-1. The Single-line text field is another data type of Content. To create a UI module renderer, create a Class object that contains the logic that renders the UI module. SPA Introduction and Walkthrough. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. SPA Introduction and Walkthrough. The SPA Editor offers a comprehensive solution. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM Core WCM Components . These are a set of re-usable UI. Set up local AEM environment. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. Select Edit from the mode-selector in the top right of the Page Editor. Tap Home and select Edit from the top action bar. Learn how the latest innovations in Adobe Experience Manager 6.