react-router-devtools is an open-source TypeScript package that adds an in-app developer panel to React Router v7+ applications, giving developers working in that full-stack framework a single interface for inspecting pages, routes, loader data, server responses, network activity and hydration errors while they build.

What it is

react-router-devtools is an npm package, released under the MIT License and written in TypeScript, that enhances the development workflow for React Router v7+, a full-stack JavaScript framework for building web applications. It renders a user-friendly interface built from tabs — Active Page, Terminal, Settings, Errors, Network and Routes — along with a side tab called Timeline. The project lives in the React Router ecosystem and carries a Remix lineage: the repository was previously called remix-development-tools and was renamed to reflect that it targets React Router v7+ rather than Remix alone.

The concrete problem it solves is inspection. In a full-stack React Router project, the information a developer needs while debugging is scattered across page state, URL parameters, server responses, loader data and the route tree, and the request layer is largely opaque. The Network tab traces all network requests in real time and shows whether each one was aborted, cached, successful or unsuccessful, while the Routes tab presents the routing structure as a tree or list and the Errors tab exists specifically to track down hydration issues. Rather than assembling that picture from separate console output and browser tabs, a developer reads it from one panel mounted in the application itself.

Key capabilities

• An Active Page tab that surfaces page information, URL parameters, server responses and loader data for the current route.
• An Errors tab dedicated to tracking down hydration issues in the application.
• A Routes tab that renders the project's routes in either a tree view or a list view.
• A Network tab that traces all network requests in real time and flags whether each request is aborted, cached, successful or unsuccessful.
• A Timeline side tab alongside the main tab set.
• Terminal and Settings tabs within the same panel.
• Integration as a Vite plugin through the exported reactRouterDevTools() function.

Who uses it and how

• Developers building on React Router v7+ who want runtime visibility into loaders, routes and server responses without leaving the app.
• Teams debugging hydration mismatches in full-stack React Router applications, using the Errors tab as the entry point.
• Projects with a Remix heritage, since the package descends from remix-development-tools and the repository still maintains that earlier version on a dedicated branch.
• Teams deploying to CloudFlare, for which the README documents adding entries to optimizeDeps in vite.config.js.
• Developers evaluating the tool before installing it, via the hosted demo and documentation at react-router-devtools.fly.dev.

Getting started

Install the package as a development dependency with npm install react-router-devtools -D, then import reactRouterDevTools and add it to the plugins array in vite.config.js alongside reactRouter() and tsconfigPaths().

How it compares

No comparable or competing products are named in the facts for this entry, so react-router-devtools stands alone in this registry. It is best understood on its own terms: an MIT-licensed, self-installed development package scoped specifically to React Router v7+.

When to use it — and when not to

This is a development-time tool, installed with -D and mounted through the Vite config, so it is not intended as a production monitoring or observability layer. A self-hoster operates nothing extra — no database, storage or SMTP service is involved — but should be aware that the README is brief and defers detailed configuration to an external documentation site that still carries the older remix-development-tools name, and that the repository carries 23 open issues. Teams needing production error tracking, or those not on React Router v7+, should look elsewhere.

npm install react-router-devtools -D

import { reactRouterDevTools } from "react-router-devtools";

// Add it to your plugins array in vite.config.js
export default defineConfig({
  plugins: [reactRouterDevTools(), reactRouter(), tsconfigPaths()],
});

optimizeDeps: {
  include: [
    // other optimized deps
  ],
},