Enable Universal Editor on any React app in 4 easy steps

[#1]

Enable Universal Editor on any React app in 4 easy steps

  by Saravana Prakash

Overview

Bullet point instructions for activating Universal Editor on any React application. This article specifically covers using AEM as Headless Content Provider. The react application runs graphql query; fetches content and renders. By enabling universal over the react application, content authors can seamlessly edit content, in a user-friendly intuitive way. Previous authoring experience expects authors needing AEM training. Universal editor simplifies this experience.

https://medium.com/@bsaravanaprakash/enable-universal-editor-on-any-react-app-in-4-easy-steps-e7c454...

Q&A

Please use this thread to ask questions relating to this article

[#2]

Thanks for the detailed steps, @sarav_prakash ! This makes integrating Universal Editor into a React app sound so straightforward. Could you clarify how the Universal Editor handles content versioning or rollback within React apps? Is it automatically managed, or does it require custom implementation?

[#3]

@sarav_prakash Thanks for sharing this. The 4-step guide is very practical. I’m interested to know, have you seen any challenges when integrating Universal Editor with React apps using client-side routing frameworks like Next.js or Gatsby?

[#4]

Hi @AmitVishwakarma , afaik, not much option for content versioning. Above example is enabling universal editor on reacts apps consuming headless content from AEM via persisted queries. Content fragment, once updated, not sure how we go back to previous version of content. 

So far, we are controlling content by governance. Authors edit content and send to manager for approval. Gets published only when approved. Will let you know if any version management options within content fragment. 

[#5]

Hi @kautuk_sahni , the usecase that worked well for me was, clientside react app using headless content via persisted queries. Now Gatsby is SSG, clientside hydration would happen and universal editor ll work at clientside. But Next.js is SSR. Technically its possible to call persisted query, at serverside, in that case, universal editor will not work. UE works at clientside, renders react app on an iframe and editing content refreshes frame to load latest content at clientside. I haven't tried such SSR app calling persisted queries from serverside and returning rendered DOM. But if Next.js app has client hydration, and persisted query happens clientside, becomes similar to react app and UE should work smooth. 

I ll try setting a Next app and test if UE works if SSRed vs CSRed.