Mantine Form DevTools

A powerful development tool for debugging and monitoring Mantine Form state in real-time. This package provides a floating devtools panel that displays form values, errors, validation status, and field states with an intuitive interface.

Acknowledgments

Special thanks to Mantine UI for providing an excellent React components library that makes building beautiful and accessible web applications a breeze. This devtools package is built on top of Mantine's powerful form library and UI components.

Built with ❤️ using Mantine

Features

• 🔍 Real-time form state monitoring - View form values, errors, and validation status
• 🎨 Customizable positioning - Position the devtools panel in any corner of the screen
• 🌓 Theme support - Light and dark theme options
• 🔍 Field filtering - Search and filter fields by name
• 📊 Visual indicators - Color-coded badges for form validity, dirty state, and touched state
• 🎯 Nested object support - Handle complex form structures with nested objects
• ⚡ Performance optimized - Minimal re-renders and efficient state updates

Installation

Choose your preferred package manager:

# Using npm
npm install mantine-form-devtools

# Using yarn
yarn add mantine-form-devtools

# Using pnpm
pnpm add mantine-form-devtools

# Using bun
bun add mantine-form-devtools

Usage

Using the Component

Import and use the FormDevTools component directly:

import { useForm } from '@mantine/form';
import { FormDevTools } from 'mantine-form-devtools';

function MyForm() {
  const form = useForm({
    initialValues: {
      email: '',
      password: '',
      profile: {
        firstName: '',
        lastName: '',
      },
    },
    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
      password: (value) => (value.length < 6 ? 'Password too short' : null),
    },
  });

  return (
    <form onSubmit={form.onSubmit(console.log)}>
      {/* Your form fields here */}

      {/* Add the devtools component */}
      <FormDevTools
        form={form}
        position="top-right"
        theme="dark"
      />
    </form>
  );
}

Using the Hook

For a more convenient integration, use the useFormDevTools hook:

import { useForm } from '@mantine/form';
import { useFormDevTools } from 'mantine-form-devtools';

function MyForm() {
  const form = useForm({
    initialValues: {
      username: '',
      email: '',
      settings: {
        notifications: true,
        theme: 'dark',
      },
    },
  });

  const { DevTools } = useFormDevTools(form);

  return (
    <form onSubmit={form.onSubmit(console.log)}>
      {/* Your form fields here */}

      {/* Add the devtools using the hook */}
      <DevTools
        position="bottom-left"
        theme="light"
      />
    </form>
  );
}

Props

FormDevTools Props

| Prop | Type | Default | Description | | ---------- | -------------------------------------------------------------- | ------------- | ------------------------------ | | form | UseFormReturnType<any> | Required | The Mantine form instance | | position | 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' | 'top-right' | Position of the devtools panel | | theme | 'dark' \| 'light' | 'dark' | Theme for the devtools panel |

Examples

Basic Form with DevTools

import { TextInput, Button, Stack } from '@mantine/core';
import { useForm } from '@mantine/form';
import { FormDevTools } from 'mantine-form-devtools';

function LoginForm() {
  const form = useForm({
    initialValues: {
      email: '',
      password: '',
    },
    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
      password: (value) => (value.length < 6 ? 'Password too short' : null),
    },
  });

  return (
    <form onSubmit={form.onSubmit(console.log)}>
      <Stack>
        <TextInput
          label="Email"
          placeholder="[email protected]"
          {...form.getInputProps('email')}
        />
        <TextInput
          label="Password"
          type="password"
          {...form.getInputProps('password')}
        />
        <Button type="submit">Login</Button>
      </Stack>

      <FormDevTools form={form} />
    </form>
  );
}

Complex Form with Nested Objects

import { TextInput, Checkbox, Select, Button, Stack } from '@mantine/core';
import { useForm } from '@mantine/form';
import { useFormDevTools } from 'mantine-form-devtools';

function UserProfileForm() {
  const form = useForm({
    initialValues: {
      personalInfo: {
        firstName: '',
        lastName: '',
        email: '',
      },
      preferences: {
        theme: 'light',
        notifications: true,
        language: 'en',
      },
      address: {
        street: '',
        city: '',
        country: '',
      },
    },
  });

  const { DevTools } = useFormDevTools(form);

  return (
    <form onSubmit={form.onSubmit(console.log)}>
      <Stack>
        {/* Personal Info */}
        <TextInput
          label="First Name"
          {...form.getInputProps('personalInfo.firstName')}
        />
        <TextInput
          label="Last Name"
          {...form.getInputProps('personalInfo.lastName')}
        />
        <TextInput
          label="Email"
          {...form.getInputProps('personalInfo.email')}
        />

        {/* Preferences */}
        <Select
          label="Theme"
          data={['light', 'dark']}
          {...form.getInputProps('preferences.theme')}
        />
        <Checkbox
          label="Enable Notifications"
          {...form.getInputProps('preferences.notifications', { type: 'checkbox' })}
        />

        {/* Address */}
        <TextInput
          label="Street"
          {...form.getInputProps('address.street')}
        />
        <TextInput
          label="City"
          {...form.getInputProps('address.city')}
        />

        <Button type="submit">Save Profile</Button>
      </Stack>

      <DevTools position="bottom-right" theme="light" />
    </form>
  );
}

Requirements

This package requires the following peer dependencies:

• @mantine/core ^8.2.7
• @mantine/form ^8.2.7
• @tabler/icons-react ^3.34.1
• react ^19.1.1
• react-dom ^19.1.1
• typescript ^5.9.2

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

Acknowledgments

Special thanks to Mantine UI for providing an excellent React components library that makes building beautiful and accessible web applications a breeze. This devtools package is built on top of Mantine's powerful form library and UI components.

Built with ❤️ using Mantine