AEM SPA Editor Alternatives after deprecation

[kharman]

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/dev...

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

[AmitVishwakarma]

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

[kharman]

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]

Hi @kharman 

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

[arunpatidar · Accepted solution]

Hi @kharman 

here 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-open-page-in-univer...

https://github.com/adobe/aem-headless-app-templates/tree/main/nextjs-rsc-universaleditor 

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev... 

Both approaches covers only the CF but to work with universal editor, the markup should contains the instrumented data attribute.

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev... 

[kautuk_sahni]

@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.