PHPackages                             wayborne/twig-grab - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. wayborne/twig-grab

ActiveCraft-plugin[Templating & Views](/categories/templating)

wayborne/twig-grab
==================

Hover over any element to see which Twig template rendered it

1.0.0(1mo ago)10[1 issues](https://github.com/wayborne/craft-twig-grab/issues)MITPHPPHP >=8.2CI passing

Since Apr 7Pushed 1mo agoCompare

[ Source](https://github.com/wayborne/craft-twig-grab)[ Packagist](https://packagist.org/packages/wayborne/twig-grab)[ RSS](/packages/wayborne-twig-grab/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (2)Versions (2)Used By (0)

Twig Grab for Craft CMS
=======================

[](#twig-grab-for-craft-cms)

**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
--------

[](#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
------------

[](#installation)

### Plugin Store

[](#plugin-store)

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

### Composer

[](#composer)

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

How It Works
------------

[](#how-it-works)

1. Press **G** (or click the floating icon) to activate grab mode
2. Hover over any element — a highlight overlay shows the template name and line number
3. Click to copy the template context to your clipboard
4. 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

...

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

```

Configuration
-------------

[](#configuration)

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

```