umijs/qiankun

★ 16,603TypeScriptAudience · developerComplexity · 4/5LicenseSetup · hard

Mindmap

mindmap
  root((qiankun))
    What It Does
      Loads sub-applications
      Isolates CSS styles
      Sandboxes JavaScript
      Lazy loads apps
    Tech Stack
      TypeScript
      single-spa
      HTML entry mode
    Use Cases
      Large team coordination
      Mixed framework apps
      Independent deployment
    Audience
      Frontend developers
      Enterprise teams

mindmap root((qiankun)) What It Does Loads sub-applications Isolates CSS styles Sandboxes JavaScript Lazy loads apps Tech Stack TypeScript single-spa HTML entry mode Use Cases Large team coordination Mixed framework apps Independent deployment Audience Frontend developers Enterprise teams

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Split a large web application into separate sub-apps so different teams can build and deploy independently.

USE CASE 2

Mix React and Vue sub-apps in a single web page without their styles or JavaScript interfering with each other.

USE CASE 3

Allow teams to release frontend features on their own schedule without coordinating a single monolithic deployment.

Tech stack

TypeScriptJavaScriptsingle-spaNode.js

Getting it running

Difficulty · hard Time to first run · 1h+

Requires restructuring your web app into a shell and sub-apps, each with its own separate build and deployment pipeline.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Qiankun is a JavaScript framework for a software architecture pattern called micro frontends. The core idea is the same one that drives microservices in backend development: instead of building one large web application that every team touches, you break the frontend into smaller, independently developed and deployed pieces called sub-applications. Each team can build and ship their piece on their own schedule, using whatever JavaScript framework they prefer, and a central shell application assembles everything into a single page for the user. Qiankun originated inside a large organization managing web app development across many distributed teams. As the number of apps and teams grew, keeping everything working together became increasingly difficult. The team solved each of the hard technical problems one by one: how to isolate one sub-app's CSS so it does not accidentally override another's, how to sandbox each sub-app's JavaScript so a variable set in one does not corrupt another, how to load sub-apps lazily so users do not download everything at once, and how to pre-fetch upcoming sub-apps so navigation feels instant. After years of production use across hundreds of apps, they extracted and open-sourced the solution as Qiankun. The framework is built on top of an existing project called single-spa, which handles the lower-level lifecycle management of sub-applications. Qiankun adds a more complete API on top, including an HTML entry mode that lets sub-apps describe themselves with a simple URL rather than requiring a bundled JavaScript file, and an optional plugin for the Umi development framework. Installing it is a single npm command. Documentation covers a getting-started guide, full API reference, cookbook tutorials, and a FAQ. Example code with a shell app and multiple sub-apps is included in the repository. The name means universe in Chinese, reflecting the idea that it can contain anything. Qiankun is licensed under MIT and is widely used in enterprise frontend projects.

Copy-paste prompts

Prompt 1

Using qiankun, show me how to set up a main shell application that loads a React sub-app and a Vue sub-app on different routes.

Prompt 2

How does style isolation work in qiankun? Enable it so sub-apps cannot override each other's CSS.

Prompt 3

Write the qiankun configuration for a sub-app that sends data back to the main shell application.

Prompt 4

How do I set up lazy loading and prefetching with qiankun so sub-apps feel instant when the user navigates?

Open on GitHub → Explain another repo

← umijs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.