@shiftescape/astro-toolbar-routes

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)

Features

• 🗺 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

Install

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

Usage

// 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.

With options

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

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

Options

| Option | Type | Default | Description | | -------------------- | ---------- | ------- | ----------------------------------------------------------------------- | | exclude | string[] | [] | Route patterns to hide. Supports exact match and * suffix wildcard. | | showInternalRoutes | boolean | false | Show Astro's internal routes like /_astro/* and /_server_islands/*. |

Route types

| Tag | Meaning | | ---------- | ---------------------------------------------------------------------------------------- | | (no tag) | Static page — click to navigate | | dynamic | Route has [param] or [...slug] segments — cannot navigate without a real param value | | SSR | Rendered on-demand (prerender: false) | | endpoint | API route (.ts / .js file in src/pages/) | | redirect | Configured redirect rule |

License

MIT © Alvin James Bellero