Generouted

Generouted is a Vite plugin and library that generates file-based routes from a src/pages directory, converting folder structure into typed, client-side routing for React and Solid apps.

What is Generouted?

Generouted is an open-source routing generator for Vite that turns a src/pages folder into a typed routes tree. It takes files named with conventions like index.tsx, [slug].tsx, and _layout.tsx and produces route definitions, navigation helpers, and modal utilities. The project is maintained by oedotme and released under the MIT license through npm packages such as @generouted/react-router and @generouted/solid-router.

Key Features

Generouted bundles the essential routing primitives into a single Vite plugin, so teams get type safety and code generation without a custom build setup.

• Client-side file-based routing — Maps files in src/pages to URLs using Vite's glob import API, with support for .tsx, .jsx, and .mdx files.
• Type-safe navigation and modals — The Vite plugin generates src/router.ts, exporting typed Link, Navigate, useNavigate, useParams, and useModals helpers so route paths and params are compile-time checked.
• Route-based code-splitting and lazy-loading — Import from @generouted/react-router/lazy or @generouted/solid-router/lazy to enable per-route lazy loading.
• Data loaders and actions — Pages can export optional Loader, Action, Pending, and Catch functions for pre-loading data, mutations, suspense fallbacks, and error boundaries.
• Nested and pathless layouts — Define _layout.tsx files in any directory to wrap child routes, and wrap a directory in parentheses to create a layout group that doesn't add to the URL path.
• Optional and dynamic route segments — Prefix a segment with - for optional static or dynamic routes, use [slug] for params, and [...all] for catch-all routes.
• Ignored routes and custom 404 — Files or directories starting with _ are ignored, and a 404.tsx becomes the not-found page.
• MDX route support — With @mdx-js/rollup installed, .mdx files in src/pages become routes in both React and Solid projects.

Who is it for?

Generouted is aimed at developers and teams building Vite-based React or Solid applications who want to avoid hand-writing router configurations.

• Frontend developers building Vite + React or Vite + Solid apps who want file-based routing conventions similar to Next.js or Remix without switching frameworks.
• Teams starting new Vite projects that want type-safe routes, nested layouts, and lazy-loading with minimal boilerplate.
• Library and template authors who want to generate a src/router.ts with typed navigation utilities for their own Vite-based tools.

What can you do with Generouted?

• React developers: Convert a folder of .tsx files into a React Router app by adding the @generouted/react-router plugin and rendering <Routes />; add a _app.tsx for an app-level layout and a 404.tsx for a custom not-found page.
• Solid developers: Build a file-based Solid Router app with @generouted/solid-router, including nested layouts, optional segments, and global modals.
• Content sites and documenters: Use MDX routes to turn markdown files into blog posts or docs pages under src/pages with data loaders for static content.
• Prototypers: Use the StackBlitz explorer to test route patterns and file conventions before wiring them into a full project.

How does Generouted work?

Generouted uses Vite's glob import API to list all route files in the src/pages directory, then generates a routes tree and modal record based on naming conventions. The Vite plugins for each integration perform code generation, producing a src/router.ts file with typed components, hooks, and utilities so routes are type-safe in the editor. The generated Routes component reads that tree and renders the appropriate page component with React Router or Solid Router.

FAQ

Does Generouted require Next.js?

No. Generouted is for Vite client-side apps; file-based routing is inspired by Next.js but runs entirely inside a Vite project.

Is Generouted free to use?

Yes. It is released under the MIT license and published on npm as packages like @generouted/react-router and @generouted/solid-router.

What file extensions are supported?

The src/pages directory supports .tsx, .jsx, and .mdx files. MDX support requires installing and setting up @mdx-js/rollup.

Is TanStack React Location still supported?

It is deprecated. The docs recommend React Router or the in-progress TanStack React Router support. The deprecated @tanstack/react-location remains available in older examples.

How can I create a protected route?

The README shows a pattern where you define a Redirects component using Navigate, useLocation, and useAuth, then wrap the Outlet component in the root-level src/pages/_app.tsx layout.