React Router Devtools General Configuration

General Configuration options for the React Router Devtools

This covers the general configuration options for the React Router Devtools.

General Config Type

type ReactRouterViteConfig = {
  client?: Partial<RdtClientConfig>
  server?: DevToolsServerConfig
  pluginDir?: string
  includeInProd?: {
    client?: boolean
    server?: boolean
    devTools?: boolean
  }
  tanstackConfig?: Omit<Partial<TanStackDevtoolsConfig>, "customTrigger">
  tanstackClientBusConfig?: Partial<ClientEventBusConfig>
  tanstackViteConfig?: TanStackDevtoolsViteConfig
  experimental_codegen?: {
    enabled: boolean
  }
}

Good to know

You can find more info on TanStack specific configuration options here: https://tanstack.com/devtools/latest/docs/overview

`pluginDir`

The relative path to your plugin directory. If you have a directory for react-router-devtools plugins you can point to it and they will be automatically imported and added to the dev tools.

Example:

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

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      pluginDir: "./plugins"
    }),
    reactRouter(),
  ],
});

`includeInProd`

This option is used to set whether parts of the plugin should be included in production builds or not.

By default, all parts are excluded from production builds. You can selectively include different parts:

client: Include the devtools UI in production
server: Include server-side logging and utilities in production
devTools: Include TanStack DevTools integration in production

includeInProd?: {
  client?: boolean    // Default: false
  server?: boolean    // Default: false
  devTools?: boolean  // Default: false
}

Example:

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

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      includeInProd: {
        client: false,
        server: true,  // Include server logs in production
        devTools: false
      },
    }),
    reactRouter(),
  ],
});

Be careful!

If you decide to deploy parts to production you should be very careful that you don't expose the dev tools to your clients or anybody who is not supposed to see them.

Important notes:

The server part uses chalk which might not work in non-node environments
If you wish to edit the plugin server config in production, you can set process.rdt_config to an object with the same shape as the config object and it will be used instead of the default production config ({ silent: true })
Consider adding authentication/authorization checks before exposing devtools in production

TanStack DevTools Integration

React Router Devtools v6+ integrates with TanStack DevTools, providing enhanced debugging capabilities. You can configure TanStack-specific behavior through these options:

`tanstackConfig`

Configure the TanStack DevTools behavior and appearance.

tanstackConfig?: Omit<Partial<TanStackDevtoolsConfig>, "customTrigger">

Good to know

The customTrigger option is automatically managed by React Router Devtools and cannot be configured manually.

All the options are available here: https://tanstack.com/devtools/latest/docs/configuration

Common options:

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

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      tanstackConfig: {
        position: "bottom-right",        // Position of the devtools trigger
        // Add other TanStack config options as needed
      }
    }),
    reactRouter(),
  ],
});

`tanstackClientBusConfig`

Configure the TanStack client event bus for advanced use cases.

tanstackClientBusConfig?: Partial<ClientEventBusConfig>

This is an advanced option for customizing how TanStack DevTools communicates between client and server. Most users won't need to configure this.

Example:

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

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      tanstackClientBusConfig: {
        // Advanced event bus configuration
      }
    }),
    reactRouter(),
  ],
});

`tanstackViteConfig`

Configure the TanStack Vite plugin directly for advanced scenarios.

tanstackViteConfig?: TanStackDevtoolsViteConfig

This allows you to pass configuration directly to the underlying TanStack DevTools Vite plugin.

Example:

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

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      tanstackViteConfig: {
        // TanStack Vite plugin configuration
      }
    }),
    reactRouter(),
  ],
});

Good to know

You can find more info on TanStack specific configuration options here: https://tanstack.com/devtools/latest/docs/plugin-configuration

Experimental Codegen

The experimental_codegen option enables automatic type annotation generation for your React Router route exports. When enabled, the plugin will automatically add type annotations to your route exports (loader, action, default component, etc.) when files are created or modified.

experimental_codegen?: {
  enabled: boolean  // Default: false
}

What it does

When you create or edit a route file, the plugin will automatically:

Add the Route type import from ./+types/{filename}
Add type annotations to exported functions like loader, action, clientLoader, clientAction, meta, links, headers, ErrorBoundary, and HydrateFallback
Add type annotations to the default exported component
Add type annotations to middleware and clientMiddleware array exports

Example

Before (what you write):

export const loader = ({ request }) => {
  return { data: "hello" }
}

export const middleware = []

export default function MyRoute({ loaderData }) {
  return <div>{loaderData.data}</div>
}

After (automatically transformed):

import type { Route } from "./+types/my-route";

export const loader = ({ request }: Route.LoaderArgs) => {
  return { data: "hello" }
}

export const middleware: Route.MiddlewareFunction[] = []

export default function MyRoute({ loaderData }: Route.ComponentProps) {
  return <div>{loaderData.data}</div>
}

Configuration

To enable this feature, add the experimental_codegen option to your config:

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

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      experimental_codegen: {
        enabled: true
      }
    }),
    reactRouter(),
  ],
});

Experimental Feature

This feature is experimental and may change in future versions. It modifies your source files directly, so make sure you have version control in place before enabling it.

Notes:

Only functions with parameters will have types added (functions with no parameters are skipped)
Exports that already have type annotations are skipped
The type import path follows React Router v7 conventions: ./+types/{filename}

Complete Configuration Example

Here's a complete example showing all general configuration options:

import { defineConfig } from 'vite'
import { reactRouter } from '@react-router/dev/vite'
import { reactRouterDevTools, defineRdtConfig } from "react-router-devtools"

const rdtConfig = defineRdtConfig({
  // Client configuration
  client: {
    expansionLevel: 2,
    routeBoundaryGradient: "gotham",
  },

  // Server configuration
  server: {
    silent: false,
    logs: {
      loaders: true,
      actions: true,
    }
  },

  // Plugin directory
  pluginDir: "./plugins",

  // Production inclusion
  includeInProd: {
    client: false,
    server: true,
    devTools: false,
  },

  // TanStack DevTools configuration
  tanstackConfig: {
    position: "bottom-right",
    buttonPosition: "bottom-right",
  },

  // TanStack client bus configuration (advanced)
  tanstackClientBusConfig: {
    // Custom event bus config if needed
  },

  // TanStack Vite plugin configuration (advanced)
  tanstackViteConfig: {
    // Custom Vite plugin config if needed
  },

  // Experimental codegen for automatic type annotations
  experimental_codegen: {
    enabled: true
  }
})

export default defineConfig({
  plugins: [
    reactRouterDevTools(rdtConfig),
    reactRouter(),
  ],
})

Using `defineRdtConfig`

The defineRdtConfig helper provides type safety for your configuration:

import { defineRdtConfig } from "react-router-devtools"

const config = defineRdtConfig({
  // Your configuration with full TypeScript support
  client: {
    expansionLevel: 2,
  },
  tanstackConfig: {
    position: "bottom-right",
  }
})

export default config

You can then import and use this configuration in your vite.config.ts:

import { reactRouterDevTools } from "react-router-devtools"
import rdtConfig from "./rdt.config"

export default defineConfig({
  plugins: [
    reactRouterDevTools(rdtConfig),
    reactRouter(),
  ],
})

General Config Type

pluginDir

includeInProd

TanStack DevTools Integration

tanstackConfig

tanstackClientBusConfig

tanstackViteConfig

Experimental Codegen

What it does

Example

Configuration

Complete Configuration Example

Using defineRdtConfig

`pluginDir`

`includeInProd`

`tanstackConfig`

`tanstackClientBusConfig`

`tanstackViteConfig`

Using `defineRdtConfig`