Personalizing Single Page Apps with dotCMS's Headless Capabilities

Jason Smith

With hyper-personalized omnichannel digital experiences becoming a requirement, the digital ambitions of many organizations are rapidly changing. Companies are looking towards newer technologies like SPAs — single page apps — to deliver vastly improved user experiences. But leveraging the latest touchpoints has presented challenges for marketers and developers alike.

That’s because frontend presentation layers like SPAs require headless content delivery, but even with hybrid content editing tools, many CMSs fail to provide the headless personalization capabilities marketers need. And oftentimes, developers face their own challenges when integrating new touchpoints with these CMS authoring tools as well.

Let’s take a closer look at why personalizing content with the headless delivery approach is challenging, and the solution to personalized SPAs with dotCMS.

The Headless Personalization Challenge

For marketers, one of the most crucial components of building hyper-personalized digital experiences is in-context editing. Without the ability to preview what their content will look like for particular market segments, personalization strategies often fall short. And in too many situations, marketing teams become entirely dependent on developers to edit and deliver digital experiences. 

But in-context editing of headless content for SPAs is challenging for developers to provide with most CMS solutions. SPAs are deployed external to CMS systems, so the applications are typically built to pull content headlessly. If marketers are lucky, there’s light integration with visual editing tools within the CMS, but there’s usually not tightly integrated personalization control within the CMS.

Without headless personalization capabilities, however, developers would need to create logic to filter content for particular market segments manually. This is an inefficient approach and leads to less than optimal results for marketing teams. That’s why dotCMS has developed an innovative approach to personalized headless content delivery for SPAs and many other client-side applications.

How dotCMS Enables Personalized SPAs

When it comes to integrating with SPAs, the latest Edit Mode Anywhere feature has empowered marketers with rich authoring tools for applications deployed external to the CMS. And not just with the layout of content-driven SPAs, but personalized headless content delivery and most other dotCMS functionality as well. Let’s take a closer look at how dotCMS enables personalized content as a service with ease.

Live Previews

Within Edit Mode Anywhere, marketers can manage SPAs just as they would a page-driven traditional website, whether it’s built with React, Angular, or nearly any other frontend framework. Marketers can view a live preview of the SPA and edit its content in real-time from modifying layouts with drag-and-drop controls to changing the content itself with in-line editing.


Furthermore, the live previews can be filtered by different personas as well by selecting a predefined persona from the “Previewing As” dropdown. That means marketers can edit personalized content within the right context.

Custom Personas

Marketers can quickly add new personas based on various market segments within the NoCode interface as well. These personas will determine the types of site visitors the SPA will be targeted towards, and will drive the personalized content which particular site visitors will experience.


Along with custom personas, marketers can utilize the “Default Visitor” to build a generic SPA experience for site visitors that don’t fit into a particular target market.

Further Reading: dotCMS Rules, Targeted Content, and Personalization

Page Rules

Using the rule builder, marketers can define specific rules or conditional statements that drive personalization. When a user visits the site, for example, dotCMS can detect their geolocation and tag them with a particular persona based on where they live. This is the first stage for a personalization strategy — gaining insight into the visitor’s interests, preferences, or behaviors — which will determine the content that gets delivered later on.


There is a multitude of options out of the box, but rules are highly extensible as well to fit specific business needs. The rule builder interface makes it straightforward for marketing teams to define how visitors get placed into specific market segments.  

Personalized Editing 

Once personas and rules are defined, marketers can edit the SPA for particular market segments easily. Any edits made within Edit Mode Anywhere while viewing as a persona are specific to the visitors that meet certain criteria based on rules. These capabilities eliminate much of the back and forth that usually occurs between marketers and developers when building personalized SPAs.


The Edit Mode Anywhere headless capabilities, therefore, dramatically improve the process of building hyper-personalized digital experiences within SPAs or other content-driven frontends.

Future Forward Features

dotCMS strives to bring all its core functionality into the Edit Mode Anywhere NoCode interface to further bridge the gap between marketers and developers. With this in mind, some of the exciting features dotCMS is working on are headless analytics and visitor tracking. These capabilities will dramatically improve headless personalization for marketing teams in the future.

While we’ve mostly covered personalized headless content delivery in the context of SPAs, dotCMS currently has and in the near future will have extensive support for many other frontend presentation layers. This includes integration with static site generators like Gatsby or even unique touchpoints like digital kiosks. 

dotCMS: The Solution For Hyper-Personalized SPAs

Altogether, the powerful authoring tools and straightforward SPA integration capabilities make dotCMS ideal for building and managing hyper-personalized experiences. Marketers have an intuitive workflow for crafting personas based on market segments, defining the rules that determine the persona of site visitors, and in-context live editing of the SPA content and layout based on these personas. And these capabilities are simple for developers to provide without extensive coding.

In striving to offer the best NoCode and LowCode tooling possible, dotCMS continues to develop innovative features that simplify integration with a variety of frontend presentations — including SPAs, PWAs, and more. Personalization doesn’t have to be challenging, and the technologies you choose to leverage shouldn’t hinder your organization’s digital ambitions.

You can see a detailed look at personalizing SPAs with our Webinar: How to Personalize Single Page Apps Using dotCMS’s Headless Capabilities.

Jason Smith
Chief User Experience Officer
November 11, 2019

Recommended Reading

Mastering the New Universal Visual Editor in dotCMS: A Technical Deep Dive for Developers

Explore dotCMS's Universal Visual Editor, merging WYSIWYG simplicity with headless CMS flexibility. This tool offers drag-and-drop editing, inline content editing, and NoCode tooling for seamless omni...

Benefits of a Multi-Tenant CMS and Why Global Brands Need to Consolidate

Maintaining or achieving a global presence requires effective use of resources, time and money. Single-tenant CMS solutions were once the go-to choices for enterprises to reach out to different market...

Headless CMS vs Hybrid CMS: How dotCMS Goes Beyond Headless

What’s the difference between a headless CMS and a hybrid CMS, and which one is best suited for an enterprise?