microzord

What is it?

It is a small tool that allows you to add and render multiple apps on one page. It has simple ideomatic APIs for all modern frameworks and builds bridges between them.

🧙 Framework agnostic. You can have an Angular application with a React app header and a Vue app footer. Each app can have endless amount of nested apps inside. There are also wrappers for every modern framework with simple API.

🧩 Modular. You can insert another app in your app in any place as an ordinary component. Use the same methods to bind data and to handle its events.

🐝 Tiny as a bee and works as well. No new code in the bundle of child application and a bit more than 1 KB library for host application to get all the benefits!

Angular version support

Microzord Version	Angular version
v2.x	16+
v1.x	12 - 15

Installation and usage

An extensive demo is coming soon...

An example of usage external apps in Angular app

app.module.ts

@NgModule({
  imports: [
    MicrozordHostModule.register({
      apps: [
        {
          name: 'react-menu',
        },
        {
          name: 'vue-footer-app',
        },
      ],
    }),
  ],
})
export class AppModule {}

Usage in application:

<header microzordApp="react-menu"></header>

<div>Any content</div>

<footer
  microzordApp="vue-footer-app"
  (hook)="onFooterLifecycleEvent($event)"
></footer>