Skip to content
Get packs

qiankun

A JavaScript library for building web apps out of separately deployed micro frontends.

GitHub Download v2.10.16
Stars
16.7k
Forks
2.1k
Licence
MIT
Language
TypeScript
Last update
6 days ago
Type
Library

What it is

qiankun is a JavaScript library that lets a host web page load and run several independent web apps, each possibly built with a different framework and deployed by a different team. It is based on single-spa and adds features such as HTML-entry loading, a JS sandbox that keeps each app's globals and listeners contained, and optional style isolation. Teams use it when a large site is split across multiple groups and needs to be composed into one page.

  • Load a React micro app into a container element of a host page with loadMicroApp and unmount it later
  • Wrap a third-party script in the standalone @qiankunjs/sandbox package
  • Use the provided <MicroApp /> components for React or Vue in a host shell
  • Prefetch assets of a micro app so switching to it feels faster

Great for

  • Teams splitting one large web app across several groups that deploy independently
  • Projects that mix frameworks such as React and Vue on the same page
  • Developers who already use single-spa and want extra sandboxing and loading features
  • Hosts that need to load micro apps lazily into a container element

Not ideal for

  • Small single-team sites, since the setup adds complexity a single app does not need
  • Teams that need the stable 2.x line today, because the 3.0 features are still under development and installed via the rc tag
  • Projects looking only for a standalone sandbox for third-party scripts, which is better served by the separately published @qiankunjs/sandbox package
Step-by-step guide: how to use qiankunInstall, first run, examples, tips and FAQs
Kratos vs qiankun

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · pnpm (only needed to run the examples locally)

    Add qiankun to an existing host application

    npm i qiankun@rc

    Clone the repository to run the examples

    git clone https://github.com/umijs/qiankun.git

    Install workspace dependencies for examples

    pnpm install

    Start all example apps in parallel

    pnpm start:example
  2. 2

    Run it

    • Install qiankun with npm i qiankun@rc in your host application
    • Create a micro app that exports bootstrap, mount and unmount functions
    • Call loadMicroApp with a name, entry URL and container element in the host
    • Open the example host at http://localhost:7099 after running pnpm start:example to see a working setup
  3. 3

    Get the most out of it

    • Use the bundler plugin for webpack 4/5 or Vite so the entry attribute and library output are set automatically
    • Enable style isolation, which uses the CSS @scope at-rule, for micro apps that need scoped styles
    • Use the isolation lab in each example app to see what the sandbox contains
    • Use the React or Vue UI bindings instead of calling the API directly if your host uses those frameworks
    • Read the examples/README.md file to see what each example demonstrates

Downloads

Source code (.zip)next branch · straight from GitHubRelease v2.10.16Release notes and sourceOfficial website & docsqiankun.umijs.org

Strengths

  • Supports independent deployment and lazy loading of micro apps, as described in the README
  • Sandboxing and style isolation are built in, with the JS sandbox on by default
  • Lifecycle contract is small: bootstrap, mount and unmount exports

Trade-offs

  • The README says v3 is under active development and the latest tag still points to 2.x, so users must opt into the rc release
  • Requires understanding of micro-frontend concepts and bundler configuration for each stack
  • The README is truncated, so details of compatibility and limitations are not fully visible here

How it compares

ProjectStarsTypeLevelUpdatedBest for
qiankun (this)16.7kLibraryintermediate6 days agoTeams splitting one large web app across several groups that deploy independently
kratos26kLibraryintermediate5 days agoGo developers building a set of backend services that talk over HTTP or gRPC
angular-webpack-starter10.2kAppintermediate3.1 years agoDevelopers who want to study a hand-configured Webpack and Angular setup
nest77kFrameworkintermediate4 days agoTeams building larger back-end APIs in TypeScript who want enforced structure
dva16.1kLibraryintermediate1.3 years agoReact developers already familiar with Redux who want less boilerplate
pest11.8kLibraryintermediate5 days agoPHP developers who want to add automated tests to a project

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.