Collage

micro frontends made simple

Getting Started Core Api

Framework Agnostic

Write your micro frontends and applications in vanilla js or with the frameworks you like - Collage will work with all of them

Easy to use

With Collage, every Web Application can be upgraded to a micro frontend with just two lines of code

Rock Solid

Built on web standards and only a few simple core concepts means that you never run into magic behaviour that ruins your day.

What`s in it for me?

Create an application that consists of different micro frontends

which can be developed in completely independent and autonomously working teams
that already existed as non-micro frontends before, but are extended to be reused as micro frontends
which have their own scope and are isolated and therefore do not affect others

<body>
  <div class="somewhere">
    <!-- include a micro frontend effortlessly -->
    <collage-fragment
      url="/url/to/micro-frontend"
      config-something="Configure this!"
      name="my-micro-frontend">
    </collage-fragment>
  </div>
</body>

const api = await expose({
  // expose the api of your micro frontend
  services: {
    myService(name = "") {
      return `Default Implementation for ${name}`;
    },
  },
});

Installation

npm install @collage/core