# Introduction

<div align="center"><img src="https://3251159416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBYkgwpV3BVTXxCFLSbUQ%2Fuploads%2Fgit-blob-c01edd89020a8577ca14421cf569170ca52edba8%2Fruio-banner.png?alt=media" alt="ruio banner"></div>

![codecov](https://codecov.io/gh/gary-rivera/ruio/branch/main/graph/badge.svg) ![npm version](https://img.shields.io/npm/v/ruio) ![downloads](https://img.shields.io/npm/dm/ruio) ![bundle size](https://img.shields.io/bundlephobia/min/ruio) ![license](https://img.shields.io/npm/l/ruio)

#### 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.

[![demo gif](https://github.com/user-attachments/assets/9aad57f6-4df2-49b2-805c-2f9780c924a5)](https://github.com/user-attachments/assets/1b226b6d-6bf1-43ed-b016-d685baa722b6)<br>

* **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:

```bash
# npm
npm install ruio

# yarn
yarn add ruio

# bun
bun add ruio
```

#### Basic Usage

Wrap your application with the `RuioContextProvider`:

```typescript
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**](https://ruio.garyrivera.me/getting-started/installation) - Setup, requirements, and troubleshooting
* [**Usage Guide**](https://ruio.garyrivera.me/getting-started/usage) - Feature walkthrough and workflows
* [**Configuration**](https://ruio.garyrivera.me/reference/configuration) - Element exclusion, environment settings, and planned features
* [**Examples**](https://ruio.garyrivera.me/getting-started/examples) - Working examples and common patterns
* [**API Reference**](https://ruio.garyrivera.me/reference/api) - API documentation for components and hooks
* [**Changelog**](https://ruio.garyrivera.me/development/changelog) - Version history and release notes
* [**Contributions Guide**](https://ruio.garyrivera.me/development/contributing)

### Contributing

Contributions are welcome. See [Contributing Guide](https://ruio.garyrivera.me/development/contributing) for details.

#### License

`ruio` is licensed under the MIT License. See the [LICENSE](https://github.com/gary-rivera/ruio/blob/main/LICENSE/README.md) file for more details.