Learn how the Universal Editor enables what-you-see-is-what-you-get (WYSIWYG) editing of any headless and headful experience. They can also be used together with Multi-Site Management to. 4 and below) in the SPA Editor. With Adobe Experience Manager (AEM) as a Cloud Service, Content Fragments lets you design, create, curate, and publish page-independent content. These are a set of re-usable UI components that map to out of the box AEM. It is independent of frameworks, rendering engines, and data sources - thus providing all the freedom the developers are seeking and making it truly universal. Populates the React Edible components with AEM’s content. Create the nodes if the node do not exist. Configure AEM for SPA Editor. Learn to use the delegation pattern for extending Sling Models. Dynamic navigation is implemented using Angular routes and added to an existing Header component. While the SPA codebase is managed outside of AEM, an AEM project is required to setup supporting configuration and content requirements. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Please join us to learn more about the SPA Editor in this. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. The page editor provides the latest version of the page model to the SPA via the. Option 2: Share component states by using a state library such as NgRx. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. Populates the React Edible components with AEM’s content. App uses React v16. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. Dynamic navigation is implemented using React Router and React Core Components. Last update: 2023-10-03. 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. Develop Single-Page Applications with React in AEM is a 2-day, instructor-led (classroom or virtual) course, formerly known as Getting Started with Single-Page App Editor v6 and is relevant for all deployment methods. And was successfully able to launch WKND site within AEM SPA Editor. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM. The delivery of the JSON data is delegated downward to each component (from page, to paragraph, to component, and so on). The Page Editor’s tools and capabilities are accessed from the Page Editor’s UI toolbar. x Dispatcher Cache Tutorial; AEM 6. Using an AEM dialog, authors can set the location for the weather to be displayed. Getting Started with AEM SPA Editor and React; Getting Started with AEM and Adobe Target; AEM 6. SPA - single page application an alternative to a multi-page website. So, this includes such features like. Every part of the Bulk Editor (or components derived from the Bulk Editor) can be configured. For further information about how to oraganize yourself to develop SPAs for AEM see the article Developing SPAs for AEM . 0 it’s possible to only deliver content to specific. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Overview Single page applications (SPAs) can offer the user a rich, dynamic experience that reacts and behaves in familiar ways, often just like a native application. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. The mapping can be done with Sling Mapping defined in /etc/map. These are a set of re-usable UI. Objective. messaging must be added to provide a communication channel. Experience League. SPA Editor Overview | Adobe Experience Manager This article gives a comprehensive overview of the SPA Editor and how it works included detailed workflows of interaction. Instead of continually planning for upgrades and monitoring site traffic. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. Next Steps. content subprojectPrerequisites. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Transcript. SPA. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. A simple weather component will be built. Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). Since the SPA renders the component, no HTL script is needed. . Understand the structure of a new AEM SPA Editor project built from a Maven archetype. This version of AEM supports the following capabilities. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. Browse content. Access the Translation Configuration UI: AEM Start Menu > Tools > General > Translation Configuration. Last update: 2023-10-02. Conclusion. 08-09-2023 10:26 PDT. Content Fragment Models define the elements (or fields) that define what content the Content Fragment may capture and expose. Create the Sling Model. Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). Objective. SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. Content Fragments architecture. all. An Experience Fragment is a grouped set of components that when combined creates an experience. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. g React or Angular). If you have an existing SPA, AEM supports embedding it into AEM so it is visible to your content authors in the AEM Editor. With the Bulk Editor, you can add, modify, delete, filter, and export the rows, save modifications, and import a set of rows. Install Java 1. This chapter takes a deeper-dive into the AEM JSON model API and how the JSON content exposed by an AEM component can be automatically injected into a React component as props. The React app should contain one. You will also learn how to use out of the box AEM React Core. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. Created for: Beginner. Learn to create a simple React application and integrate with AEM's single page editor to take advantage of content management capabilitie. AEM comes with several layers already implemented for page authoring; including for example, edit, preview, annotate. 2. The AEM SPA Editor allows front-end developers to create SPAs that can be integrated into an AEM site, allowing the content authors to edit the SPA content as easily as any other AEM content. SPA Editor SDK Deep Dive - Part 2 - Angular. Why a SPA? By being faster, fluid, and more like a native application, a SPA becomes an attractive experience not only for the visitor of the. 4. 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. Aem Developer. For publishing from AEM Sites using Edge Delivery Services, click here. Developers using either React frameworks create. 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. SPA Editor Overview. Using AEM SPA Editor; Getting started with SPAs in AEM using REACT; Aem. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. The. Any documentation for in-context editable content? A. NOTE. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. Adobe Experience Manager (AEM) 6. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Introducing the AEM SPA Editor. @adobe/aem-react-editable-components; @adobe/aem-spa-component-mapping; @adobe/aem-spa-page-model-manager You can understand the flow of the interaction between the SPA and AEM by thinking of the SPA Editor as a mediator between the two. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. AEM SPA editor - FAQ by Niek Raaijmakers Abstract Answering the most commonly asked questions about the SPA editor Today I am going to answer some FAQ that I get a lot from customers, that are not addressed in the latest post / archetype updates. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. 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. $ cd aem-guides-wknd-spa. These methods should also allow the Adobe Experience Platform Launch integration to coexist with SPAs that are built to use the SPA Editor. Understanding how to add properties and content to an. Map the SPA URLs to AEM Pages. Hi Possibly I have expressed myself wrong since AEM is new to me. By implementing specific interfaces, Sling Models provide the information necessary to the SPA. Using an AEM dialog, authors can set the location for the weather to be displayed. It is recommended to use the SPA Editor if your project requires a SPA framework-based client-side rendering (e. The AEM SPA Editor uses AEM Content Services to deliver the entire content of the page as a JSON model. Start by creating the components that will make up the composite component, that is, components for the image and its text. SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. This module provides a React implementation for the containers in the AEM core components. Create the Sling Model. SPA support was first introduced as part of AEM 6. Next, deploy the updated SPA to AEM and update the template policies. Understand the SPA model routing options available when using the SPA Editor. [AEM GEMs free Webinar | 20th September] Ready to supercharge your AEM as a Cloud Service projects? We'll guide you through optimizing your AEM projects, measure external service impact, Create customized views and Gain insights, boost performance, and enhance issue resolution. Understand the SPA model routing options available when using the SPA Editor. The following AEM features are not yet supported by the SPA Editor: Target mode; ContextHub; Inline image editing; Edit configs (eg. CBlocks - SPA Support. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the SPA against the AEM JSON model API. With a traditional AEM component, an HTL script is typically required. Book online below or contact us directly via. Include the Universal Editor core library. This document describes the recommended steps to upload a standalone SPA to an AEM instance, add editable sections of content, and enable authoring. SPA Editor - AEM native editor for SPA’s Headless - a pattern where you leverage API or GrapgQL to get data from server Widget - a component of a web page with clientside experience, it has basic HTML, and javascript turns into the interactive experience when loaded. Option 2: Share component states by using a state library such as NgRx. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. 5 which can be used for XF where SPA app consumes JSON which is provided by. 2. 2. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Request access to the Universal Editor. The tutorial covers. 4+ and AEM 6. These are a set of re-usable UI components that map to out of the box AEM. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. Developer. They said -- Yes, we are working on a WKND style tutorial for the SPA editor [0]. AEM 6550 - Create a sample SPA React App using AEM SPA Editor by Sreekanth Choudry Nalabotu Abstract This tutorial on official adobe docs is an excellent guide for creating your first AEM SPA React App, however if you are looking for some quick steps, go through the following. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. AEM provides a JS SDK that is lightweight and that allows the JS components. SOLVED AEM SPA editor, is this even used in production? AEMWizard. Learn to use React Router to navigate between. 1. The SPA is implemented using: Maven AEM Project Archetype; Mavice Maven AEM Project. Learn how to create a custom weather component to be used with the AEM SPA Editor. The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (for example, React or Angular). The SPA is responsible for the routing and AEM listens to it and fetches the component data based on it. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . The SPA is implemented. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. Feel free to add additional content, like an image. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA Editor. Using an AEM dialog, authors can set the location for the weather to be displayed. 4, but got the following error:Hello, we understand that AEM came out with the AEM SPA editor around 2 years ago. From the command line terminal verify that. The layers provide sophisticated functionality for the entire page, as opposed to specific actions on an individual component. Introduction. Option 3: Leverage the object hierarchy by customizing and extending the container component. Stop the webpack dev server and from the root of the project, deploy the changes to AEM using your Maven skills: $ cd aem-guides-wknd-spa $ mvn clean install -PautoInstallSinglePackageCongratulations, you have just created your first AEM SPA Editor Project! The SPA is quite simple. authoring. Configure AEM for SPA Editor. The mapping can be done with Sling Mapping defined in /etc/map. Navigate to the root of the project /aem-guides-wknd-spa and deploy the project to AEM using Maven: $ cd . To configure which formats are allowed when pasting text into Experience Manager from another program: In your component, navigate to the node <rtePlugins-node>/edit. You will also learn how to use out of the box AEM React Core. The delivery of the JSON data is delegated downward to each component (from page, to paragraph, to component, and so on). Topics: Created for: Deep dive with us into the development of Single-Page-Applications that can be authored using the AEM Page Editor. Developers using the React framework create a SPA and then. Understand the SPA model routing options available when using the SPA Editor. This chapter walks through the creation of an AEM project that contains necessary configurations: AEM WCM Core Components proxies; AEM Remote SPA Page proxy;. Create the text component in your AEM project. It basically refers to a collection of open-source Javascript libraries that offer frameworks allowing authors to make changes to SPA contents. 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. SPA Editor persists edits with a POST request to the server. Introduced in AEM 6. Also included are AEM WCM Components - React Core implementation and AEM WCM Components - Spa editor - React Core implementation. . The. Integrate AEM Author service with Adobe Target. content subproject SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. Learn how to create a custom weather component to be used with the AEM SPA Editor. Using an AEM dialog, authors can set the location for the weather to be displayed. The build will take around a minute and should end with the following message: The SPA Editor brings the easy-to-use capabilities of the AEM Page Editor back to SPA built with JavaScript frameworks like React or Angular. Walks through the implementation of a Single Page Application, written using React JS, that can be edited within Adobe Experience Manager. Learn. npm module; Github project; Adobe documentation; For more details and code. This component is able to be added to the SPA by content authors. SPA Editors are more powerful in AEM 6. AEM SPA Model Manager is installed and initialized. $ mvn clean install . Experience LeagueLevel 1. The Translation Configuration UI makes it easier to manage various translation rules and guards against typos when editing XML directly. 3 +) Overlap between SPA JavaScript and AEM code. The AEM SPA Editor uses AEM Content Services to deliver the entire content of the page as a JSON model. After reading this document, you should: Understand the basic function of the SPA Editor. AEM container components use policies to dictate their allowed components. Experience LeagueAny AEM project should leverage the AEM Project Archetype, which supports SPA projects using React or Angular and leverages the SPA SDK. Option 1: Centralize the logic and broadcast to the necessary components for example, by using a util class as a pure object-oriented solution. familiar frameworks and tools the way they are used to. 5. 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. Getting Started with the AEM SPA Editor and React. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. By using AEM SPA (Single Page Application) Editor, developers can easily build web sites using SPA Framework and authors can seamlessly edit content within AEM. To enable the author to use the AEM SPA Editor to edit the content of an SPA, there are requirements that the SPA must fulfill, which are described in this document. 1. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which. For AEM to load the Remote SPA in the SPA Editor, mappings between the SPA’s routes and the AEM Pages used to open and author content must be established. External SPA with Editable Areas: In this design, the SPA is hosted outside of AEM, the developer keeps control over the app by only enabling authoring in restricted areas of the app. Earlier I raised a question on Hello World Tutorial @Getting Started - 315808A simple weather component is built. Learn to use Angular routing to navigate between different views. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM. Join us to learn more about the SPA Editor in this introduction. 4. SPA Blueprint. Add the corresponding resourceType from the project in the component’s editConfig node. Book a Treatment. Understand the SPA model routing options available when using the SPA Editor. npm module; Github project; Adobe documentation; For more details and code. js) Remote SPAs with editable AEM content using AEM SPA Editor. Blocks are AEM components, so they were concerned by the same. If are just getting. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. As part of the AEM 6. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. AEM 6. For AEM to load the Remote SPA in the SPA Editor, mappings between the SPA’s routes and the AEM Pages used to open and author content must be established. Content management in Experience Manager is built around the concept of fluid experiences. The Re. The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (for example, React or Angular). 0 or higher; Documentation. In this optional continuation of the AEM Headless Developer Journey, you learn how AEM can combine headless delivery with traditional full-stack CMS features and how you can create editable SPAs using AEM's SPA Editor framework. . Comparison. Replace Conversion Variable with Classification Variable. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Wrap the React app with an initialized ModelManager, and render the React app. react. One of the powerful features of AEM is the Single Page Application (SPA) Editor, which allows developers to create more fluid and. . Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. 4 SP2 release, Adobe has come up with ‘SPA Editor’ – supporting below capabilities: With SPA editor, Adobe has introduced a thin layer called SPA Editor JS SDK, which is a collection of open-source JavaScript libraries that provide a framework for allowing authors to edit the contents of a Single Page Application. In the next few chapters more functionality is added. SPA Blueprint offers a deep dive. These are a set of re-usable UI components that map to. ComponentMapping Module. Also included are AEM WCM Components - React Core implementation and AEM WCM Components - Spa editor - React Core implementation. Functionally, it operates in much the same way as SPA Editor, but the SPA server delivers the pages instead of AEM. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA Editor. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . 5. Covers foundation topics like project setup, component mapping, front end development tools, and application routing. Please join us to learn more about the SPA Editor in this. 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 SPA Editor 2. The SPA Editor brings the easy-to-use capabilities of the AEM Page Editor back to SPA built with JavaScript frameworks like React or Angular. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . Learn how to create a SPA using the React JS framework with AEM's SPA Editor. SPA Editor loads. Prerequisites This tutorial requires the following: AEM as a Cloud Service SDK Node. The. The Style System, when used in conjunction with AEM's Core Components, template editor, and responsive layout, offers powerful. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. Adobe Experience Manager (AEM) 6. Integrate a SPA - Learn how the SPA source code is integrated with the AEM Project and understand tools available to rapidly develop the SPA. SPA Editor - AEM native editor for SPA’s Headless - a pattern where you leverage API or GrapgQL to get data from server Widget - a component of a web page with clientside experience, it has basic HTML, and javascript turns into the interactive experience when. Single page applications (SPAs) can offer compelling experiences for website users. While the SPA codebase is managed outside of AEM, an AEM project is required to setup supporting configuration and content requirements. 3. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. 5. This guide covers how to build out your AEM instance. The component is used in conjunction with the Layout mode, which lets. Join us to learn more about the SPA Editor in this introduction. Our team is planning to migrate a module and utilize AEM for its implementation. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. This tutorial is an introduction to SPA development to be used with AEM's SPA Editor JS SDK. Learn how to generate an Adobe Experience Manager (AEM) Maven project as a starting point for a React application integrated with the AEM SPA Editor. Take full advantage of Vue's progressive and reactive ecosystem in creating scalable and production-ready AEM SPA applications. Add Adobe Target to your AEM web site. 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. Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. ) to render content from AEM Headless. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. 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 for AEM; SPA Editor Overview; SPA Blueprint; SPA Page. Initially, it will be in React but Angular is also planned (although it might be a good month later). It stores front-end components and provides a way for the Single Page Application to map front-end components to AEM resource types. js with a fixed, but editable Title component. ). In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. ayushn. Experience Fragments are not yet supported(6. Since the SPA renders the component, no HTL script is needed. Dynamic navigation is implemented using Angular routes and added to an existing Header component. Please refer this article for more details. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. Q. There are several steps to onboarding your AEM app and instrumenting it to use the Universal Editor. To enable the author to use the AEM SPA Editor to edit the content of an SPA, there are requirements that the SPA must fulfill, which are described in this document. Documentation AEM GEMs events SPA Editor SDK Deep Dive - Part 2 - Angular. Add a new Text component to the main Layout Container. Now that the external SPA is part of your AEM project, it must be configured within AEM. Functionally, it operates in much the same way as SPA Editor, but the SPA server delivers the pages instead of AEM. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the SPA against the AEM JSON model API. 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. Dynamic navigation is implemented using Angular routes and added to an existing Header component. pagemodel. 4+ and AEM 6. The importance of this configuration is explored later. content subprojectLearn how to extend an existing Core Component to be used with the AEM SPA Editor. Create the text component in your AEM project. NOTE The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (for example, React or Angular). The following diagram illustrates the overall architecture for AEM Content Fragments. What you will build. The authoring environment of AEM provides various mechanisms for organizing and editing your content. We are new to AEM and I'm trying to understand the pros and cons of using AEM v/s AEM SPA. For authoring AEM content for Edge Delivery Services, click. Learn to use React Router to navigate between. Learn. 174 FollowersThe Virtual Frontend Components allows to mark sections as editable in AEM SPA Editor. The importance of this configuration is explored later. With a traditional AEM component, an HTL script is typically required. Also included are AEM WCM Components - React Core implementation and AEM WCM Components - Spa editor - React Core implementation. . Full service nail studio and beauty spa located in the heart of Oak Bay village. 0. Learn how to add editable fixed components to a remote SPA. The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (for example, React or Angular). Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Adobe Experience Manager, the leading solution for content management, features a decoupled, modular architecture and provides extensible capabilities that empower marketers to build fantastic experiences for any channel. The TagID is added to the content node’s cq:tags property and resolves to a node of type cq:Tag. The AEM SPA Editor leverages AEM Content Services to deliver the entire content of the page as a JSON model. And the demo project is a great base for doing a PoC. NOTE. From the command line navigate into the aem-guides-wknd-spa. Option 3: Leverage the object hierarchy by customizing and extending the container component. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. Disclaimer: As the solution gets updated frequently, these answers might become outdated. Only expose style combinations that have an effect. Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). For publishing from AEM Sites using Edge Delivery Services, click here.