+
+
+
+Signals for managing form state in Solid
+
+
+ 
+
+ 
+
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [TanStack Table](https://github.com/TanStack/table), [TanStack Router](https://github.com/tanstack/router), [TanStack Virtual](https://github.com/tanstack/virtual), [React Charts](https://github.com/TanStack/react-charts), [React Ranger](https://github.com/TanStack/ranger)
+
+## Visit [tanstack.com/form](https://tanstack.com/form) for docs, guides, API and more!
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+
diff --git a/packages/form-devtools/eslint.config.js b/packages/form-devtools/eslint.config.js
new file mode 100644
index 000000000..8ce6ad05f
--- /dev/null
+++ b/packages/form-devtools/eslint.config.js
@@ -0,0 +1,5 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+export default [...rootConfig]
diff --git a/packages/form-devtools/package.json b/packages/form-devtools/package.json
new file mode 100644
index 000000000..6fd5bbd7d
--- /dev/null
+++ b/packages/form-devtools/package.json
@@ -0,0 +1,73 @@
+{
+ "name": "@tanstack/form-devtools",
+ "version": "1.17.0",
+ "description": "Powerful, type-safe forms for Solid.",
+ "author": "tannerlinsley",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/TanStack/form.git",
+ "directory": "packages/form-devtools"
+ },
+ "homepage": "https://tanstack.com/form",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "scripts": {
+ "clean": "premove ./dist ./coverage",
+ "test:eslint": "eslint ./src ./tests",
+ "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+ "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js",
+ "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
+ "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
+ "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
+ "test:types:ts58": "tsc",
+ "test:lib": "vitest",
+ "test:lib:dev": "pnpm run test:lib --watch",
+ "test:build": "publint --strict",
+ "build": "vite build && tsc -p tsconfig.build.json"
+ },
+ "type": "module",
+ "types": "dist/esm/index.d.ts",
+ "main": "dist/cjs/index.cjs",
+ "module": "dist/esm/index.js",
+ "exports": {
+ ".": {
+ "solid": {
+ "types": "./dist/source/index.d.ts",
+ "default": "./dist/source/index.jsx"
+ },
+ "import": {
+ "types": "./dist/esm/index.d.ts",
+ "default": "./dist/esm/index.js"
+ },
+ "require": {
+ "types": "./dist/cjs/index.d.cts",
+ "default": "./dist/cjs/index.cjs"
+ }
+ },
+ "./package.json": "./package.json"
+ },
+ "sideEffects": false,
+ "files": [
+ "dist",
+ "src"
+ ],
+ "dependencies": {
+ "@tanstack/form-core": "workspace:*",
+ "@tanstack/devtools-ui": "^0.3.1",
+ "clsx": "^2.1.1",
+ "dayjs": "^1.11.13",
+ "@tanstack/solid-store": "^0.7.3",
+ "goober": "^2.1.16"
+ },
+ "devDependencies": {
+ "solid-js": "^1.9.7",
+ "vite": "^7.0.6",
+ "vite-plugin-solid": "^2.11.6"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.6.0"
+ }
+}
diff --git a/packages/form-devtools/src/TanstackFormDevtoolsPanel.tsx b/packages/form-devtools/src/TanstackFormDevtoolsPanel.tsx
new file mode 100644
index 000000000..af9c5f72a
--- /dev/null
+++ b/packages/form-devtools/src/TanstackFormDevtoolsPanel.tsx
@@ -0,0 +1,33 @@
+import { render } from 'solid-js/web'
+import { Devtools } from './components'
+
+export interface TanstackFormDevtoolsPanelConfig {}
+
+class TanstackFormDevtoolsPanel {
+ #isMounted = false
+ #dispose?: () => void
+
+ // constructor(config: TanstackFormDevtoolsPanelConfig) {}
+ constructor() {}
+
+ mount
+ {(() => {
+ const entry = props.selectedInstance()
+ if (!entry) {
+ return (
+
+ )
+}
diff --git a/packages/form-devtools/src/components/Shell.tsx b/packages/form-devtools/src/components/Shell.tsx
new file mode 100644
index 000000000..47ba0b78b
--- /dev/null
+++ b/packages/form-devtools/src/components/Shell.tsx
@@ -0,0 +1,100 @@
+import { createMemo, createSignal, onCleanup, onMount } from 'solid-js'
+import { useStyles } from '../styles/use-styles'
+import { useFormStateArray } from '../contexts/eventClientContext'
+// import { UTIL_GROUPS } from './util-groups'
+import { UtilList } from './UtilList'
+import { DetailsPanel } from './DetailsPanel'
+
+export function Shell() {
+ const styles = useStyles()
+ const formArray = useFormStateArray()
+ const [selectedKey, setSelectedKey] = createSignal
+ Select a util from the left panel to view its state
+
+ )
+ }
+
+ return (
+ <>
+ {/*
+
+
+ )
+ })()}
+
+
+
+ Actions
+ {/*
+
+
+ State
+
+
+
+
+ Options
+
+
+
+
+ )
+}
diff --git a/packages/form-devtools/src/components/UtilList.tsx b/packages/form-devtools/src/components/UtilList.tsx
new file mode 100644
index 000000000..78574f6bc
--- /dev/null
+++ b/packages/form-devtools/src/components/UtilList.tsx
@@ -0,0 +1,39 @@
+import { For } from 'solid-js'
+import clsx from 'clsx'
+import { useStyles } from '../styles/use-styles'
+import type { AnyFormState } from '@tanstack/form-core'
+
+type UtilListProps = {
+ selectedKey: () => string | null
+ setSelectedKey: (key: string | null) => void
+ utilState: () => Array<{ id: string; state: AnyFormState }>
+}
+
+export function UtilList(props: UtilListProps) {
+ const styles = useStyles()
+
+ return (
+ TanStack Form
+
+
+
+
+
+
+
+
+
+
+ Details
+ {/* {JSON.stringify(selectedInstance())}
+
+ {props.utilState().length > 0 && (
+
+ )
+}
diff --git a/packages/form-devtools/src/components/index.tsx b/packages/form-devtools/src/components/index.tsx
new file mode 100644
index 000000000..ce268441f
--- /dev/null
+++ b/packages/form-devtools/src/components/index.tsx
@@ -0,0 +1,11 @@
+import { FormEventClientProvider } from '../contexts/eventClientContext'
+
+import { Shell } from './Shell'
+
+export function Devtools() {
+ return (
+
+
+ {(instance) => {
+ return (
+
+
+ )}
+ props.setSelectedKey(instance.id)}
+ >
+
+ )
+ }}
+ {instance.id}
+
+
+
+
+Hooks for managing form state in React
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [TanStack Table](https://github.com/TanStack/table), [TanStack Router](https://github.com/tanstack/router), [TanStack Virtual](https://github.com/tanstack/virtual), [React Charts](https://github.com/TanStack/react-charts), [React Ranger](https://github.com/TanStack/ranger)
+
+## Visit [tanstack.com/form](https://tanstack.com/form) for docs, guides, API and more!
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+
diff --git a/packages/react-form-devtools/eslint.config.js b/packages/react-form-devtools/eslint.config.js
new file mode 100644
index 000000000..dd590b561
--- /dev/null
+++ b/packages/react-form-devtools/eslint.config.js
@@ -0,0 +1,25 @@
+// @ts-check
+
+import pluginReact from '@eslint-react/eslint-plugin'
+import reactCompiler from 'eslint-plugin-react-compiler'
+import pluginReactHooks from 'eslint-plugin-react-hooks'
+import rootConfig from '../../eslint.config.js'
+
+export default [
+ ...rootConfig,
+ {
+ files: ['**/*.{ts,tsx}'],
+ ...pluginReact.configs.recommended,
+ },
+ {
+ plugins: {
+ 'react-hooks': pluginReactHooks,
+ 'react-compiler': reactCompiler,
+ },
+ rules: {
+ 'react-hooks/exhaustive-deps': 'error',
+ 'react-hooks/rules-of-hooks': 'error',
+ 'react-compiler/react-compiler': 'error',
+ },
+ },
+]
diff --git a/packages/react-form-devtools/package.json b/packages/react-form-devtools/package.json
new file mode 100644
index 000000000..cf0d71afd
--- /dev/null
+++ b/packages/react-form-devtools/package.json
@@ -0,0 +1,68 @@
+{
+ "name": "@tanstack/react-form-devtools",
+ "version": "0.0.1",
+ "description": "Powerful, type-safe forms for React.",
+ "author": "tannerlinsley",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/TanStack/form.git",
+ "directory": "packages/react-form"
+ },
+ "homepage": "https://tanstack.com/form",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "scripts": {
+ "clean": "premove ./dist ./coverage",
+ "test:eslint": "eslint ./src ./tests",
+ "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+ "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js",
+ "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
+ "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
+ "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
+ "test:types:ts58": "tsc",
+ "test:lib": "vitest",
+ "test:lib:dev": "pnpm run test:lib --watch",
+ "test:build": "publint --strict",
+ "build": "vite build"
+ },
+ "type": "module",
+ "types": "dist/esm/index.d.ts",
+ "main": "dist/cjs/index.cjs",
+ "module": "dist/esm/index.js",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./dist/esm/index.d.ts",
+ "default": "./dist/esm/index.js"
+ },
+ "require": {
+ "types": "./dist/cjs/index.d.cts",
+ "default": "./dist/cjs/index.cjs"
+ }
+ },
+ "./package.json": "./package.json"
+ },
+ "sideEffects": false,
+ "files": [
+ "dist",
+ "src"
+ ],
+ "dependencies": {
+ "@tanstack/form-devtools": "workspace:*"
+ },
+ "devDependencies": {
+ "@types/react": "^19.0.7",
+ "@types/react-dom": "^19.0.3",
+ "@vitejs/plugin-react": "^4.5.2",
+ "eslint-plugin-react-compiler": "19.0.0-beta-ebf51a3-20250411",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "vite": "^7.0.6"
+ },
+ "peerDependencies": {
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+}
diff --git a/packages/react-form-devtools/src/FormDevtools.tsx b/packages/react-form-devtools/src/FormDevtools.tsx
new file mode 100644
index 000000000..e0cf811f2
--- /dev/null
+++ b/packages/react-form-devtools/src/FormDevtools.tsx
@@ -0,0 +1,19 @@
+import { TanstackFormDevtoolsPanel } from '@tanstack/form-devtools'
+import { useEffect, useRef, useState } from 'react'
+
+export function FormDevtools(): React.ReactElement | null {
+ const [devtools] = useState(new TanstackFormDevtoolsPanel())
+ const ref = useRef