How to use Universal Editor on my local machine ? | Community
Skip to main content
Ankan_Ghosh
Ankan_Ghosh
Level 3
May 23, 2025
Question

How to use Universal Editor on my local machine ?

  • May 23, 2025
  • 2 replies
  • 922 views

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 )? 

2 replies

AmitVishwakarma
Community Advisor
AmitVishwakarmaCommunity Advisor
Community Advisor
May 23, 2025

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

 

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    July 31, 2025

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