XWalk Universal Editor Source HTML

Question

Hey All,

So I am writing an Extension for Universal Editor....I want to export the rendered html of the xwalk account. So lets say I have a xwalk page at /content/website/index.html and open it in universal editor. how can I access the rendered html from universal editor?

arunpatidar · Accepted Answer

Hi @aemgeek You can check Third Lap: Universal Editor and Edge Delivery Services section in the below page to check how EDS and Universal editor works togetherhttps://www.theaemmaven.com/post/three-laps-around-the-universal-editor https://www.aem.live/developer/ue-tutorial You cannot edit local content with universal editor in EDS setup.

SantoshSai · Answer

Hi @aemgeek,1. Use the Page's IFrame from Universal EditorUniversal Editor renders the editable page inside an iframe. You can access this iframe and retrieve the rendered DOM/HTML.Steps:From your extension code (typically a Content Tools extension or sidebar panel), use the Universal Editor SDK or vanilla JavaScript to access the iframe.// Find the iframe that contains the rendered pageconst iframe = document.querySelector('iframe[data-universal-editor-page-frame]');if (iframe && iframe.contentDocument) {  const doc = iframe.contentDocument;    // Get full HTML as string  const htmlString = '<!DOCTYPE html>
' + doc.documentElement.outerHTML;  console.log('Exported HTML:', htmlString);  // Optional: Download or send this to your backend}2. CORS ConsiderationsMake sure the page loaded in the iframe (/content/website/index.html) is served from the same origin/domain. Otherwise, you’ll hit cross-origin security issues when trying to access iframe.contentDocument.If you're developing locally, you may need to:Ensure editor and content site run on the same domain (e.g., localhost:4502).Or configure CORS headers on the AEM dispatcher/dev server to allow it (less secure, not recommended for prod).3. Alternative: Fetch via fetch() If Publicly AvailableIf the page is publicly available and doesn't require auth, you can directly fetch the rendered HTML:fetch('/content/website/index.html')  .then(res => res.text())  .then(html => {    console.log('Exported HTML:', html);  });But this does not reflect real-time edits happening in the Universal Editor iframe - it just gets the published version.

XWalk Universal Editor Source HTML

2 replies

1. Use the Page's IFrame from Universal Editor

Steps:

2. CORS Considerations

3. Alternative: Fetch via `fetch()` If Publicly Available

1. Use the Page's IFrame from Universal Editor

Steps:

2. CORS Considerations

3. Alternative: Fetch via fetch() If Publicly Available

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded

3. Alternative: Fetch via `fetch()` If Publicly Available