Skip to content

taiga-family/microzord

microzord logo microzord

npm version npm bundle size codecov

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>

Core team

Igor Katsuba
Igor Katsuba
Roman Sedov
Roman Sedov

License

🆓 Feel free to use our library in your commercial and private applications

All microzord packages are covered by Apache 2.0

Read more about this license here

About

Simple and powerful Micro Frontends framework

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Packages

No packages published

Contributors 7