@microzord/core

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

Installation and usage

An extensive demo is coming soon...

An example of usage external apps in Angular app

app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideMicrozordHost({
      apps: [
        {
          name: 'remote-header',
          load: () => import('my-app-in-react').then((m) => m.MyHeader),
        },
        {
          name: 'remote-footer',
          load: () => import('my-app-in-angular').then((m) => m.MyFooter),
        },
      ],
    }),
  ],
};

Usage in application:

import {Component} from '@angular/core';
import {MicrozordAppModule} from '@microzord/angular';

@Component({
  selector: 'app-root',
  imports: [MicrozordAppModule],
})
export class App {}

<header [microzordApp]="'remote-header'"></header>

<footer [microzordApp]="'remote-footer'"></footer>

Core team

Igor Katsuba

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