Twig Inspector Bundle

Debug Twig templates directly in the browser. See which template or block rendered each HTML element, click to open it in your IDE, and use it from the Symfony Web Profiler.

Installation

Install with Composer and register the bundle in your Symfony app in under two minutes.

Quickstart

Enable the inspector and start identifying templates with a visual overlay right away.

Usage Guide

Learn the overlay controls, filter field, keyboard shortcuts, and Web Profiler panel.

Configuration

Customize exclusions, overlay theme, cookie name, keyboard shortcuts, and more.

What is Twig Inspector Bundle?

Twig Inspector Bundle is a Symfony development tool that lets you see — directly in the browser — which Twig template or block rendered any HTML element on the page. Move your mouse over any part of the page to see a blue highlight and a tooltip naming the template. Click to open that file in your IDE.

It integrates with the Symfony Web Profiler toolbar, adding a </> icon that controls the overlay and links to a full panel showing every template, block, and controller used in the request.

Twig Inspector is a development-only tool. Register it only for dev and test environments — never for production.

Key features

Visual overlay

Hover over any element to see a blue highlight and a popup showing which template(s) rendered it. Click to open the file in your IDE.

Click-to-open IDE

Works with PhpStorm, VS Code, Cursor, Sublime Text, and any IDE that supports URL handlers.

Web Profiler panel

Full panel in the Symfony Profiler shows templates, blocks, controllers, render counts, and timing data.

Controller inspection

HTML comments identify the main controller and each fragment controller boundary in the page source.

Zero-config setup

Works out of the box with Symfony Flex. No configuration file required — sensible defaults apply automatically.

Flexible exclusions

Exclude templates or blocks by name, wildcard pattern, regex, or namespace prefix.

Keyboard shortcut

Toggle the inspector with Ctrl+Shift+T (configurable). Rescan the DOM after AJAX updates with Ctrl+Shift+R.

Performance optimized

Skips all processing when the inspector is disabled — zero overhead in normal development sessions.

Requirements

Requirement	Version
PHP	>= 8.1, < 8.6
Symfony	>= 6.0 || >= 7.0 || >= 8.0
Twig	>= 3.8 || >= 4.0
Symfony Web Profiler Bundle	any compatible version

Quick install

composer require nowo-tech/twig-inspector-bundle --dev

With Symfony Flex, the recipe registers the bundle and creates config and routes automatically. See the Installation guide for manual setup steps.