Skip to main content

DevTools

The Raven DevTools is a floating panel that gives you real-time visibility into all active form instances — values, dirty fields, validation errors, submit state, and more.

Open Demo Panel​

Click the DevTools button in the bottom-right corner to open the inspector:

Open by Default​

🦅Raven DevTools
1 form5 dirty
Registration Form

Current Values

firstName: "John"
lastName: "Doe"
email: "john@example.com"
role: "admin"
newsletter: true

Submit Info

isSubmitting: false
submitCount: 0
raven-form-engine devtoolsUpdated: 6:33:56 AM

Setup​

Replace RavenFormProvider with RavenDevToolsProvider​

app/layout.tsx
import { RavenDevToolsProvider } from "raven-form-engine/devtools/RavenDevToolsProvider";
import { RavenRHFAdapter } from "raven-form-engine/adapters/ravenRHFAdapter";
import { RavenShadcnUIAdapter } from "raven-form-engine/ui/ravenShadcnAdapter";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <RavenDevToolsProvider
          formAdapter={RavenRHFAdapter}
          uiAdapter={RavenShadcnUIAdapter}
          devTools={process.env.NODE_ENV === "development"}
        >
          {children}
        </RavenDevToolsProvider>
      </body>
    </html>
  );
}

Panel Features​

State Tab​

Shows all current field values plus isSubmitting and submitCount.

Dirty Tab​

Lists fields changed from their initial values with before/after diff:

firstName   "" → "John"
email       "" → "john@example.com"

Includes smart hints:

  • CLEARED — field was emptied after having a value
  • TYPE_COERCION — value type changed unexpectedly
  • WHITESPACE — string is whitespace-only
  • ZERO_VALUE — numeric field landed on 0 (possible mask/parser bug)

Errors Tab​

Shows all active validation errors, or a green No validation errors message.

RavenDevToolsProvider Props​

PropTypeDefaultDescription
devToolsbooleanfalseShow the floating DevTools panel
formAdapterFormAdapter—Global form adapter
uiAdapterUIAdapter—Global UI adapter

All other RavenFormProvider props are also accepted.

Multi-Form Support​

When multiple forms are mounted, the DevTools shows a form selector to switch between them.

Security​

warning

Never enable DevTools in production. Form state may contain sensitive data.

devTools={process.env.NODE_ENV === 'development'}
// or
devTools={process.env.NEXT_PUBLIC_DEVTOOLS === 'true'}