Single Page Application – AEM Editor

By Lokesh Shivalingaiah 3 min read

A Single Page Application (SPA) is a web application, differing from traditional web application in which the pages interact with the user by dynamically retrieving content and rendering the page on the client side (primarily JavaScript driven) rather than loading the entire page from a server for each action.  All the required content (HTML, JavaScript, CSS) that is not dependent on specific action is retrieved once in a first page load with all other resources loading asynchronously as needed based on the user interaction with the page. This method avoids navigation related interruption, creating a seamless user experience with faster page loads without the need for a page refresh.

Advantages of SPA

1. Much improved seamless user experience.

2. Improved application performance, as all the required resources are loaded on the first page load and also there are no full-page refreshes as the user navigates through the application.

3. Clear separation of front end and back end development which reduces the integration dependency on each other.


Main challenges for building SPA using any of the frameworks within AEM was

4. Authoring Experience – Authoring is a core strength of AEM and there is built in componentization for the same.

5. Separate JSON renderer services are needed for data to be consumed by SPA framework. Content services end points can be used for powering SPA.

6. AEM doesn’t allow for in-context experience creation in SPA without heavy customization.

7. Structural components cannot be authored.

8. Content authors could author content but could not create experiences (layout & design).

9. Content authors are not able to preview final publish experience of the pages.

10. Time to customize to handle SPA behavior in AEM including links, routing etc.

Or one could use AEM as a headless content management system and expose “Content As a Service” for the single page applications which again makes AEM less efficient.

To overcome all of these, Adobe have come up with ‘SPA Editor’ – a framework by itself which can solve all the limitations and easily build SPAs with AEM. Below is the high-level architecture.

Single Page Application – AEM Editor

Main features of SPA Editor

11. With AEM SPA Editor, the content author will not experience any difference when editing or creating content. All the common AEM functionality is available and no changes are required.

12. Enables in context editing of content & configuring components.

13. Enables in context layout management of components.

14. Provides the content authors with same user experience both in author and publish mode.

15. Gives the front-end developers the flexibility to use their choice of JavaScript frameworks and build tools to create highly interactive applications.

16. It supports React and Angular framework which are widely used to create SPAs.

17. All the required resources are loaded on the first call. This reduces the number of server calls from the client side and in turn increases the page load performance.

These features, present in the newly released AEM SPA editor eliminate the challenges, making it possible to develop rich SPA driven functionality without having to hack a solution or leverage headless CMS engines.  AEM continues to be best in class full featured and current content solution.

Explore Additional Resources

Learn more on how to select the right CMS for your business and excel the Digital Experience.

Reach out to our Adobe Experience Cloud Consulting team which specializes in helping you deliver seamless, intelligent, and personalized customer experiences.

Get Help from Our Experts

Over the past 20 years, we have completed thousands of digital projects globally. We have one of the largest and deepest multi-solutions digital consulting teams in the world. Our proprietary processes and years of Digital Experience expertise have earned us a 97% customer satisfaction rating with our clients ranging from Global Fortune 1000 to Mid-Market Enterprises, leading educational institutions, and Non-Profits.

DesignRush has recognized TA Digital as a top Creative Agency.

About TA Digital

TA Digital is the only global boutique agency that delivers the “best of both worlds” to clients seeking to achieve organizational success through digital transformation. Unlike smaller, regional agencies that lack the ability to scale or large organizations that succumb to a quantity-over-quality approach, we offer resource diversity while also providing meticulous attention to the details that enable strategic success.

Over the past 20 years, TA Digital has positioned clients to achieve digital maturity by focusing on data, customer-centricity and exponential return on investment; by melding exceptional user experience and data-driven methodologies with artificial intelligence and machine learning, we enable digital transformations that intelligently build upon the strategies we set into motion. We are known as a global leader that assists marketing and technology executives in understanding the digital ecosystem while identifying cultural and operational gaps within their business – ultimately ushering organizations toward a more mature model and profitable digital landscape.

Recognized in 2013, 2014, 2015, 2019, and 2020 Inc. 5000 list as one of the most successful technology companies in the United States, TA Digital is pleased also to share high-level strategic partnerships with world class digital experience platform companies like Adobe, SAP and Salesforce and possess global partnerships with industry leaders such as Sitecore, Episerver, Elastic Path, BigCommerce, AWS, Azure and Coveo.

Lokesh Shivalingaiah

Written By

Lokesh Shivalingaiah