Astro Show Route, Template & Components
A dev-only Astro integration, published on npm, that injects HTML comments showing which route and template own each page and which .astro component produced each DOM node — an homage to Drupal's Twig debug output.
- Astro integration
- Node
- npm
- GitHub Actions
Visit siteSource on GitHubStarted June 2026MIT
I come from a Drupal background, and one of the things I missed most when I moved to Astro was Twig’s template debug output — those HTML comments that tell you exactly which template file rendered the markup you’re looking at. This integration brings that idea to Astro. Install it, add one line to astro.config.mjs, and every page in dev mode annotates itself.
Two layers of comments
Route and template. One comment per page, right after <html>, visible in View Source:
<!-- ASTRO | Route: /blog/foo | Template: src/pages/blog/[slug].astro -->Components. A comment above each rendered node, visible in the Elements panel:
<!-- astro-source: src/components/Footer.astro 12:4 --><footer>...</footer>The component layer piggybacks on the source attributes Astro’s dev toolbar already emits, but as comments they survive the Audit tool stripping data-astro-source-* attributes, and the DOM nodes themselves stay uncluttered.
Configurable, and dev-only
Every piece is optional. You can turn off either layer independently, change the comment prefixes, adjust how file paths are shortened, and drop the line:col suffix. Nothing it does reaches a production build. It supports Astro 4 and up, ships as a plain ES module with no dependencies, and is tested with Node’s built-in test runner in CI.
npm install -D astro-show-route-template-components
