HTML Tree Generator — DOM Tree Viewer

🌳 See any page's HTML as an interactive DOM tree in a side panel. Search it, highlight elements, copy CSS selectors.

🌳 HTML Tree Generator draws the page you are looking at as an interactive DOM tree — the element hierarchy, laid out so you can read it. Click the toolbar icon and the tree opens in Chrome's side panel, beside the page rather than on top of it. It is a Manifest V3 rebuild of the much-loved HTML Tree Generator that Chrome switched off, with the three complaints its reviews kept repeating finally fixed. 🌳 WHAT YOU SEE 🧩 The whole element hierarchy, tag by tag, with ids, classes and attributes in colour. Collapse the parts you do not care about; expand the parts you do. 🔍 Search the entire document by tag name, #an-id or .a-class, and jump between matches. The tree opens itself to reveal each hit. 🎯 Click any node and the matching element is outlined on the page and scrolled into view. A DOM inspector for reading structure, without opening DevTools. 📋 Copy a unique CSS selector for any node with one click — an id when there is one, otherwise a precise nth-of-type path. The selector is checked against the live page before it is handed to you, so it really does match that one element. 📄 Copy an element's outer HTML, toggle attributes and text nodes, choose how deep the first read goes, and switch between a light and a dark theme. 🪟 IT STAYS OPEN The original lived in a popup, which Chrome closes the instant you click the page — the single most common complaint about it. This one lives in the side panel: it stays open while you scroll, click and type, and you can drag it as wide as you like. That is two long-standing requests answered by where it lives. ⚡ BIG PAGES STAY FAST The old version stalled on large documents. This one reads the tree in slices and renders only the rows on screen, so a page with tens of thousands of elements opens without a freeze and scrolls smoothly. Deeper branches load as you expand them. 📁 LOCAL FILES, EXPLAINED Point it at a file:// page and, if Chrome has not been told to allow that, you get the two-step instruction rather than a spinner that never stops — the third complaint, gone. 🔒 PERMISSIONS AND PRIVACY It reads a page only when you click the icon, and only that tab. There are no host permissions, so it holds no standing access to anything you browse. No network requests of any kind: the fonts ship with it and nothing is sent anywhere. No account, no signup, no analytics, no telemetry. The tree is read on demand and never stored — only your view options are saved. 📦 MV3 NATIVE Written for Manifest V3, so it will not be switched off the way its predecessor was. Runs in Chrome, Edge, Brave, Opera and any Chromium browser with the side panel. 🚀 GET STARTED Install it, open any page, click the icon. Made for front-end developers, QA engineers, students learning HTML, and anyone who wants to see a page's structure without reading its source.