One is a unified cross-platform React web and React Native framework that lives entirely in a Vite plugin. One v1 is almost here - we’ve just released 1.0.0-rc.1, marking it ready for production use. With over 1,800 commits since the announcement of the alpha about a year ago, we’re incredibly proud of the simple, robust framework it’s become.
One makes building apps for both web and native a delight, bringing simplicity and sanity to what typically is an incredibly messy affair. Where before you’d need two frameworks, two bundlers, and a ton of glue code, with One it’s now as simple as can be - Vite, a single plugin, and some file-system routes.
Get started a simply as:
npx one
Our goal for version one was to reach stability, deploy multiple apps into app stores, greatly reduce the risk of adoption, and to match the best web-only frameworks in features, ease-of-use and performance. We’re cutting the RC today because we feel we’re just about there.
A huge thanks is owed to Pokai Chang, who led the large part of the work of getting One to maturig, including large wins like Metro mode, and a robust web and native integration testing infrastructure.
One makes it possible for the first time to get a 100 on your Lighthouse performance score without trouble, even when sharing UI with native on fully on hydrated pages.
We think One is great even if you are only targeting web, in large part because our we only focus on React, and made the decision early to avoid implementing RSC for the sake of simplicity.
The major features in version 1 are:
- Fully-typed file system routes with autogenerated helpers, groups, nested layouts, and
.platformfile-level forking. - Fully typed links, params, and more.
- Global and per-page render modes with seamless routing between any of them - SSR, SSG, SPA - for flexibility and performance.
- Typed loaders for easy, simple, typed data loading and refetching.
- Lock-in-free: it’s Vite + Hono, builds to a
distfolder, and has multiple output targets. - new Metro-mode: use Metro for native, for maximum compatibility and ease of migration.
- new Middleware for request interception and shared context.
- new Sitemaps with per-route overrides.
- new Deploy to Vercel or Cloudflare workers with a single config option.
- new useLoaderState, setServerData and getServerData for advanced data loading.
- new setResponseHeaders for ISR/caching via CDN cache headers, cookies, and custom response headers.
- new Automatic NativeWind and Reanimated detection and support.
- new Advanced script loading strategies that significantly improve Lighthouse scores.
- new Loader HMR with
watchFilefor instant content updates during development. - new Image data imports with
?imagedatasuffix for automatic dimensions and blur placeholders. - new Dev Tools - SEO preview, route debugging, loader timing, error tracking, and source inspector all in one unified panel (Alt+Space).
- new useBlocker - Block navigation for unsaved forms with customizable confirmation prompts.
- new Protected Routes - Declarative route guarding with automatic redirects for unauthenticated users.
- new Route Validation - Validate route params before navigation with Zod schemas or async functions.
- new CSS Collection Improvements - In dev mode, route modules are pre-warmed to collect CSS upfront, avoiding flash of unstyled content during navigation.
- new Route Masks - Display a different URL in the browser while navigating to complex routes, perfect for modals and side panels.
- new Scroll Position Groups - Preserve scroll position when navigating between child routes in nested layouts.
- new LCP Optimization and CSS inlining
- Inline layout CSS for a great hybrid mix of first-load performance and caching, and optimize LCP for 30+% improved Lighthouse scores.
- new Smart Link Prefetching - Predicts which link you’re moving toward using mouse trajectory, prefetching before you hover.
- new useSearchParams - Standard URLSearchParams API for working with query strings.
- new useMatches, useMatch, usePageMatch - Access all matched routes and their loader data for breadcrumbs, layouts accessing page data, and more.
- new Stack Header Composition API -
Declaratively configure native stack headers with
Stack.Header,Stack.Header.Title,Stack.Header.SearchBar, and more.
For the full changelog, see the release notes.
Get Started
As easy as:
npx one
We have a few starters to choose from. From there, check out the introduction, routing guide, or deployment docs.
What about Rolldown?
We’ve been testing Rolldown in a branch and it’s looking promising. It works mostly on web already and will make our lives easier on native, but we’re waiting for their full-bundle dev mode as it will greatly simplify the transition. We expect web support to land shortly after.
Community
One started as a fork of Expo Router, which itself built on React Navigation. One is built top of our vxrn library. We owe a thanks to the Expo and React Navigation teams.
Get in touch!
- Join our Discord to chat, ask questions, or share what you’re building
- Open an issue if you hit a bug (repros help a lot!)