How to use Universal Editor on my local machine ?

[Ankan_Ghosh]

Hey folks,

I have been trying to set up the universal editor on my local machine to perform authoring of my blocks. I have some custom blocks developed, and for now, I author them on the AEM cloud's Universal editor and publish the demo page to check for any authoring changes on my local ( which has been started by the 'aem up' command ). Yes, I can see any change I make regarding the decoration of these blocks on the go, but to make a change in the content, I need to update it on the Dev instance of my AEM Cloud Service. Then the same content is proxied in my local through the local ( by the grace of 'aem up' ). But is there any way I can make this change on my local and see the changes instantly? Does the underlying architecture allow for doing so?

If anybody has an idea of how to solve this problem, please let me know. 

And there was an article by Adobe to set up a universal editor locally for React apps, I have followed the steps. Running Your Own Universal Editor Service | Adobe Experience Manager 
Now, https://localhost:8000/ping gives a response 

{"ping":"pong"}

But if the universal editor is set up on my local, how do I connect it to my site/content ( if possible )? 

[AmitVishwakarma]

Hi @Ankan_Ghosh ,

Try below steps:

1. Run the Universal Editor Locally (already done)

You’ve already done this via:

npm run start

Which makes https://localhost:8000/ping respond with {"ping": "pong"}

2. Create a Local JSON Content API (Mock or CMS Stub)

Since your local doesn't have AEM author endpoints, create a mock content JSON API.

You have 3 options:

  - Mock JSON files representing the content structure per block/page.

  - Run a local Express.js or Node server serving content from files.

  - Use AEM Content Proxy and enhance it to allow writing (not just proxying).

Example:

// http://localhost:3000/content/page.json
{
  "blocks": {
    "hero": {
      "title": "My Local Hero Block",
      "description": "Testing local content"
    }
  }
}

Use this as a headless content source for Universal Editor.

3. Point Universal Editor to Local Content Source

Update your Universal Editor config (ue.config.json or project-specific config) to point to this local JSON content source instead of AEM Cloud URLs.

{
  "authoring": {
    "contentSource": "http://localhost:3000/content/page.json",
    "persistEndpoint": "http://localhost:3000/api/save"
  },
  "preview": {
    "previewUrl": "http://localhost:3000"
  }
}

This step tells Universal Editor: “Hey, get and save content using my local API.”

4. Inject Authoring Metadata in Your Local HTML/Blocks

Ensure the blocks in your local page HTML include the authoring metadata required for UE to recognize editable elements.

Example for a block:

<div data-editor-item-id="hero.title" data-editor-type="text">
  My Local Hero Block
</div>

This markup is critical it connects the editor UI to the content model.

5. Add Persistence Logic

If you want edits to persist locally, create a small API route (/api/save) to:

Accept POST from Universal Editor with content updates

Write JSON files to disk or memory

This step makes editing real-time and persistent without needing Cloud.

Note:

Enable HTTPS on your local preview server if possible (Universal Editor requires it).

Use Adobe’s @adobe/universal-editor-core SDK for advanced block editing.

Use data-editor-* attributes correctly in every custom block.

Regards,
Amit