Share This Page


Share This Page


One of the key topics of interest today for a CIO/CTO organization is around moving a traditional AEM deployment to a ‘headless’ architecture. There are sound architectural and business benefits in moving to AEM headless deployments. However, typical AEM hybrid (AEM + separate presentation layer) deployments come with some inherent problems. In this article, we will be delving into the issues faced by deploying a standard AEM Headless SPA application, and how these issues can be resolved using SPA editor.

So exactly, what are AEM Hybrid Single Page Applications (Hybrid SPA’s)?

Typical AEM Hybrid SPAs use popular presentation layer front-end frameworks like React and Angular to render a presentation layer of web pages, and pair it up with content consumption from AEM. This combines the benefits of traditional and headless deployments in a single architecture, by decoupling content and presentation, thus enabling disparate clients’ end-points (website, mobile apps, IOT’s, kiosks etc.) to consume content independently. This separation between content and presentation is logical rather than physical, thus making it indifferent if the React/Angular presentation layer resides inside AEM or outside on a standalone react/node server.

AEM Hybrid SPA

Problems of typical hybrid SPA

  1. Lack of ‘What you see is what you get (WYSIWYG)’ editing capability for SPA pages. Any attempt to build this through a custom approach results in difficulties in maintaining code.
  2. Some organizations end up having multiple pre-prod environments to address the above, thus making deployments/maintenance sub-optimal.
  3. Custom code is required to merge content and presentation logic at the presentation layer, making the code a maintenance nightmare.
  4. As most of current SPA frameworks work on a component approach, managing AEM components and their SPA counterparts can get very tricky.
  5. The overlap that usually happens between an AEM developer and a front-end developer can cause delays in development, bug-fixes and thus, time to market.

How AEM SPA editor can resolve these problems?

The AEM SPA Editor is a framework which adds editing capability to AEM SPA pages. The ‘editor’ has existed in AEM historically, and in-fact, is the same for both Single Page and traditional Multi-page Applications. In a nutshell, SPA editor does the following:

  1. Acts as a connector between presentation layer and content model
  2. Provides support for authoring by updating the content at an appropriate path
  3. Provides JavaScript objects to map SPA components to their AEM counterparts
  4. Facilitates use of touch UI dialogs to author on SPA components.

Hybrid SAP approach with SAP editor functionality

What does this mean to business?

  1. WYSIWYG, in-place editing, drag-and-drop components and full-blown CMS capabilities just as in traditional AEM multi-page application, thus providing a better authoring experience
  2. SPA pages can be edited individually as if they are traditional AEM pages
  3. Easy editing and faster time to market for content on SPA pages

What does this mean to IT?

  1. Clear separation of boundaries between front-end presentation layer and AEM content, making it easier to manage
  2. Multiple pre-prod environments are not required, leading to easier deployments & cost optimization

Mindtree’s work with clients in this space?

Mindtree has helped one of the largest real estate companies in the world migrate their Hybrid AEM deployment to AEM SPA Editor framework. Mindtree’s AEM credentials also include several top tier clients including a renowned car rental company, a US-based multi-national food manufacturer, a global beauty brand and leading financial services firm

Summary and Conclusion

With the AEM SPA Editor offering, the control of headless pages is given back to those who really need it: AEM business users. By infusing traditional AEM features like drag-and-drop, templates, approval workflows, in-place editing and tagging into existing headless application, it is easier to provide and manage enriching content, thus keeping the end user engaged!

Connect with the author Onkar Vithal ( or go-to market leader Harshal Gaikwad ( to know more about the advantage your business can get with customized solutions based on AEM SPA editor.


About the Author

Harshal Gaikwad
General Manager

Harshal Gaikwad is a Practice Leader, focusing on Adobe Experience cloud-driven digital marketing solutions. He is a certified AEM Architect and Adobe-trained on several others experience cloud solutions including Target, Analytics & Audience Manager. He specializes in creating go-to market solutions for the client’s industry verticals and complex technology/architecture challenges.

Other Stories by the Author


About the Author

Onkar Vijay Vithal

Onkar is an Architect in Digital technologies with a focus on Adobe Experience Cloud. He has a wealth of experience working on and implementing solutions across a variety of industries globally, primarily specializing in Adobe Experience Manager and related Adobe technologies.

Other Stories by the Author

Let's Talk About Your Needs

Thank you for your submission. We'll be in touch.