Overview

A developer tool to visualize and debug React component hierarchy. Helps to troubleshoot complex layout issues, understand nested structures, and refine your UI by applying dynamic styling to highlight component archtitecture.

• Dynamic Border Styling - Visualize borders on any element within your React app.
• Element Selection Mode Mimics the hover effect of Chrome DevTools to highlight elements on the page.
• Click-to-Select Make any element the new root with a click.
• Toggle Logic Enable and disable border styling on the fly as well as memory of selected root element.
• Reset Functionality Automatically clear all applied border styles.
• Highly Configurable Works with different project structures and exists on top of any existing architectures.

Quick Start

Installation

You can install using your preferred package manager:

# npm
npm install ruio

# yarn
yarn add ruio

# bun
bun add ruio

Basic Usage

Wrap your application with the RuioContextProvider:

import RuioContextProvider from 'ruio'

function App() {
  return (
    <RuioContextProvider>
      {/* Your App Components Here */}
    </RuioContextProvider>
  )
}

Note: ruio automatically detects your app root (#root, #app, etc.). For custom setups, pass a defaultRootSelector prop.

Documentation

• Installation Guide - Setup, requirements, and troubleshooting
• Usage Guide - Feature walkthrough and workflows
• Configuration - Element exclusion, environment settings, and planned features
• Examples - Working examples and common patterns
• API Reference - API documentation for components and hooks
• Changelog - Version history and release notes
• Contributions Guide

Contributing

Contributions are welcome. See Contributing Guide for details.

License

ruio is licensed under the MIT License. See the LICENSE file for more details.