<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][.gitignore]" value="# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
">
<input type="hidden" name="project[files][README.md]" value="## Usage

```bash
$ npm install # or pnpm install or yarn install
```

### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)

## Available Scripts

In the project directory, you can run:

### `npm run dev`

Runs the app in the development mode.&lt;br&gt;
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.

### `npm run build`

Builds the app for production to the `dist` folder.&lt;br&gt;
It correctly bundles Solid in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.&lt;br&gt;
Your app is ready to be deployed!

## Deployment

Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html)
">
<input type="hidden" name="project[files][index.html]" value="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;TanStack Form Solid Devtools Example App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;script type=&quot;module&quot; src=&quot;/src/index.tsx&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
">
<input type="hidden" name="project[files][package.json]" value="{
  &quot;name&quot;: &quot;@tanstack/form-example-solid-devtools&quot;,
  &quot;private&quot;: true,
  &quot;type&quot;: &quot;module&quot;,
  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;vite&quot;,
    &quot;build&quot;: &quot;tsc &amp;&amp; vite build&quot;,
    &quot;test:types&quot;: &quot;tsc&quot;,
    &quot;preview&quot;: &quot;vite preview&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@tanstack/solid-devtools&quot;: &quot;^0.8.2&quot;,
    &quot;@tanstack/solid-form&quot;: &quot;https://pkg.pr.new/TanStack/form/@tanstack/solid-form@1db6f68&quot;,
    &quot;@tanstack/solid-form-devtools&quot;: &quot;https://pkg.pr.new/TanStack/form/@tanstack/solid-form-devtools@1db6f68&quot;,
    &quot;solid-js&quot;: &quot;2.0.0-beta.15&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@solidjs/web&quot;: &quot;2.0.0-beta.15&quot;,
    &quot;typescript&quot;: &quot;5.9.3&quot;,
    &quot;vite&quot;: &quot;^7.2.2&quot;,
    &quot;vite-plugin-solid&quot;: &quot;3.0.0-next.5&quot;
  }
}">
<input type="hidden" name="project[files][tsconfig.json]" value="{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;ES2020&quot;,
    &quot;useDefineForClassFields&quot;: true,
    &quot;module&quot;: &quot;ESNext&quot;,
    &quot;lib&quot;: [&quot;ES2020&quot;, &quot;DOM&quot;, &quot;DOM.Iterable&quot;],
    &quot;skipLibCheck&quot;: true,

    /* Bundler mode */
    &quot;moduleResolution&quot;: &quot;Bundler&quot;,
    &quot;allowImportingTsExtensions&quot;: true,
    &quot;resolveJsonModule&quot;: true,
    &quot;isolatedModules&quot;: true,
    &quot;noEmit&quot;: true,
    &quot;jsx&quot;: &quot;preserve&quot;,
    &quot;jsxImportSource&quot;: &quot;@solidjs/web&quot;,

    /* Linting */
    &quot;strict&quot;: true,
    &quot;noUnusedLocals&quot;: true,
    &quot;noUnusedParameters&quot;: true,
    &quot;noFallthroughCasesInSwitch&quot;: true
  },
  &quot;include&quot;: [&quot;src&quot;, &quot;vite.config.ts&quot;]
}
">
<input type="hidden" name="project[files][vite.config.ts]" value="import { defineConfig } from &#39;vite&#39;
import solid from &#39;vite-plugin-solid&#39;

export default defineConfig({
  plugins: [solid()],
})
">
<input type="hidden" name="project[files][src/app.tsx]" value="import { createForm } from &#39;@tanstack/solid-form&#39;
import type { AnyFieldApi } from &#39;@tanstack/solid-form&#39;

interface FieldInfoProps {
  field: AnyFieldApi
}

function FieldInfo(props: FieldInfoProps) {
  return (
    &lt;&gt;
      {props.field.state.meta.isTouched &amp;&amp; !props.field.state.meta.isValid ? (
        &lt;em&gt;{props.field.state.meta.errors.join(&#39;,&#39;)}&lt;/em&gt;
      ) : null}
      {props.field.state.meta.isValidating ? &#39;Validating...&#39; : null}
    &lt;/&gt;
  )
}

export default function App() {
  const form = createForm(() =&gt; ({
    defaultValues: {
      firstName: &#39;&#39;,
      lastName: &#39;&#39;,
    },
    onSubmit: async ({ value }) =&gt; {
      // Do something with form data
      console.log(value)
    },
  }))

  return (
    &lt;div&gt;
      &lt;h1&gt;Simple Form Example&lt;/h1&gt;
      &lt;form
        onSubmit={(e) =&gt; {
          e.preventDefault()
          e.stopPropagation()
          form.handleSubmit()
        }}
      &gt;
        &lt;div&gt;
          {/* A type-safe field component*/}
          &lt;form.Field
            name=&quot;firstName&quot;
            validators={{
              onChange: ({ value }) =&gt;
                !value
                  ? &#39;A first name is required&#39;
                  : value.length &lt; 3
                    ? &#39;First name must be at least 3 characters&#39;
                    : undefined,
              onChangeAsyncDebounceMs: 500,
              onChangeAsync: async ({ value }) =&gt; {
                await new Promise((resolve) =&gt; setTimeout(resolve, 1000))
                return (
                  value.includes(&#39;error&#39;) &amp;&amp; &#39;No &quot;error&quot; allowed in first name&#39;
                )
              },
            }}
            children={(field) =&gt; {
              // Avoid hasty abstractions. Render props are great!
              return (
                &lt;&gt;
                  &lt;label for={field().name}&gt;First Name:&lt;/label&gt;
                  &lt;input
                    id={field().name}
                    name={field().name}
                    value={field().state.value}
                    onBlur={field().handleBlur}
                    onInput={(e) =&gt; field().handleChange(e.target.value)}
                  /&gt;
                  &lt;FieldInfo field={field()} /&gt;
                &lt;/&gt;
              )
            }}
          /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;form.Field
            name=&quot;lastName&quot;
            children={(field) =&gt; (
              &lt;&gt;
                &lt;label for={field().name}&gt;Last Name:&lt;/label&gt;
                &lt;input
                  id={field().name}
                  name={field().name}
                  value={field().state.value}
                  onBlur={field().handleBlur}
                  onInput={(e) =&gt; field().handleChange(e.target.value)}
                /&gt;
                &lt;FieldInfo field={field()} /&gt;
              &lt;/&gt;
            )}
          /&gt;
        &lt;/div&gt;
        &lt;form.Subscribe
          selector={(state) =&gt; ({
            canSubmit: state.canSubmit,
            isSubmitting: state.isSubmitting,
          })}
          children={(state) =&gt; {
            return (
              &lt;button type=&quot;submit&quot; disabled={!state().canSubmit}&gt;
                {state().isSubmitting ? &#39;...&#39; : &#39;Submit&#39;}
              &lt;/button&gt;
            )
          }}
        /&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/index.tsx]" value="// lib
import { render } from &#39;@solidjs/web&#39;

import { TanStackDevtools } from &#39;@tanstack/solid-devtools&#39;
import { formDevtoolsPlugin } from &#39;@tanstack/solid-form-devtools&#39;

// components
import App from &#39;./app&#39;

const root = document.getElementById(&#39;root&#39;)

render(
  () =&gt; (
    &lt;&gt;
      &lt;App /&gt;

      &lt;TanStackDevtools plugins={[formDevtoolsPlugin()]} /&gt;
    &lt;/&gt;
  ),
  root!,
)
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="@tanstack/form-example-solid-devtools">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>