{"repo":"ultroned/xray-react","free":true,"listed":false,"github":"https://github.com/ultroned/xray-react","clone":"git clone https://github.com/ultroned/xray-react.git","description":"🩻 React layout debugging tool that lets you open source code in your local IDE by clicking UI elements.","language":"JavaScript","stars":189,"topics":["react","react-component","ui","x-ray","inspector","development","css","layout","debug","component-inspector"],"license":"MIT","category":"ui-components","readme_excerpt":"X-Ray React ========== React UI layout debugging tool inspired by Xray-rails Overview Xray-react is a development tool that reveals your React UI's component structure. Press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) to reveal an overlay of the React components that rendered your UI, and click any component to open its source file in your editor. Full Mode (default) Simple Mode Features - React 18+ Support - Works with React 18+ using React DevTools protocol, with fallback support for React Layout - Component ) - Modern UI - Clean overlay interface with component search and scrollable component paths - Editor Integration - Automatic detection for VSCode, WebStorm, Cursor, Sublime, and more - Fast & Lightweight - Minimal performance impact Requirements - Node.js : = 22.0.0 - React : = 16.0.0 (React 18+ recommended for best experience) Installation Usage Webpack Legacy export (backward compatibility): Vite Next.js For Next.js applications, you can use either the webpack plugin or manual imports. Using Webpack Plugin The webpack plugin automatically detects Next.js client builds and injects scripts into the appropriate chunks. Configure xray-react in next.config.js : Manual Import (Without Plugin) If you're not using a bundler plugin, you can manually import the UI: Note: When using manual import, the Socket.IO server won't be started automatically. You'll need to run the standalone server separately (see Standalone Server below). Standalone Server For manual imports or ","default_branch":null,"files":null,"tree":[],"storefront":"/r/ultroned","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/ultroned/xray-react/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}