aidenybai/react-grab
React Grab
React Grab is a browser-based code navigator and component inspector that links rendered user interface elements to the specific files and lines of source code where they are defined. It serves as a bridge between the browser interface and a local codebase to facilitate element identification and analysis.
The tool functions as a developer extension for React applications, mapping visual components to their originating source code. This capability provides specific code context to support manual review and AI-assisted development.
The project includes a framework for extending the browser interface through custom menu actions, toolbar items, and lifecycle hooks. It further supports frontend developer tooling via UI element source capture and component debugging.
Features
- Visual-to-Code Navigators - Links visual interface elements in the browser to the specific file and line of code where they are defined.
- React Component Debuggers - Identifies which source files control specific parts of a React application by selecting elements directly in the browser.
- React Component Inspectors - Maps user interface elements to their corresponding source code files within a React application.
- DOM-to-Source Mappings - Links runtime user interface elements to their originating source code files using build-time metadata.
- UI-to-Code Mappers - Links natural language descriptions or visual elements of the user interface to specific source files within the codebase.
- UI-to-Code Mapping Tools - Bridges the gap between the rendered browser interface and the local codebase for faster element location and analysis.
- UI Element Source Captures - Captures a selected user interface element and its corresponding source code location to provide context for analysis.
- Frontend Development Tools - Adds custom menu actions and lifecycle hooks to the browser interface to streamline the web development workflow.
- AI Development Assistants - Provides specific source code context for AI tools to help automate the analysis and modification of UI components.
- Event Capture - Intercepts user click and hover events to extract the specific DOM node and its associated metadata.
- Browser Extension Developer Tools - Acts as a browser extension for identifying and capturing component source code for AI or manual review.
- Browser Interface Extensions - Provides a system for adding custom menu actions, toolbar items, and lifecycle hooks to customize the user experience.
- UI Element Injection - Renders custom interface menus and toolbars by injecting a root element into the host application's document.
