# magic-portal
**Repository Path**: ByteDance/magic-portal
## Basic Information
- **Project Name**: magic-portal
- **Description**: ⚡ A blazing fast micro-component and micro-frontend solution uses web-components under the hood.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-26
- **Last Updated**: 2025-07-10
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
Magic Portal
Make micro-components and micro-frontends never that easy again.
[](https://github.com/bytedance/magic-microservices/blob/main/LICENSE)
## Overview
A lightweight micro-frontend / micro-component solution inspired by [Portals](https://github.com/WICG/portals) proposal
## Feature
- ⚡ Blazing fast, based on [magic](https://github.com/bytedance/magic-microservices)
- 🚀 Portability: write your code and use it with any frameworks.
- 🔨 Adaptable: an adapter for any JS module, friendly to existing code.
- 💪 Web Components driven design
## Quick Start
### Installation
```bash
$ npm install @magic-microservices/portal
# or
$ yarn add @magic-microservices/portal
```
### Register portal component
```typescript
import portal, { PortalHtmlEntryPlugin } from '@magic-microservices/portal'
await portal({
plugins: [new PortalHtmlEntryPlugin()], // fetch and parse html
})
```
### Use built-in portal component 🎉
Registration should be placed before instantiation. Portal html entry plugin uses fetch under the hood,
make sure the corresponding website's CORS has configured.
```html
```
## Advanced usage
### Manifest and extremely fast rendering experience
You may found the example above used `PortalHtmlEntryPlugin` to achieve HTML fetching and parsing at runtime, however in the best practice, this step should be avoided and moved to AOT(Ahead of Time) compilation.
Manifest is a file that describes how HTML looks like (ie.`scripts` and `styles`),
and we could use `PortalManifestWebpackPlugin` to generate that in compilation stage.
```typescript
import PortalManifestWebpackPlugin from '@magic-microservices/portal-manifest-webpack-plugin'
// webpack.config.js
plugins: [
...,
new PortalManifestWebpackPlugin()
]
```
`PortalManifestWebpackPlugin` takes advantage of `html-webpack-plugin` under the hood. To use this plugin, make sure Webpack is using that.
After that, each Webpack build would generate a `manifest.json` which corresponding to your HTML and you could use this file directly in `magic-portal` just like this:
```html
```
## Inspired by
Magic-portal is inspired by [Portals](https://github.com/WICG/portals) proposal, thanks!
## License
MIT