Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nowo-tech/TwigInspectorBundle/llms.txt

Use this file to discover all available pages before exploring further.

This guide walks you from a fresh Symfony project to a working template inspector overlay. You will need a Symfony application with the Web Profiler enabled in the dev environment.
1

Install the bundle

Run this command in your project root:
composer require nowo-tech/twig-inspector-bundle --dev
2

Register the bundle

If Symfony Flex is installed, the bundle is registered automatically. Otherwise, add it manually to config/bundles.php:
<?php
// config/bundles.php

return [
    // ... other bundles ...
    Nowo\TwigInspectorBundle\NowoTwigInspectorBundle::class => ['dev' => true, 'test' => true],
];
3

Add the bundle routes

If Symfony Flex handled the install, routes are already set up. Otherwise, add the following to config/routes.yaml:
# config/routes.yaml
when@dev:
    nowo_twig_inspector:
        resource: '@NowoTwigInspectorBundle/Resources/config/routes.yaml'

when@test:
    nowo_twig_inspector:
        resource: '@NowoTwigInspectorBundle/Resources/config/routes.yaml'
4

Clear the cache

php bin/console cache:clear --env=dev
5

Open your app and find the toolbar icon

Start your development server and open any page in the browser. Look at the Symfony Web Profiler toolbar at the bottom of the page — you will see a </> icon. This is the Twig Inspector entry point.
If the toolbar is not visible, make sure symfony/web-profiler-bundle is installed and that you are running in the dev environment.
6

Enable the inspector

Click the </> icon to open the dropdown. Check the “Enable” checkbox, then reload the page.This sets a browser cookie that tells the bundle to start injecting HTML comments into the rendered output. The page will reload with template boundary markers embedded in the source.
7

Turn on the overlay

After the page reloads, click the </> icon again so it turns green.
  • Green — overlay is active. Hovering shows highlights and popups.
  • Yellow — inspector is enabled (cookie set) but overlay is off.
8

Hover to inspect templates

Move your mouse over any part of the page. Each element will get a blue highlight and a popup showing the Twig template name (and block name) that rendered it.Use the Filter field in the toolbar dropdown to narrow results by template name or path when working with deeply nested layouts.
9

Click to open in your IDE

Click any highlighted element to open the template file directly in your IDE.
This requires the framework.ide option to be set in your Symfony config. See IDE integration for URL handler examples for PhpStorm, VS Code, Cursor, and others.

​
What’s next?

Usage guide

Learn about the full overlay behavior, controller comments, the Web Profiler panel, and filtering templates.

Configuration

Exclude templates or blocks, change the cookie name, adjust the overlay theme, and toggle metrics collection.

IDE integration

Set up click-to-open for PhpStorm, VS Code, Cursor, Sublime Text, and more.

Installation (full)

Detailed installation steps including Flex vs manual setup and the install command.

Build docs developers (and LLMs) love

Get started for freeTalk to us