AEM SPA Editor Alternatives after deprecation | Community
Skip to main content
K
kharman
Level 2
May 27, 2025
Solved

AEM SPA Editor Alternatives after deprecation

  • May 27, 2025
  • 3 replies
  • 974 views

Hello,

Yesterday saw the notice that AEM SPA Editor is being deprecated and the option suggested is to use Universal Editor or Content Fragment Editor. The SDKs are in feature freeze.

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/developing/hybrid/spa-editor-deprecation

I always thought Universal Editor was used in Adobe Edge Services.

I looked at SPA Editor as an option that allows us to use the AEM authoring features to create the page hierarchy, assemble the pages, use AEM as a Headless CMS using Content Fragments + GraphQL and also by using the model.json selectors for the pages.

Is there a reference implementation using the Universal Editor for a hybrid implementation of SPA?

Regards,

Manish

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

AmitVishwakarma
Community Advisor
AmitVishwakarmaCommunity Advisor
Community Advisor
May 27, 2025

Hi @kharman ,

Try below step's:

1. Authoring in AEM – Content Fragments

Use Content Fragment Models (CFMs) to define structured content.

Authors can manage content in Sites > Assets > Files.

Use AEM’s GraphQL endpoint to expose CF data.

Example:

query { articleList { items { title description authorName } } }

2. Frontend – React/Next.js

Build your SPA using React or Next.js. Fetch content via AEM GraphQL endpoint (/content/cq:graphql/global/endpoint.json).

Example:

const fetchData = async () => { const res = await fetch("https://author.my-aem.com/graphql/endpoint.json", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: `query { articleList { items { title } } }` }) }); const data = await res.json(); return data; };

3. Enable Universal Editor Editing

In your frontend app, annotate editable components like this:

<div data-universal-editor-editable="true" data-universal-editor-fragment-id="article-123" data-universal-editor-element-id="title" > Understanding Headless CMS </div>

These data-universal-editor-* attributes are key they tell the Universal Editor what to overlay for editing.

In AEM: Register the Universal Editor

1. Visit: http://localhost:4502/libs/universaleditor/config/editor.html

2. Register your frontend domain, e.g. https://myfrontend.com

3. Map your CF model paths and metadata

Regards,
Amit

    K
    kharmanAuthor
    Level 2
    May 27, 2025

    Thank you Arun and Amit, will check these.

    Anything where the React/Angular SPA deployment can be deployed on AEM itself? Just like SPA Editor allowed?

    Regards,

    Manish.

    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    May 28, 2025

    Hi @kharman 

    There is no other replacement than universal editor as of now.

    Arun Patidar
      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      June 23, 2025

      @kharman Did you find the suggestions helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you.

      Kautuk Sahni
      Terms & ConditionsAccessibility statement

      Loading footer...