@vitejs/plugin-react
The official Vite plugin for React with Babel-powered Fast Refresh and JSX transforms
Repository Health
Technical Analysis
@vitejs/plugin-react is the default, officially maintained Vite plugin for React projects, enabling JSX/TSX compilation and Babel-based Fast Refresh so component edits update in the browser instantly without losing component state. It is scaffolded automatically by create-vite for every React template and is the plugin most React + Vite projects depend on without ever needing to configure directly.
The plugin lives in the vite-plugin-react monorepo alongside @vitejs/plugin-react-swc (an SWC-based alternative optimized for faster cold starts) and experimental React Server Components tooling (@vitejs/plugin-rsc). @vitejs/plugin-react itself uses Babel, which trades a small amount of transform speed for broader plugin/preset compatibility (including optional React Compiler integration), making it the default recommendation for most projects.
What You Get
- Automatic JSX/TSX transformation for
.jsx/.tsxfiles using Babel during both dev and build - Babel-powered React Fast Refresh, preserving component state across hot module reloads in development
- Configurable Babel plugin/preset injection for custom transforms (e.g. styled-components, emotion)
- Optional integration with the React Compiler (
babel-plugin-react-compiler) via a dedicated preset - Zero-config setup as the default plugin scaffolded by
create-vite’s React templates
Common Use Cases
- Standard React + Vite application development, added automatically via
create-vite --template react - Enabling Fast Refresh so component state survives edits during local development
- Adding custom Babel plugins/presets (e.g. for CSS-in-JS libraries) to a Vite-based React build
- Opting a React codebase into the React Compiler’s automatic memoization via the plugin’s compiler preset
Under The Hood
Architecture: The plugin (packages/plugin-react/src/index.ts) implements Vite’s Plugin interface, transforming matched .[tj]sx? files with Babel and injecting a refresh-runtime.js preamble plus a virtual preamble plugin from the shared @vitejs/react-common package (also used by the SWC sibling plugin-react-swc) so both variants share Fast Refresh wiring logic; a separate reactCompilerPreset.ts composes an optional Babel preset that layers in babel-plugin-react-compiler for projects opting into the compiler. Tech Stack: TypeScript throughout, built as an ESM package consumed by Vite’s plugin pipeline, tested with Vitest, and versioned as one package among several (plugin-react, plugin-react-swc, plugin-rsc, common) in a pnpm-workspace monorepo maintained by the core Vite team (Evan You among the listed authors). Code Quality: The compiler preset ships its own dedicated test file (reactCompilerPreset.test.ts) and the plugin is exercised indirectly by Vite’s own extensive e2e suite across the ecosystem given its status as the default React integration; the small, focused src/ surface (three files) keeps the reviewable footprint minimal for a project this widely depended upon. API Design: The Options interface documents every knob (include/exclude patterns, jsxImportSource, jsxRuntime) with inline JSDoc and sensible defaults, so the overwhelming majority of consumers add react() to their vite.config.ts plugins array with zero configuration.
Used by 192 apps in this directory
Abby
Developer Tools · Product Management
Statically typed feature flags, remote config, and A/B testing with framework-native SDKs for TypeScript teams.
Activepieces
Automation · AI Assistants
Open-source AI automation platform that converts 280+ workflow integrations into MCP servers for LLMs, with no-code builders and TypeScript extensibility.
Actual
Invoicing Finance
Local-first personal finance with envelope budgeting, end-to-end encryption, and multi-device sync — no subscription required.
Agent Control
AI Agents
An open-source runtime control plane for AI agents — define safety guardrails once, apply them across agents built on LangChain, CrewAI, Google ADK, or AWS Strands, and update controls without redeploying code.
Agent Lightning
AI Development
A Microsoft-built training framework that optimizes AI agents with reinforcement learning, automatic prompt optimization, or supervised fine-tuning — with near-zero code changes to your existing agent, in any framework.
agentgateway
AI Development · Developer Tools
An open source AI-native proxy that secures, observes, and governs agent-to-LLM, agent-to-tool, and agent-to-agent communication through MCP, A2A, and unified LLM routing.
Agents Observe
Developer Tools
A real-time, fully local observability dashboard for Claude Code and Codex agent sessions — filtering, search, session replay, and token/cost breakdowns via an auto-starting MCP server.
Apache Airflow
Data Engineering
Define, schedule, and monitor complex data workflows as Python code — with a powerful UI, 80+ provider integrations, and battle-tested scalability across thousands of production deployments.
Amplication
Developer Tools · AI Code Assistants · Automation
Create production-ready backend services with your organization's standards baked in — generating NestJS, Prisma, and GraphQL code that you own and control.
