UMI: A React Framework with Dual Bundler Support, Module Federation, and a Max Variant
A framework in react community. umi A framework in react community Please consider following this project's author, sorrycc, and consider starring the project to show your and support.
At a glance
- What is it?
- UMI is a TypeScript-first React framework from the umijs community that supports both Webpack and Vite bundlers, ships module federation examples, and offers an extended max variant for more built-in integrations. All documentation and install instructions live at umijs.org.
- Who is it for?
- UMI suits React developers who want a framework that covers both Webpack and Vite bundlers and provides module federation support. The max variant targets teams building with Ant Design Pro integrations.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 6 days ago.
- What is it written in?
- Mainly TypeScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 25, 2026, and from our analysis. They are not legal advice.
Editorial analysis
What UMI Offers React Developers
UMI describes itself as a framework in the React community, developed under the umijs GitHub organization and led by author sorrycc. The project is written in TypeScript and targets React application development, positioning itself as a framework rather than just a bundler configuration layer.
The repository description on GitHub is 'A framework in react community', and the homepage is umijs.org, where all user-facing documentation lives. The current release is v4.7.21, as of 2026-09-28. The primary language is TypeScript, and the licence is MIT.
The related searches for the project include 'Umi React', 'Umijs v4', 'umijs preset umi', and 'Umijs/max', indicating that the framework, its versioning, its preset system, and the max variant are the most commonly searched topics.
Monorepo Architecture and the @umijs Package Ecosystem
The repository is organized as a TypeScript monorepo. The pnpm-workspace.yaml and pnpm-lock.yaml files confirm pnpm workspaces are used for managing the package graph. The turbo.json file configures TurboPack for incremental builds. The lerna.json file is also present, reflecting historical tooling that coexists with the current Turbo setup.
The packages/ directory contains the individual packages published to npm. The package.json scripts section shows the monorepo commands: bootstrap runs umi-scripts bootstrap; build runs umi-scripts turbo build; dev runs umi-scripts turbo dev --parallel. Several @umijs sub-packages are visible from the scripts: @umijs/codemod for code migrations, @umijs/copilot for AI assistance features, and @umijs/did-you-know for contextual tips. The @umijs/docs package handles the documentation site.
The libs/ directory holds shared libraries used across packages, and the ui/ directory contains UI components.
Webpack and Vite Bundler Options
One of the distinctive aspects of UMI v4 is the choice of bundler backend. The examples directory includes bundler-vite-demo/ and bundler-webpack-demo/, confirming that both Vite and Webpack are supported as bundler backends. The choice between them affects build speed and compatibility: Vite provides faster hot module replacement during development, while Webpack has a larger ecosystem of loaders and plugins.
The configuration file at the root of the repository is .umirc.ts, indicating that project configuration is written in TypeScript. The format and available configuration keys are documented at umijs.org rather than in the repository README.
For legacy compatibility, examples/legacy/ is present, suggesting there is a legacy mode for projects that require older browser targets or compatibility settings.
Module Federation and MFSU
Module federation allows a host application to consume components or modules from a remote application at runtime, without bundling them together at build time. The examples directory contains mf-host/ and mf-remote/ examples, which are the host and remote sides of a module federation setup.
Several MFSU-related examples also exist: mfsu-circular-dependency/, mfsu-e2e/, mfsu-esbuild-less-demo/, and mfsu-independent-e2e/. MFSU is a feature specific to UMI's webpack integration. The examples cover circular dependency scenarios and esbuild integration for performance.
The presence of multiple MFSU examples indicates this is a first-class feature of the framework. The related searches include no MFSU-specific queries, suggesting it is primarily used by developers already familiar with UMI rather than being a discovery entry point.
The UMI Max Variant and Ant Design Pro
The examples directory contains an examples/max/ subdirectory, confirming the existence of a max variant. The related searches list 'Umijs umi max' and 'Umijs/max' as common search queries, indicating the max variant is a significant part of the UMI ecosystem. The related search 'umijs preset umi' suggests the preset system is how the max variant extends the base framework.
Two Ant Design Pro-related examples are present: examples/ant-design-pro/ and examples/antd-pro-create/. Ant Design Pro is a UI framework commonly used with React in the Chinese developer community, and UMI's integration with it is a prominent use case. The create-umi-simple/ and create-umi-pro/ examples suggest project scaffolding commands exist for both minimal and Ant Design Pro setups.
Additional feature examples include config-locale/ (internationalization configuration), config-proxy/ (proxy configuration), lint/ (linting integration), and client-loader/ (client-side data loading). An api-route-demo/ example suggests server-side API routes are also supported.
When UMI Is the Wrong Choice
The most significant practical limitation is the repository README. It contains no installation instructions, no usage examples, and no configuration documentation. Everything the README provides is community links, contributor lists, and a pointer to umijs.org. Developers who require a self-contained repository for onboarding will find this a barrier.
An example of what the README does not cover: the .umirc.ts configuration format, how to scaffold a new project, what the difference is between umi and umi max, and what the MFSU feature does. All of this lives at umijs.org.
Next.js is the most widely used React framework and is a strong alternative for teams that need server-side rendering, static site generation, or serverless edge functions. Next.js is an opinionated full-stack React framework from Vercel, focused on SSR, SSG, and edge deployment. The difference in approach is that UMI is primarily client-side application-focused with a stronger emphasis on module federation and Chinese ecosystem integrations, while Next.js is full-stack and has stronger server-side rendering and deployment primitives.
Maintenance, Vue Support, and the MIT Licence
The last push to the master branch was on 2026-09-24, and v4.7.21 was released on 2026-09-28. Earlier releases include v4.7.19 on 2026-09-20 and v4.7.18 on 2026-09-16, showing an approximately weekly release cadence. The project is under active development.
A notable entry in the examples is examples/boilerplate-vue/, which indicates Vue support exists in some form. This is separate from the core React framework orientation; the extent and stability of Vue support is not documented in the repository README and would need to be verified at umijs.org.
The codemod/ directory and the @umijs/codemod package provide tooling for migrating between UMI versions. The CONTRIBUTING.md file at umijs.org documents the contribution process. The repository is released under the MIT licence, which permits commercial use, modification, and redistribution without restrictions beyond attribution.
Editorial conclusion
UMI suits React developers who want a framework that covers both Webpack and Vite bundlers and provides module federation support. The max variant targets teams building with Ant Design Pro integrations. All setup and configuration guidance lives at umijs.org; the repository README documents nothing about installation or usage. Verify at umijs.org that your required integration is documented for v4 before adopting the framework.
Frequently asked questions
Does UMI support both Webpack and Vite?
Yes. The examples directory in the umijs/umi repository includes both a bundler-webpack-demo and a bundler-vite-demo, confirming that both Webpack and Vite are supported as bundler backends. The configuration for selecting a bundler is managed through the .umirc.ts configuration file.
What is the difference between umi and umi max?
The repository examples directory contains both an examples/max/ folder and a separate base boilerplate, suggesting umi max is a variant that includes additional integrations beyond the base framework. The related searches for 'Umijs/max' indicate it is a distinct package. Documentation for what umi max adds is at umijs.org.
What licence does UMI use?
UMI is released under the MIT licence, as stated in the LICENSE file in the repository root. This permits free use, modification, and redistribution for both commercial and non-commercial projects.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/umijs-umi)