RouteKeeper Vision -RouteKeeper Visual Debugger / Inspector

Route visualization, simplified for React.

The RouteKeeper Vision is a developer-focused plugin designed to help you understand, inspect, and reason about your React Router configuration using routekeeper.

Installation

npm install routekeeper-vision


yarn add routekeeper-vision


pnpm add routekeeper-vision

Setup

This is used with routekeeper

import { BrowserRouter } from "react-router-dom";

import { RouteKeeper,defineRoutes } from "routekeeper-react";
import { RouteKeeperVision } from "routekeeper-vision";


import Home from "./pages/Home";
import Login from "./pages/Login";
import Dashboard from "./pages/Dashboard";
import NotFound from "./pages/NotFound";
import ShareFile from "./pages/ShareFile"

const userIsLoggedIn = true;
const isLoading = false;

export default function App() {
  const routes = defineRoutes([
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/login",
        element: <Login />,
        type: "public",
      },
      {
        path: "/dashboard",
        element: <Dashboard />,
        type: "private",
      },
      {
        path: "/sharefile",
        element: <ShareFile />,
        type: "neutral",
      },
    ],
  );

  return (
    <BrowserRouter>
      <RouteKeeper
        routes={routes}
        auth={userIsLoggedIn}
        loading={isLoading}
        visualizer={{
          enabled: true,
          render: () => <RouteKeeperVision routes={routes} />,
        }}
      />
    </BrowserRouter>
  );
}

--

Contributing

Found a bug or want to add a feature? Contributions are welcome!

1. 🍴 Fork it
2. 🌟 Star it (pretty please?)
3. 🔧 Fix it
4. 📤 PR it
5. 🎉 Celebrate!

Please ensure your code follows the existing style and includes clear commit messages.

Documentation

Full docs, examples, and advanced usage are available on the documentation site.

License

This project is licensed under the MIT License – see the LICENSE file for details.

Credits

Built by Isaac Anasonye, designed to simplify and standardize routing in React applications.

RouteKeeper – Protecting your routes since 2025!

Made something awesome with RouteKeeper and RoutekeeperVision?

⭐ Star on GitHub | 📢 Share on Twitter | 💬 Join the Discussion | 🔗 Connect on LinkedIn