README

Instantly see which Twig template rendered any element on your page.

Twig Grab adds a developer overlay to your Craft CMS site that lets you hover over any element and immediately see which template is responsible for it. Click to copy the full template context to your clipboard — ready to paste into your editor or AI coding assistant.

Think of it as browser DevTools, but for your Twig templates.

Features

Hover to identify — Activate grab mode and hover over any element to see its source template and line number
Click to copy — One click copies the element's HTML and full template chain to your clipboard
Template chain — See the complete ancestry: which template included which block, all the way up to your layout
Works with everything — Static includes, dynamic includes, embeds, and blocks are all supported
Dynamic content aware — Content injected by Alpine.js, Sprig, htmx, or any JavaScript framework is automatically detected
Zero impact on visitors — Annotations are only served to logged-in users. Anonymous visitors always get clean, unmodified HTML
No frontend dependencies — Pure vanilla JavaScript with Shadow DOM isolation. No framework conflicts, no CSS bleed

Installation

Plugin Store

Search for Twig Grab in the Craft Plugin Store and click Install.

Composer

composer require wayborne/twig-grab
php craft plugin/install twig-grab

How It Works

Press G (or click the floating icon) to activate grab mode
Hover over any element — a highlight overlay shows the template name and line number
Click to copy the template context to your clipboard
Press Escape or G again to deactivate

The copied output includes the element's HTML, template type, and the full template chain — giving you (or your AI assistant) everything needed to find and edit the right file.

[include] _components/card.twig:12

<div class="card">...</div>

Template chain:
  in block "content" at _pages/home.twig:45
  in template at _layouts/base.twig:1

Configuration

Optionally customize the shortcut key via config/twig-grab.php:

<?php

return [
    'shortcutKey' => 'g',
];

Requirements

Craft CMS 5.0 or later
PHP 8.2 or later

Roadmap

Drill-down navigation through nested templates
Click-to-lock selection

Inspired By

React Grab by Aiden Bai — the original concept for React. Twig Grab brings the same idea to server-rendered Craft CMS templates.

License

MIT

wayborne / twig-grab

Maintainers

Package info

Statistics

Security