> For the complete documentation index, see [llms.txt](https://ruio.garyrivera.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ruio.garyrivera.me/overview/...md).

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

### Contributing

Contributions are welcome. See [Contributing Guide](/development/contributing.md) 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.