Quick Edit

Learn how to configure and use Quick Edit feature on your Document Authoring site.

Introduction

Quick Edit is a visual-centric authoring mode that enables direct editing within the preview of a page (aem.page), allowing creators to see changes in real-time. Adjusting the wording, fixing a typo or quickly replace an image on the page can be done directly in context. This mode accelerates content production by streamlining image updates and visual optimizations, effectively eliminating the need for traditional back-and-forth review cycles.

All content changes are synced with Document Authoring.

Setup

The Quick Edit feature can be used with any Edge Delivery Services project that uses the Document Authoring feature as the content source.

There are two ways for developers to get started:

Start with the AuthorKit template, which has Quick Edit built in. You only need to enable it via the AEM Sidekick configuration (see the Sidekick section below).

Option 2: Existing Projects

To add Quick Edit to an existing project, follow these steps:

Step 1: Modify scripts/scripts.js

Make the following changes to your existing scripts/scripts.js file:

  1. Add export keyword to your existing loadPage() function declaration
  2. Add the Quick Edit initialization code inside your existing loadLazy() function
  • scripts/scripts.js (javascript)
...

/**
 * Loads the page in eager, lazy, and delayed phases.
 */
export async function loadPage() {

...

/**
 * Loads everything that doesn't need to be delayed.
 * @param {Element} doc The container element
 */
async function loadLazy(doc) {

  ...

  const loadQuickEdit = async (...args) => {
    // eslint-disable-next-line import/no-cycle
    const { default: initQuickEdit } = await import('../tools/quick-edit/quick-edit.js');
    initQuickEdit(...args);
  };

  const addSidekickListeners = (sk) => {
    sk.addEventListener('custom:quick-edit', loadQuickEdit);
  };

  const sk = document.querySelector('aem-sidekick');
  if (sk) {
    addSidekickListeners(sk);
  } else {
    // wait for sidekick to be loaded
    document.addEventListener('sidekick-ready', () => {
    // sidekick now loaded
      addSidekickListeners(document.querySelector('aem-sidekick'));
    }, { once: true });
  }
}

Step 2: Create the Quick Edit module

Create a new file at tools/quick-edit/quick-edit.js in your project with the following content:

  • tools/quick-edit/quick-edit.js (javascript)
// eslint-disable-next-line import/no-cycle
import { loadPage } from '../../scripts/scripts.js';

const importMap = {
  imports: {
    'da-lit': 'https://da.live/deps/lit/dist/index.js',
    'da-y-wrapper': 'https://da.live/deps/da-y-wrapper/dist/index.js',
  },
};

function addImportmap() {
  const importmapEl = document.createElement('script');
  importmapEl.type = 'importmap';
  importmapEl.textContent = JSON.stringify(importMap);
  document.head.appendChild(importmapEl);
}

async function loadModule(origin, payload) {
  document.body.classList.add('quick-edit');
  const { default: loadQuickEdit } = await import(`${origin}/nx/public/plugins/quick-edit/quick-edit.js`);
  loadQuickEdit(payload, loadPage);
}

export default function init(payload) {
  addImportmap();
  loadModule('https://da.live', payload);
}

Sidekick

To enable the Quick Edit feature for AEM Sidekick, add the following plugin configuration to your AEM Sidekick configuration in the Config Service:

  • sidekick.json (json)
{
  "project": "...",
  "plugins": [
    {
      "id": "quick-edit",
      "title": "Quick Edit",
      "environments": [ "dev", "preview" ],
      "event": "quick-edit"
    }
  ]
}

Troubleshooting

If the page remains blank after clicking "Quick Edit"

One of the most common causes of the page remaining blank is waitForFirstImage. If your code includes something like this:

  • scripts/scripts.js (javascript)
await loadSection(main.querySelector('.section'), waitForFirstImage);

This code prevents the page from loading in the quick-edit context, since the first image will not re-fire the event to notify the page that it's loaded. Replace it with the following snippet:

  • scripts/scripts.js (javascript)
await loadSection(main.querySelector('.section'), (section) => {
  if (document.body.classList.contains('quick-edit')) return Promise.resolve();
  return waitForFirstImage(section);
});

This will look for the quick-edit class set in quick-edit.js, and skip the waitForFirstImage optimization if it's set.

If clicking the quick-edit button does nothing

Open the network tab. If you see a 403 status code from a request starting with https://admin.da.live/source/, sign out from both sidekick and DA, and try signing in again with the correct profile. If that still doesn't work, try signing in in a fresh incognito browser tab.