Introduction

ruio banner

codecov

npm version

downloads

bundle size

license

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.