A dev toolbar integration for Astro that shows a live, clickable route map of your entire project — grouped by type, searchable, and active only in development.

Route Map (6 routes)      🟢 3 static   🔴 2 SSR   🔵 1 endpoint
───────────────────────────────────────────────────────────────

📄 Pages
  🟢  /                                                       →
  🟢  /about                                                  →
  🟢  /blog                                                   →
  🔴  /blog/[slug]                              (SSR) (dynamic)
  🔴  /404                                                (SSR)

⚡ Endpoints
  🔵  /api/contact                                   (endpoint)

• 🗺 Live route map — every route in your project visible at a glance
• 🔵 Highlight active route — current page is highlighted in the panel
• 🖱 Click to navigate — click any static route to jump to it instantly
• 🏷 Tags — dynamic, SSR, endpoint, and redirect routes clearly labelled
• 🔍 Searchable — filter by URL pattern or file path in real time
• 🔒 Dev-only — completely stripped in astro build, zero production footprint
• 🔄 Live updates — reflects new pages added while dev server is running
• 🚫 Zero dependencies — no external packages

npm install -D @shiftescape/astro-toolbar-routes
# or
pnpm add -D @shiftescape/astro-toolbar-routes

// astro.config.mjs
import { defineConfig } from "astro/config";
import toolbarRoutes from "@shiftescape/astro-toolbar-routes";

export default defineConfig({
  integrations: [toolbarRoutes()],
});

Open your site in astro dev and click the map icon (🗺) in the bottom toolbar.

toolbarRoutes({
  // Exclude specific routes or glob prefixes
  exclude: ["/admin", "/api/*"],

  // Show Astro internal routes (_astro/*, _server_islands/*, etc.)
  showInternalRoutes: false,
});

MIT © Alvin James Bellero