A development tool that reveals the Rails views, partials, and templates behind your UI with an overlay.
Xray-rails is a Ruby gem that provides a visual development tool for Rails applications. It overlays your UI with information about which Rails views, partials, and JavaScript templates rendered each component, allowing developers to quickly understand the structure of their UI and navigate to source files.
Rails developers working on applications with complex view hierarchies who need to quickly understand which templates and partials are rendering specific UI elements during development.
Developers choose Xray-rails because it provides immediate visual feedback about UI composition directly in the browser, eliminating the need to trace through controller actions and view files manually to understand what's rendering each part of the interface.
☠️ A development tool that reveals your UI's bones
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Overlays browser UI with source file information for Rails views, partials, and .jst templates, making it easy to trace which components render each element directly from the browser.
Click any overlay element to open the corresponding file in editors like Sublime Text or Vim, configurable via environment variables or a YAML config file for seamless integration.
Toggle the overlay with a simple keyboard shortcut (command+shift+x on Mac, ctrl+shift+x on Windows/Linux), requiring no complex setup for daily development use.
Designed exclusively for development environments with easy setup via the Rails asset pipeline, by adding to the Gemfile's development group and leveraging middleware.
Injects HTML comments that can interfere with client-side frameworks like Angular.js, breaking templates and requiring manual disabling per partial with no global option.
Only reveals Rails views, partials, and .jst files, lacking support for modern JavaScript frameworks or other templating systems, as admitted in the README's laundry list.
Overlapping boxes in the overlay can obscure parent views in complex hierarchies, reducing clarity, and the association with JS constructors is messy, affecting stack traces.