A multi-part tutorial on how to develop for the AEM SPA Editor. Walks through the implementation of a Single Page Application, written using React JS, that can be edited within Adobe Experience Manager. Covers foundational topics like project setup, component mapping, front end development tools, and application routing.


The goal for this multi-part tutorial is to teach a developer how to implement a Single Page Application that can edited in Adobe Experience Manager (AEM) with the SPA Editor. The tutorial covers the end to end creation of the SPA and the integration with AEM.

In a real-world scenario the development activities will be broken down by persona, often involving a Front End developer and a Back End developer. Each task in the tutorial is labeled with a persona to gain a better idea of the separation of development activities. The tutorial is designed so that anyone can complete it end to end, however if a user wishes he or she can jump in to the tutorial at any stage.

The implementation is designed to work on AEM 6.4 + SP2. The SPA implemenation is built using the React JS framework. An equivalent tutorial and implementation using Angular will be available in the near future. The following modern web development tools are also used in the tutorial:


More parts of the tutorial are expected to be added in the near future, including:

  • Building a custom Map component using Google Maps API
  • Integration of Content Fragments
  • Extending the List Component


To test the latest code before jumping into the tutorial, download and install the below packages on a local AEM instance:




All of the code for the project can be found on Github in the Adobe Experience Cloud organization:

GitHub: WKND Events SPA Editor Project

In addition, each chapter of the tutorial has its own branch in GitHub. A user can begin the tutorial at any point by simply checking out the branch that corresponds to the previous part.

Any issues or problems with the tutorial please create an Issue on Github.

Table of Contents - React

Below is the listing of chapters in the tutorial:

Local Development Environment

A local development environment is necessary to complete this tutorial. Screenshots and video are captured from a Mac OS environment but the commands and code used should be independent of the local operating system, unless otherwise noted.


The following should be installed:

Start by double checking that the above tools have been installed and available via the command line path. Open up a new terminal and run the following commands:

$ java -version
java version "1.8.+"
Java(TM) SE Runtime Environment (build 1.8.0_111-b14)
Java HotSpot(TM) 64-Bit Server VM (build 25.111-b14, mixed mode)
$ mvn -version
Apache Maven 3.3.9
Maven home: /Library/apache-maven-3.3.9
Java version: 1.8.0_111, vendor: Oracle Corporation
Java home: /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home/jre
$ node --version
$ npm --version

Integrated Development Environments

Popular IDEs like Eclipse, IntelliJ, and Visual Studio code can be used when developing with AEM. See the following resources for setting these tools up locally:

Next Steps

Start the tutorial!


If you get stuck or have additional questions make sure to check out the Experience League forums for AEM or view existing GitHub issues

Didn't find what you were looking for? Think you found an error? Please file a GitHub issue for the WKND Events project