Item logo image for groove

groove

Item media 4 (screenshot) for groove
Item media 1 (screenshot) for groove
Item media 2 (screenshot) for groove
Item media 3 (screenshot) for groove
Item media 4 (screenshot) for groove
Item media 1 (screenshot) for groove
Item media 1 (screenshot) for groove
Item media 2 (screenshot) for groove
Item media 3 (screenshot) for groove
Item media 4 (screenshot) for groove

Overview

Click any element to copy its component ancestor path (React, Vue, Angular, Svelte)

Groove is a developer tool that lets you instantly copy the component tree path of any element on a web page. Stop digging through React DevTools or Vue Inspector to find where a component lives — just click it. How it works: Click "Pick Element" in the popup, hover over any element to preview its component tree, then click to copy the full path to your clipboard. Paths like "App > Dashboard > StatsGrid > MetricCard" are ready to paste into your code, PRs, or bug reports. Works with React, Vue, Angular, and Svelte. Supports dev builds where framework debug metadata is available. Features: - One-click element picker with live component tree preview on hover - Adjustable depth control to shorten long paths - Copy history with framework badges so you can re-copy previous paths - Framework auto-detection with color-coded badges - Dark theme that matches your dev tools All data stays on your device. No analytics, no network requests, no account required.

Details

  • Version
    1.0.10
  • Updated
    February 25, 2026
  • Offered by
    PureCode
  • Size
    81.33KiB
  • Languages
    English
  • Developer
    Email
    michal.hachula@purecode.sh
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

Recoilize

3.7

A Chrome extension that helps debug Recoil applications by memorizing the state of components with every render.

React-DomPicker

5.0

Click any UI element to instantly jump to its React source code in VS Code. Perfect for React + Tailwind + ShadCN projects.

React Context DevTool

4.2

Devtool for React Context and useReducer

React Click To Component

3.7

React Click To Component, a Chrome extension to open a React component in the editor by clicking on it.

Angulariad — Angular DevTools Inspector

5.0

Inspect Angular component hierarchy, view data flow and prop diffs.

DivMagic - Copy Style from any website

3.3

Copy elements from any webpage as reusable web components. Get HTML, CSS, React, JSX or Tailwind CSS code.

CopyUI - HTML, CSS & Tailwind Inspector

5.0

Stop coding from scratch. Copy any element of any website and export it to Tailwind CSS, JSX or clean CSS in one click.

React Inspector

3.5

The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.

InstaVue - debug VueJS app in an instant

5.0

InstaVue just like a x-ray for VueJS application, allows you to see components and its data in just one click. Even in production.

RSC Devtools

4.9

React Server Components network visualizer

click-to-react-component

3.4

Option+Click React components in your browser to instantly open the source in VS Code

Claude Bridge

5.0

Inspect React elements and send component context to Claude Code via MCP

Recoilize

3.7

A Chrome extension that helps debug Recoil applications by memorizing the state of components with every render.

React-DomPicker

5.0

Click any UI element to instantly jump to its React source code in VS Code. Perfect for React + Tailwind + ShadCN projects.

React Context DevTool

4.2

Devtool for React Context and useReducer

React Click To Component

3.7

React Click To Component, a Chrome extension to open a React component in the editor by clicking on it.

Angulariad — Angular DevTools Inspector

5.0

Inspect Angular component hierarchy, view data flow and prop diffs.

DivMagic - Copy Style from any website

3.3

Copy elements from any webpage as reusable web components. Get HTML, CSS, React, JSX or Tailwind CSS code.

CopyUI - HTML, CSS & Tailwind Inspector

5.0

Stop coding from scratch. Copy any element of any website and export it to Tailwind CSS, JSX or clean CSS in one click.

React Inspector

3.5

The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.

Google apps