What is AEM and AEM65 plugins in universal editor component-definition.json ?

[VijayRa10]

Hey everyone, i was going the adobe universal editor documentation and component below configuration:

{
"groups":[
{
"title":"General Components",
"id":"general",
"components":[
{
"title":"Text",
"id":"text",
"model": "text",
"filter": "texts",
"plugins":{
"aem":{
"page":{
"resourceType":"wknd/components/text",
"template":{
"text":"Default Text",
"name":"Text"
}
}
},
"aem65":{
"page":{
"resourceType":"wknd/components/text",
"template":{
"text":"Default Text",
"name":"Text"
}
}
}
}
}
]
}
]
}

I saw that plugins define which plugin is responsible for persisting the component. The documentation mentions:
plugins defines which plugin is responsible for persisting the component. Common plugins include:

• aem for AEM as a Cloud Service.
• aem5 for AEM 6.5.
• xwalk for AEM as a Cloud Service WYSIWYG authoring.

But I’m not quite sure what these plugins actually do. Could someone explain:

• What exactly are aem and aem65 plugins in this context?
• How do they affect component behavior in Universal Editor?

Thanks in advance!

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

[kautuk_sahni]

@Pranay_M, @sarav_prakash, @PRATHYUSHA_VP, @Dipti_Chauhan, @Nupur_Jain, @marksarmiento This question could use some expert insight— we would love to hear your thoughts if you can take a look!

[sarav_prakash · Accepted solution]

Hi @VijayRa10 , 

Adobe is often using AEM and Franklin interchangeable. In this documentation, it talks about Franklin site integrated with AEM content and allows editing of AEM components.

• In order to follow the documentation, you must start from here - https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/edge-delivery/wy...
• Download the content from here https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases and put into your AEM instance 
• update fstab.yaml to point to your AEM instance 
• Run your Franklin site using `aem up`. It ll start local franklin site that points to AEM server configured at fstab.yaml
• If all done right, you are expecting a site that loads at localhost:3000 like this https://main--aem-boilerplate-xwalk--adobe-rnd.aem.page/
• 

And to answer the specific question, the plugins are editing tools that runs on UE and stores the content back into correct AEM server. Sticking to ootb plugins helps to run custom extensions we build on top of UE.

Now, this is one way of leveraging UE; you create a Franklin site, create content as AEM components, develop Franklin code, make configurations; and finally allow editing using UE.

But I would advise to directly jump to this section https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev...

I wrote a simplified article to run UE on any React components backed with Content Fragment graphql. This is easiest to jumpstart with UE. Better create CF, expose graphql and build a simple FE component fetching graphql and rendering. Then in 4 lines of code, you can edit CF content from UE.

Its just user preference/project requirement, how you design the content source and use UE. 

[VijayRa10]

Hey @sarav_prakash , thanks for the reply!
That's an interesting approach — using React with the Universal Editor sounds promising. Do you happen to have a repo I could look at to better understand the structure and implementation? Would love to dig into how you've set it up.

[sarav_prakash]

@VijayRa10 , refer to my article https://medium.com/@bsaravanaprakash/enable-universal-editor-on-any-react-app-in-4-easy-steps-e7c454...

I cloned from adobe demo repo https://github.com/adobe/universal-editor-sample-editable-app

thier demo site is https://ue-remote-app.adobe.net/ 

Its a react app. You can clone thier repo, run the app, point to your AEM author instance, bring the content from adobe release, and play around.