Install the AEM CLI globally and point the local dev server at the PD Lab preview origin. This gives you a hot-reload preview at http://localhost:3000 that pulls content from AEM author while serving block code straight from your working copy.

Confirm your Node version is on the LTS track before installing — the CLI uses native ESM and assumes Node 20+. Once aem up is running, edits to any file under /blocks, /scripts, or /styles reload the browser within a second.

Every PD Lab block lives in its own folder under /blocks with three companion files: a JavaScript decorator, a CSS file scoped to the block, and an optional _blockname.json that describes the component model authors will see in Universal Editor.

The decorator function receives the block element as its only argument. Use the moveInstrumentation helper to carry author data attributes onto any new DOM you build, and reach for semantic tokens from styles/tokens/semantic.css instead of hard-coded values.

PD Lab uses a Husky pre-commit hook that runs whenever you stage a partial component JSON. The hook merges every _*.json under /models and /blocks into the three root files (component-models.json, component-definition.json, component-filters.json) and re-stages the result automatically.

You almost never need to run npm run build:json yourself — but it is safe to run during development if you want to verify what Universal Editor will see before you commit. Linting is not automatic; remember to run npm run lint before pushing.