Esmx

<div align="center"> <img src="https://esmx.dev/logo.svg?t=202511" width="180" alt="Esmx Logo" /> <h1>Esmx</h1> <div> <a href="https://www.npmjs.com/package/@esmx/core"><img src="https://img.shields.io/npm/v/@esmx/core.svg" alt="npm version" /></a> <a href="https://github.com/esmnext/esmx/actions/workflows/build.yml"><img src="https://github.com/esmnext/esmx/actions/workflows/build.yml/badge.svg" alt="Build" /></a> <a href="https://esmx.dev/coverage/"><img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" /></a> <a href="https://nodejs.org/"><img src="https://img.shields.io/node/v/@esmx/core.svg" alt="node version" /></a> <a href="https://bundlephobia.com/package/@esmx/core"><img src="https://img.shields.io/bundlephobia/minzip/@esmx/core" alt="size" /></a> </div> <h3>Next-generation micro-frontend framework based on ESM with zero runtime overhead, supporting sandbox-free multi-framework hybrid development</h3> <p>⚡️ <strong>Ultimate Performance</strong> · 🛠️ <strong>Developer Friendly</strong> · 🔧 <strong>Standard Syntax</strong></p> <p> English | <a href="https://github.com/esmnext/esmx/blob/master/README.zh-CN.md">简体中文</a> </p> </div>

🚀 Core Features

• Zero Runtime Overhead - Based on native ESM + ImportMap, no sandbox or proxy
• High-Performance Build - Powered by Rspack, significantly faster builds
• Complete SSR Support - High-performance server-side rendering, SEO-friendly
• Standard ESM Syntax - No framework-specific APIs, minimal learning curve
• Multi-Framework Support - Vue, React, Preact, Solid, and more

📊 vs Traditional Micro-frontends

| Feature | Traditional Solutions | Esmx | |---------|----------------------|------| | Architecture | Manual sandbox + proxy | Native ESM | | Runtime | Has overhead | Zero overhead | | Learning Curve | Framework APIs | Standard syntax | | Module Isolation | Sandbox simulation | Browser native |

🚀 Getting Started

npx create-esmx@latest my-app

📖 Documentation

📦 Core Packages

| Package | Version | Status | Description | |---------|---------|--------|-------------| | @esmx/core | <a href="https://www.npmjs.com/package/@esmx/core"><img src="https://img.shields.io/npm/v/@esmx/core.svg" alt="npm version" /></a> | 🔵 Preview | Micro-frontend framework with ESM linking | | @esmx/router | <a href="https://www.npmjs.com/package/@esmx/router"><img src="https://img.shields.io/npm/v/@esmx/router.svg" alt="npm version" /></a> | 🔵 Preview | Framework-agnostic router | | @esmx/router-vue | <a href="https://www.npmjs.com/package/@esmx/router-vue"><img src="https://img.shields.io/npm/v/@esmx/router-vue.svg" alt="npm version" /></a> | 🔵 Preview | Vue integration (2.7+ & 3) | | @esmx/rspack | <a href="https://www.npmjs.com/package/@esmx/rspack"><img src="https://img.shields.io/npm/v/@esmx/rspack.svg" alt="npm version" /></a> | 🔵 Preview | Framework-agnostic Rspack tool | | @esmx/rspack-vue | <a href="https://www.npmjs.com/package/@esmx/rspack-vue"><img src="https://img.shields.io/npm/v/@esmx/rspack-vue.svg" alt="npm version" /></a> | 🔵 Preview | Rspack tool for Vue |

🎯 Demo Projects

| Project Name | Tech Stack | Live Preview | |-------------|------------|--------------| | ssr-html | Native HTML + TypeScript | Preview | | ssr-vue2-host | Vue 2.7 + SSR | Preview | | ssr-vue2-remote | Vue 2.7 | Preview | | ssr-preact-htm | Preact + HTM | Preview |

---

💡 Development: First run pnpm build to build all packages and examples, then cd to specific project directory to start development

📈 Star History