aem-eds-kit / Local development & Universal Editor

Local development & Universal Editor

Run an AEM Edge Delivery Services project locally, configure the proxy, and preview content in the Universal Editor - with the eds commands that wire each piece. Everything here is light: a local proxy plus the hosted editor against your cloud author. No local AEM SDK, no local Universal Editor Service, no Docker.

The moving pieces

The local proxy renders your code against preview content (*.aem.page), so code changes hot-reload instantly while content comes from the real source.

.env - the proxy config

The AEM CLI (aem up) reads a .env at the project root. eds init writes one by default, and eds scaffold env (re)generates it on demand:

AEM_OPEN=/            # path opened on start ("/" = home)
AEM_PORT=3007        # local proxy port
AEM_PAGES_URL=       # content origin (the *.aem.page preview host)

• AEM_PAGES_URL is prefilled from your git remote as https://main--<repo>--<owner>.aem.page.
• The file is never overwritten by the CLI and is always gitignored - it's local-only and may hold secrets, so it never enters version control.

$ eds scaffold env                               # interactive
$ eds scaffold env --port 3007 --open / --yes     # non-interactive
$ eds init --no-env                               # opt out during setup

Then start the proxy:

$ npm install
$ aem up                                           # opens http://localhost:3007

xwalk.json - Universal Editor multi-field

Crosswalk (Universal Editor) projects need xwalk.json at the project root to enable multi-field support in the editor. eds init writes it by default for UE projects; regenerate with eds scaffold xwalk:

{
  "public": {
    "xwalk": {
      "multi-field": { "enabled": true }
    }
  }
}

$ eds scaffold xwalk        # on demand (never overwrites)
$ eds init --no-xwalk       # opt out during setup

eds ue - readiness check + editor deep link

Two light helpers for the Universal Editor - no infrastructure to stand up.

eds ue check

An offline readiness report. It confirms the project is UE-ready and lists which blocks are actually editable:

• Project is UE-ready when component-definition.json and component-models.json are present (component-filters.json completes the set).
• A block is editable when it has a model - a distributed _<name>.json in blocks/<name>/, or an entry in component-models.json. A block with no model won't appear in the editor; ue check flags it first.

$ eds ue check

eds ue open [path]

Builds and opens the deep link into the hosted Universal Editor, pointing the editor canvas at your preview host (derived from the git remote):

$ eds ue open /products
$ eds ue open / --org my-org --ref dev
$ eds ue open /blog --url main--site--owner.aem.page --no-open

The link format is https://experience.adobe.com/#/[@<org>/]aem/editor/canvas/<host>/<path>, where <host> defaults to main--<repo>--<owner>.aem.page.

The typical loop (Universal Editor, cloud author)

1. eds init writes .env, xwalk.json and the UE config, then npm install.
2. aem up - local proxy on AEM_PORT.
3. eds ue check - confirm blocks are editable.
4. eds ue open <path> - author in the Universal Editor; content saves to your cloud author and previews on *.aem.page.
5. Edit block code locally; the proxy hot-reloads.
6. Commit & push; the AEM Code Sync pipeline deploys.

FAQ

eds ue reference →   Document Authoring vs Universal Editor →