How to Create an AEM Bookmarklet for Quick Page Preview

If you regularly work in Adobe Experience Manager (AEM), switching between Author and Publish environments can become repetitive. A simple browser bookmarklet can make this process instant. In this tutorial, you’ll learn how to create two handy bookmarklets—one for previewing a page in Author mode, and another for opening it directly on the Publish environment.

What Is an AEM Bookmarklet?

A bookmarklet is a small piece of JavaScript stored as a browser bookmark. When clicked, it performs a specific function on the page you’re currently viewing. In AEM, bookmarklets are extremely helpful for quick testing and debugging.

Bookmarklet 1: Preview This Page on Author

This script opens your current page in a new tab with the authoring interface (chrome) disabled, showing a clean preview.

Code:

javascript:(function(){
  try{
    var u=new URL(window.location.href);
    var p=u.pathname;
    if(p.indexOf('/editor.html')===0){p=p.replace('/editor.html','');}
    if(!/\.html$/.test(p)){
      if(p.endsWith('/')){p=p.slice(0,-1);}
      p+='.html';
    }
    u.pathname=p;
    u.searchParams.set('wcmmode','disabled');
    window.open(u.toString(),'_blank');
  }catch(e){
    alert('Preview failed, '+e);
  }
})();

How to Use:

1. Copy the code above.
2. Create a new bookmark in your browser.
3. Paste the script into the URL field.
4. Name it AEM Author Preview.
5. Visit any page in AEM Author and click the bookmarklet to view the page in preview mode.

Bookmarklet 2: View This Page on Publish

This one lets you open the same page on the Publish environment. The first time you run it, it asks for your publish base URL (e.g., https://www.example.com), saves it in your browser, and then opens the correct page.

Code:

javascript:(function(){
  try{
    var k='aemPublishHost';
    var base=localStorage.getItem(k)||prompt('Enter publish base URL, for example https://www.example.com');
    if(!base){return;}
    localStorage.setItem(k,base);
    var u=new URL(window.location.href);
    var p=u.pathname.replace('/editor.html','');
    if(!/\.html$/.test(p)){
      if(p.endsWith('/')){p=p.slice(0,-1);}
      p+='.html';
    }
    var pub=new URL(base);
    pub.pathname=p;
    pub.search='';
    pub.hash='';
    window.open(pub.toString(),'_blank');
  }catch(e){
    alert('Publish open failed, '+e);
  }
})();

How to Use:

1. Create another bookmark and paste this code.
2. Name it AEM Publish View.
3. When clicked, it will ask for your publish domain (first time only).
4. Opens the matching page on your publish instance.

Why These Bookmarklets Help

• Speed: No need to manually edit URLs or open multiple tabs.
• Consistency: Always load the correct page format, whether it’s preview or live.
• Customization: Works across different AEM instances and environments.

Extra Tips

• Works perfectly for URLs like /editor.html/content/your-site/en/home.html.
• Adds .html automatically if missing in your setup.
• To reset your saved publish URL, open the browser console and run: localStorage.removeItem('aemPublishHost');

Using bookmarklets in AEM is a simple yet powerful way to speed up daily authoring and QA tasks. Whether you’re previewing content updates or verifying published pages, these scripts can save you several clicks every day.

If you often switch between environments, bookmarklets like these are must-haves in your productivity toolkit.