Mexo Project is a fork of the Microzord project. The main goal of the fork is to make the project more stable and to add new features. Mexo Project license is Apache 2.0, the same as the original project.

Mexo

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!

Installation and usage

An extensive demo is coming soon...

An example of usage external apps in Angular app

app.module.ts

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

Usage in application:

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

<div>Any content</div>

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

Core team

_{Igor Katsuba}

License

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