XWalk Universal Editor Source HTML
Hi @AEMGeek,
1. Use the Page's IFrame from Universal Editor
Universal 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 page
const 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>\n' + doc.documentElement.outerHTML;
console.log('Exported HTML:', htmlString);
// Optional: Download or send this to your backend
}2. CORS Considerations
Make 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 Available
If 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.
Santosh Sai
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 together
https://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.
Arun Patidar
