FormDevTools API Reference

The FormDevTools component is a developer tool that helps you debug forms in your application. It shows you the current state of your form, including the values, errors, and fields. To use the FormDevTools component, you need to wrap it with the FormProvider you want to debug.

import {useForm} from '@formsignals/form-react';
import {FormDevTools} from '@formsignals/dev-tools-react';

export default function App() {
  const form = useForm();

  return (
    <form.FormProvider>
      <FormDevTools/>
      {/* Your form components */}
    </form.FormProvider>
  );
}

Options

When creating the FormDevTools component, you can pass an options object to customize its behavior.

type FormDevToolsProps = {
  bgColor?: string
  bgSecondaryColor?: string
  textColor?: string
  accentColor?: string
  onAccentColor?: string
  errorColor?: string
  successColor?: string

  initialOpen?: boolean
  position?: `${'top' | 'bottom'}-${'left' | 'right'}`
}

Option	Description
bgColor	The background color of the devtools.
bgSecondaryColor	The secondary background color of the devtools.
textColor	The text color of the devtools.
accentColor	The accent color of the devtools.
onAccentColor	The color of the text on the accent color.
errorColor	The color of the falsy values.
successColor	The color of the truthy values.
initialOpen	Whether the devtools should be open by default. Default: false
position	The position of the devtools. Default: bottom-right