# @hookform/devtools

> React Hook Form dev tool to help debugging forms

Latest version **4.4.0** (published 2025-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hookform/devtools
pnpm add @hookform/devtools
yarn add @hookform/devtools
bun add @hookform/devtools
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 4.4.0 |
| Published | 2025-04-06 |
| First published | 2020-05-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 670 |
| Author | bluebill1049 |
| Maintainers | bluebill1049, kotarella1110, jorisre |
| Keywords | react, react-component, devtool, devtools, form, forms, form-validation, validation, hookform, react-hook-form, typescript |

## Links

- npm: https://www.npmjs.com/package/@hookform/devtools
- Repository: https://github.com/react-hook-form/devtools
- Homepage: https://react-hook-form.com
- Issues: https://github.com/react-hook-form/devtools/issues
- npm.io page: https://npm.io/package/@hookform/devtools

## Dependencies (8)

- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.14.168
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.1.5
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.3.0
- [little-state-machine](https://npm.io/package/little-state-machine.md) ^4.1.0
- [react-simple-animate](https://npm.io/package/react-simple-animate.md) ^3.3.12
- [use-deep-compare-effect](https://npm.io/package/use-deep-compare-effect.md) ^1.8.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.4.0 (latest) — 2025-04-06
- 4.2.2-beta.0 (beta) — 2022-07-13
- 4.0.0-0 (next) — 2021-08-23
- 4.3.3 — 2024-12-16
- 4.3.2 — 2024-12-13
- 4.3.1 — 2023-03-06
- 4.3.0 — 2022-12-08
- 4.2.3 — 2022-10-28
- 4.2.2 — 2022-07-14
- 4.2.1 — 2022-07-13
- 4.2.0 — 2022-07-11
- 4.1.2-beta.0 — 2022-07-11
- 4.1.1 — 2022-07-04
- 4.1.1-beta.2 — 2022-07-03
- 4.1.1-beta.1 — 2022-07-03
- … 41 more at https://npm.io/package/@hookform/devtools/versions

## README

<div align="center">
    <p align="center">
        <a href="https://react-hook-form.com" title="React Hook Form - Simple React forms validation">
            <img src="https://raw.githubusercontent.com/bluebill1049/react-hook-form/master/docs/logo.png" alt="React Hook Form Logo - React hook custom hook for form validation" />
        </a>
    </p>
</div>

<p align="center">Performant, flexible and extensible forms with easy to use validation.</p>

<div align="center">

[![npm downloads](https://img.shields.io/npm/dm/@hookform/devtools.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/devtools)
[![npm](https://img.shields.io/npm/dt/@hookform/devtools.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/devtools)
[![npm](https://img.shields.io/bundlephobia/minzip/@hookform/devtools?style=for-the-badge)](https://bundlephobia.com/result?p=@hookform/devtools)

</div>

<img src="https://react-hook-form.com/static/dev-tool-5b2a4d10769a292c6f1ca78a6170e4db.png" />

## Goal

This React Component will help you to debug forms when working React Hook Form, and give you more insight about your form's detail.

## Install

    $ npm install @hookform/devtools -D

## Quickstart

```typescript jsx
import React from 'react';
import { useForm } from 'react-hook-form';
import { DevTool } from '@hookform/devtools';
import './App.css';

const App = () => {
  const { register, control, handleSubmit } = useForm({
    mode: 'onChange',
  });

  return (
    <>
      <DevTool control={control} placement="top-left" />

      <form onSubmit={handleSubmit((d) => console.log(d))}>
        <h1>React Hook Form DevTools</h1>

        <label>Test</label>
        <input name="test" ref={register} />

        <input type="submit" />
      </form>
    </>
  );
};

export default App;
```

## Backers

Thanks goes to all our backers! [[Become a backer](https://opencollective.com/react-hook-form#backer)].

<a href="https://opencollective.com/react-hook-form#backers">
    <img src="https://opencollective.com/react-hook-form/backers.svg?width=950" />
</a>

## Organizations

Thanks goes to these wonderful organizations! [[Contribute](https://opencollective.com/react-hook-form/contribute)].

<a href="https://github.com/react-hook-form/react-hook-form/graphs/contributors">
    <img src="https://opencollective.com/react-hook-form/organizations.svg?width=950" />
</a>

## Contributors

Thanks goes to these wonderful people! [[Become a contributor](https://github.com/react-hook-form/react-hook-form/blob/master/CONTRIBUTING.md)].

<a href="https://github.com/react-hook-form/react-hook-form/graphs/contributors">
    <img src="https://opencollective.com/react-hook-form/contributors.svg?width=950" />
</a>

---
_Source: https://npm.io/package/@hookform/devtools · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._