AEM.Design Compose for webpack

Implementing UI behaviour and functionality has been done successfully for a long time now but there is no one solution for AEM. We have taken the time over the past years to find ways of improving our day-to-day workflows. Trying several approaches, we eventually came to the conclusion that other “live reload” solutions didn’t fit our needs.

AEM.Design Compose was born with warmth and ❤️.

Our solution is different from the rest simply because we don’t using syncing, we don’t require clunky solutions such as VLT, and we don’t ask that FED’s use technology stacks beyond what they know. Simple is best and that is what we give via webpack & webpack-dev-server.

Get started now View it on GitHub

Getting started

It is not a requirement to be using aemdesign-aem-compose but it is highly recommended you use the same structure to prevent any errors that may arise due to inconsistent pathing.


  • AEM 6.3+
  • Node.js 10+
  • Yarn (NPM can be used but version stability isn’t guaranteed)



Add the @aem-design/compose-webpack package to your project.

via NPM

npm install @aem-design/compose-webpack --save-dev

via Yarn

yarn add @aem-design/compose-webpack -D

Add an NPM scripts for ease-of-use.

"scripts": {
  "build": "aemdesign-compose -p --project=core",
  "": "aemdesign-compose -d --project=core",
  "serve": "aemdesign-compose -d --watch --project=core"

Run it!

via NPM

npm run build

via Yarn

yarn build


See configuration page for more information.

About the project

@aem-design/compose-webpack is © 2020 by AEM.Design.


@aem-design/compose-webpack is distributed by an Apache-2.0.


When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. Read more about becoming a contributor in our GitHub repo.

Code of Conduct

@aem-design/compose-webpack is committed to fostering a welcoming community.

View our Code of Conduct on our GitHub repository.