Devtools

Use FormPleaseDevtools when you must explain why a generated form rendered or changed in a specific way. One component mounts the React Hook Form (RHF) inspector and the Form Please Devtools drawer for the supplied form.

Try the live demo

Edit Name or Role to record an update.
Set Profile type to Team to resolve the conditional field.
Clear Name, then select Validate profile to create an issue.
Open FP Devtools at the bottom-right and inspect each view.

Live demo

Edit the form, then open FP Devtools at the bottom-right.

This demo uses synthetic data and in-memory persistence. The React Hook Form launcher appears at the top-right.

Mount one component

Import the component from the optional client entry. Render it only in a trusted development build:

"use client"
 
import {  } from "form-please/devtools"
import {  } from "form-please/preset-native"
import {  } from "zod"
 
const  = .(
	.({
		: .().(1, "Enter a name"),
		: .(),
	}),
	() => [
		.("name", { : "text", : "Name" }),
		.("role", { : "text", : "Role" }),
	],
)
 
export function () {
	const  = .(, {
		: { : "Ada Lovelace", : "Programmer" },
	})
 
	return (
		<>
			<. ={} />
			{.. === "development" && (
				< ={} ="Profile" />
			)}
		</>
	)
}

The form prop is the connection and identity. Do not create a separate ID. Use the optional name when a page has several forms or when a readable label helps. Without name, the component assigns Form 1, Form 2, and so on.

The package includes @hookform/devtools. The RHF launcher appears at the top-right. The FP Devtools launcher appears at the bottom-right. It opens the resizable Form Please Devtools drawer.

Use the four views

View	Use it to inspect
UI	Resolved nodes, hidden fields, inherited state, issue routing, submit focus, RHF paths, and rendered controls.
Updates	Managed proposals, hooks, middleware, commits, direct RHF changes, patches, values, failures, and duration.
Options	Static options and async request status, dependencies, duration, errors, and result size.
Features	Configured history and persistence snapshots, internal status, and recent transitions.

Use Copy RHF path to move from a Form, Please node to the matching RHF field. Use Highlight to scroll to a visible generated control. Pause recording when you must inspect the current journal without adding updates. Pausing does not pause the form.

Know the data boundary

Devtools is read-only. It keeps at most 100 updates and 20 transitions for each configured feature. The journal exists only while the optional component is mounted.

The drawer shows raw local values, context, patches, errors, and feature details. This data can be sensitive. Do not mount devtools in an untrusted or production environment. The first release does not export or send diagnostic data.

Next steps

Edit this page