From 91e4c3ee17a8224d26fb6a3c315c84e2ec7f6171 Mon Sep 17 00:00:00 2001
From: Edmund Hung <me@edmund.dev>
Date: Sat, 29 Oct 2022 22:08:05 +0200
Subject: [PATCH] docs: documentation for v0.4 (#45)

---
 README.md                                     |  29 +-
 docs/basics.md                                | 147 +++++--
 docs/submission.md                            | 125 +++---
 docs/validation.md                            | 405 +++++++++---------
 examples/basic/src/App.tsx                    |  44 +-
 examples/remix-run/README.md                  |  42 +-
 .../remix-run/app/routes/async-validation.tsx | 141 +++---
 examples/remix-run/app/routes/basic.tsx       | 121 ------
 examples/remix-run/app/routes/index.tsx       |   7 +-
 .../app/routes/server-validation.tsx          | 132 ++++++
 examples/remix-run/app/routes/todos.tsx       | 133 ++++++
 examples/remix-run/app/routes/zod.tsx         | 105 ++---
 examples/todos/src/App.tsx                    |  10 +-
 examples/yup/README.md                        |   2 +-
 examples/yup/src/App.tsx                      |  19 +-
 examples/zod/README.md                        |   2 +-
 examples/zod/src/App.tsx                      |  20 +-
 guide/app/components.tsx                      |   6 +-
 guide/app/context.ts                          |  52 ++-
 guide/app/octokit.tsx                         |   7 +-
 guide/app/routes/_guide.$page.tsx             |  10 +-
 guide/app/routes/_guide.api.$package.tsx      |  12 +-
 guide/app/routes/_guide.examples.$name.tsx    |  13 +-
 guide/app/routes/_guide.index.tsx             |  13 +-
 guide/app/util.ts                             |  14 -
 guide/package.json                            |   2 +-
 guide/remix.env.d.ts                          |   1 -
 guide/server.js                               |   7 +-
 packages/conform-dom/index.ts                 |  45 +-
 packages/conform-react/README.md              | 176 +++-----
 packages/conform-react/hooks.ts               | 126 +++---
 packages/conform-react/index.ts               |   3 +-
 packages/conform-yup/README.md                |  73 +++-
 packages/conform-yup/index.ts                 |  25 +-
 packages/conform-zod/README.md                |  79 +++-
 packages/conform-zod/index.ts                 |  18 +
 playground/app/routes/employee.tsx            |  18 +-
 playground/app/routes/login.tsx               |  22 +-
 playground/app/routes/movie.tsx               |  54 +--
 playground/app/routes/payment.tsx             |  28 +-
 playground/app/routes/signup.tsx              |  29 +-
 playground/app/routes/student.tsx             |  31 +-
 playground/app/routes/todos.tsx               |  50 ++-
 tests/conform-dom.spec.ts                     |  14 +-
 tests/react.spec.ts                           |  24 +-
 45 files changed, 1360 insertions(+), 1076 deletions(-)
 delete mode 100644 examples/remix-run/app/routes/basic.tsx
 create mode 100644 examples/remix-run/app/routes/server-validation.tsx
 create mode 100644 examples/remix-run/app/routes/todos.tsx

diff --git a/README.md b/README.md
index 2484812b..a9f5b5f1 100644
--- a/README.md
+++ b/README.md
@@ -2,26 +2,29 @@
 
 Conform is a form validation library built on top of the [Constraint Validation](https://caniuse.com/constraint-validation) API.
 
-- **Progressive Enhancement**: It is designed based on the [HTML specification](https://html.spec.whatwg.org/dev/form-control-infrastructure.html#the-constraint-validation-api). From validating the form to reporting error messages for each field, if you don't like part of the solution, just replace it with your own.
-- **Framework Agnostic**: The DOM is the only dependency. Conform makes use of native [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) exclusively. You don't have to use React / Vue / Svelte to utilise this library.
-- **Flexible Setup**: It can validates fields anywhere in the dom with the help of [form attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form). Also enables CSS pseudo-classes like `:valid` and `:invalid`, allowing flexible styling across your form without the need to manipulate the class names.
+- **Progressive Enhancement**: Its APIs are designed with progressive enhancement in mind to ensure a smooth and resillent experience before javascript is ready.
+- **Server-first validation**: It simplifies the mental model by utilizing a server-first validation flow which submits your form for validation.
+- **Lightweight**: It is only [4kB](https://bundlephobia.com/package/@conform-to/react) compressed thanks to all the native [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API). _#useThePlatform_
 
 ## Quick start
 
-<!-- sandbox title="Simple demo" src="/examples/basic" -->
+<!-- sandbox src="/examples/basic" -->
 
 ```tsx
 import { useForm, useFieldset } from '@conform-to/react';
 
 export default function LoginForm() {
   const form = useForm({
-    onSubmit(event, { submission }) {
+    onSubmit(event) {
       event.preventDefault();
 
-      console.log(submission);
+      const formData = new FormData(event.currentTarget);
+      const value = Object.fromEntries(formData);
+
+      console.log(value);
     },
   });
-  const { email, password } = useFieldset(form.ref);
+  const { email, password } = useFieldset(form.ref, form.config);
 
   return (
     <form {...form.props}>
@@ -41,16 +44,6 @@ export default function LoginForm() {
 }
 ```
 
-Learn more about conform [here](https://conform.guide/basics)
+Learn more about conform [here](https://conform.guide/basics).
 
 <!-- /sandbox -->
-
-## API References
-
-<!-- prettier-ignore-start -->
-| Package | Description | Size |
-| :------ | :---------- | :--- |
-| [@conform-to/react](packages/conform-react) | View adapter for [react](https://github.com/facebook/react)  | [![package size](https://img.shields.io/bundlephobia/minzip/@conform-to/react)](https://bundlephobia.com/package/@conform-to/react) |
-| [@conform-to/yup](packages/conform-yup) | Schema resolver for [yup](https://github.com/jquense/yup) | [![package size](https://img.shields.io/bundlephobia/minzip/@conform-to/yup)](https://bundlephobia.com/package/@conform-to/yup) |
-| [@conform-to/zod](packages/conform-zod) | Schema resolver for [zod](https://github.com/colinhacks/zod) | [![package size](https://img.shields.io/bundlephobia/minzip/@conform-to/zod)](https://bundlephobia.com/package/@conform-to/zod) |
-<!-- prettier-ignore-end -->
diff --git a/docs/basics.md b/docs/basics.md
index cd47a183..88eb1911 100644
--- a/docs/basics.md
+++ b/docs/basics.md
@@ -1,6 +1,6 @@
 # Basics
 
-In this section, we will cover how to build a simple login form by utilizing native constraint and then enhancing it with conform.
+In this section, we will show you how to build a login form by utilizing the **Constraint Validation** API with **Conform**.
 
 <!-- aside -->
 
@@ -8,8 +8,9 @@ In this section, we will cover how to build a simple login form by utilizing nat
 
 - [Installation](#installation)
 - [Quick start](#quick-start)
+- [Constraint Validation](#constraint-validation)
 - [Capturing errors](#capturing-errors)
-- [Styling input](#styling-input)
+- [Customize messages](#customize-messages)
 - [Early reporting](#early-reporting)
 - [Demo](#demo)
 
@@ -25,7 +26,7 @@ npm install @conform-to/react
 
 To begin, let's make a login form with 2 basic requirements:
 
-- The **email** field should be a valid email address
+- The **email** field should contain a valid email address
 - The **password** field should not be empty
 
 ```tsx
@@ -36,7 +37,8 @@ export default function LoginForm() {
         event.preventDefault();
 
         const formData = new FormData(event.currentTarget);
-        console.log(formData);
+
+        console.log(Object.fromEntries(formData));
       }}
     >
       <label>
@@ -59,13 +61,23 @@ export default function LoginForm() {
 }
 ```
 
-By utilising the [required](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required) attribute, our form now stop users from submitting until they provide a valid email address with the password. We are also capturing the form value using the [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) API.
+Both the **email** input type and the [required](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required) attribute are parts of the [Constraint Validation](#constraint-validation) API. It tells the browser to stop users from submitting the form until they provide a valid email address with the password.
+
+### Constraint Validation
+
+The [Constraint Validation](https://caniuse.com/constraint-validation) API is introduced with HTML5 to enable native client side form validation. This includes:
+
+- Utilizing [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#validation-related_attributes) for validations (e.g. `required`, `type`)
+- Accessing form validity and configuring custom constraint through the [DOM APIs](https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation#extensions_to_other_interfaces) (e.g `validityState`, `setCustomValidity()`)
+- Styling form elements with [CSS pseudo-class](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#the_constraint_validation_api) based on the validity (e.g. `:required`, `:invalid`)
+
+Conform utilizes these APIs internally. For example, form errors are reported by listening to the [invalid event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) and the error messages are captured from the element [validationMessage](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage) property.
 
 ### Capturing errors
 
-With the help of native form validation, users will see [error bubbles](https://codesandbox.io/s/cocky-fermi-zwjort?file=/src/App.js) popping up if they try to submit a form with invalid fields. These bubbles, unfortunately, are not customizable.
+With the help of Constraint Validation, users will see [error bubbles](https://codesandbox.io/s/cocky-fermi-zwjort?file=/src/App.js) popping up when they try to submit a form with invalid fields. These bubbles are not customizable unfortunately. What if we can capture the error messages and decide where to put them ourselves?
 
-What if we can capture the error messages and decide where to put them ourselves? Let's introduce the [useForm](/packages/conform-react/README.md#useform) and [useFieldset](/packages/conform-react/README.md#usefieldset) hooks:
+Let's introduce the [useForm](/packages/conform-react/README.md#useform) and [useFieldset](/packages/conform-react/README.md#usefieldset) hooks.
 
 ```tsx
 import { useForm, useFieldset } from '@conform-to/react';
@@ -73,63 +85,140 @@ import { useForm, useFieldset } from '@conform-to/react';
 export default function LoginForm() {
   /**
    * The useForm hook let you take control of the browser
-   * validation flow and customize it
+   * validation flow and customize it. The submit event
+   * handler will be called only when the form is valid.
    */
   const form = useForm({
     onSubmit(event, { formData }) {
       event.preventDefault();
 
-      console.log(formData);
+      console.log(Object.fromEntries(formData));
     },
   });
+
   /**
-   * The useFieldset hook let you subscribe to the state
-   * of each field
+   * The useFieldset hook helps you configure each field and
+   * subscribe to its state. The properties accessed should
+   * match the name of the inputs.
    */
-  const { email, password } = useFieldset(form.ref);
+  const { email, password } = useFieldset(form.ref, form.config);
 
   return (
     <form {...form.props}>
-      {/* ... */}
+      <label>
+        <div>Email</div>
+        <input type="email" name="email" required autoComplete="off" />
+        {/* The email error captured */}
+        <div>{email.error}</div>
+      </label>
+      <label>
+        <div>Password</div>
+        <input type="password" name="password" required />
+        {/* The password error captured */}
+        <div>{password.error}</div>
+      </label>
+      <label>
+        <div>
+          <span>Remember me</span>
+          <input type="checkbox" name="remember-me" value="yes" />
+        </div>
+      </label>
       <button type="submit">Login</button>
     </form>
   );
 }
 ```
 
-<details>
-<summary>Where are these error messages come from?</summary>
-You might already notice - they are the same as the one you saw on the error bubbles: Indeed, these messages are provided by the browser vendor and might varies depending on your operating system and user language setting.
-</details>
+### Customize messages
+
+Although we haven't define any error messages yet, the form above should be able to populate some message depends on the conditions. These messages are provided by the browser vendor and might vary depending on your users operating system and language setting. Let's customize messages based on the elements' [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
+
+```tsx
+import { useForm, parse, getFormElements } from '@conform-to/react';
 
-### Styling input
+export default function LoginForm() {
+  const form = useForm({
+    onValidate({ form, formData }) {
+      /**
+       * By parsing the formData, you will be able to access:
+       * 1) The value in the defined structure
+       *    e.g. { email: '', password: '' }
+       * 2) The error found while parsing the form data
+       *    e.g. [ ['email', 'Email is required'], ... ]
+       * 3) The type and intent of the submission
+       *
+       * More details will be covered in the submission section
+       */
+      const submission = parse(formData);
+
+      /**
+       * The `getFormElements` returns all input/select/textarea/button
+       * elements in the form
+       */
+      for (const element of getFormElements(form)) {
+        switch (element.name) {
+          case 'email': {
+            if (element.validity.valueMissing) {
+              /**
+               * This will be true when the input is marked as `required`
+               * while the input is blank
+               */
+              submission.error.push([element.name, 'Email is required']);
+            } else if (element.validity.typeMismatch) {
+              /**
+               * This will be true when the input type is `email`
+               * while the value does not match
+               */
+              submission.error.push([element.name, 'Email is invalid']);
+            } else if (!element.value.endsWith('gmail.com')) {
+              /**
+               * You can also validate the field manually with custom logic
+               */
+              submission.error.push([element.name, 'Only gmail is accepted']);
+            }
+            break;
+          }
+          case 'password': {
+            if (element.validity.valueMissing) {
+              submission.error.push([element.name, 'Password is required']);
+            }
+            break;
+          }
+        }
+      }
+
+      return submission;
+    },
 
-It might be common to update the class name based on the error state. However, conform makes it possible to style using a combination of [CSS pseudo-class](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#the_constraint_validation_api) with data attribute as well:
+    // ....
+  });
 
-```css
-input[data-conform-touched]:invalid {
-  border-color: red;
+  // ...
 }
 ```
 
 ### Early reporting
 
-Currently, form error will not be reported until a submission is made. If you want it to be shown earlier, just set the `initialReport` option to `onBlur` and now error should be reported once the user leave the field:
+Currently, form error is reported only when a submission is made. If you want it to be shown earlier, you can set the `initialReport` option to `onBlur` and then error will be reported once the user leave the field.
 
 ```tsx
 import { useForm } from '@conform-to/react';
 
 export default function LoginForm() {
   const form = useForm({
+    /**
+     * Define when the error should be reported initially.
+     * Support "onSubmit", "onChange", "onBlur".
+     *
+     * Default to `onSubmit`.
+     */
     initialReport: 'onBlur',
+    onSubmit(event, { formData }) {
+      // ...
+    },
   });
 
-  return (
-    <form {...form.props}>
-      {/* ... */}
-      <button type="submit">Login</button>
-    </form>
-  );
+  // ...
 }
 ```
 
diff --git a/docs/submission.md b/docs/submission.md
index 83963f62..a2752759 100644
--- a/docs/submission.md
+++ b/docs/submission.md
@@ -1,42 +1,41 @@
 # Submission
 
-**Conform** handles form data as a set of key/value pairs and this is usually constructed by using the [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) API. This structure, however, does not have direct support of nested or array stucture. To resolve this, it adopts a naming convention to provides hints on how to properly transformed it into the desired structure with additonal metadata.
+A submission is basically a form data utilizing **Conform**'s naming convention.
 
 <!-- aside -->
 
 ## Table of Contents
 
-- [Schema](#schema)
-- [Configuration](#configuration)
-  - [Manual setup](#manual-setup)
-  - [Derived config](#derived-config)
+- [Data structure](#data-structure)
+  - [Configuration](#configuration)
 - [Form Submitter](#form-submitter)
   - [Command button](#command-button)
-  - [Built-in commands](#built-in-commands)
+  - [List command](#list-command)
+  - [Validate command](#validate-command)
 - [Demo](#demo)
 
 <!-- /aside -->
 
-## Schema
+## Data structure
 
-The convention **conform** adopted is similiar to how properties are accessed in JavaScript: `object.property` and `array[index]`. These notations could be nested and mixed together.
+**Conform** uses `object.property` and `array[index]` to define data structure. These notations could be nested and mixed together. You can [parse](/packages/conform-react/README.md#parse) the form data and access its value in the defined structure through `submission.value`.
 
-Once the name of the fields are configured properly, you can then [parse](/packages/conform-react/README.md#parse) the form data and access the value from `submission.value`.
-
-```tsx
+```ts
 import { parse } from '@conform-to/react';
 
-const formData = new FormData(formElement);
+const formData = new FormData();
 const submission = parse(formData);
 
 console.log(submission.value);
 ```
 
-## Configuration
+If the form data is malformed (i.e. some entries violate the naming convention), errors will be caught internally and you can access them through `submission.error`.
 
-There are 2 approaches to setup the field name. For example, if we are building a todo list with the following schema:
+### Configuration
 
-```ts
+There are 2 approaches to configure the input name. Consider a todo list with the following schema:
+
+```tsx
 interface Task {
   content: string;
   completed: boolean;
@@ -48,9 +47,7 @@ interface TodoList {
 }
 ```
 
-### Manual setup
-
-It can be setup manually:
+The first approach is to setup manually:
 
 ```tsx
 export default function TodoForm() {
@@ -82,25 +79,7 @@ export default function TodoForm() {
               </div>
             </fieldset>
           </li>
-          <li>
-            <fieldset>
-              <label>
-                <span>{title}</span>
-                <input type="text" name="tasks[0].content" required />
-              </label>
-              <div>
-                <label>
-                  <span>Completed</span>
-                  <input
-                    type="checkbox"
-                    name="tasks[0].completed"
-                    value="yes"
-                  />
-                </label>
-              </div>
-            </fieldset>
-            {/* repeat with tasks[1], tasks[2] and so on */}
-          </li>
+          {/* repeat with tasks[1], tasks[2] and so on */}
         </ul>
       </fieldset>
       <button type="submit">Save</button>
@@ -109,31 +88,39 @@ export default function TodoForm() {
 }
 ```
 
-### Derived config
-
-However, naming fields manually might be error-prone, especailly when you are dealing with complex structure. You can also use the derived name provided by [useFieldset](/packages/conform-react/README.md#usefieldset) and [useFieldList](/packages/conform-react/README.md#usefieldlist) with optional type hints.
+Configuring fields' name manually might be error-prone. Another approach is to use the derived config provided by [useFieldset](/packages/conform-react/README.md#usefieldset) and [useFieldList](/packages/conform-react/README.md#usefieldlist).
 
 ```tsx
 export default function TodoForm() {
-  // Define the shape of the schema as `Todo`
+  /**
+   * For better type safety, you can provide a schema to `useForm`
+   */
   const form = useForm<Todo>();
 
-  // It warns if you are accessing fields other than title and tasks
+  /**
+   * useFieldset handles object structure. It warns if you are
+   * accessing fields not defined in the schema
+   */
   const { title, tasks } = useFieldset(form.ref, form.config);
 
-  // The hook will warn if the shape of tasks is not an array
-  const [taskList, control] = useFieldList(form.ref, tasks.config);
+  /**
+   * useFieldList handles array structure. It warns if the field
+   * is not an array
+   */
+  const [taskList, command] = useFieldList(form.ref, tasks.config);
 
   return (
     <form {...form.props}>
       <fieldset>
         <label>
           <div>Title</div>
+          {/* Configuring the input with a derived name */}
           <input type="text" name={title.config.name} required />
         </label>
         <ul>
           {taskList.map((task, index) => (
             <li key={task.key}>
+              {/* Passing the dervied config down the component tree */}
               <TaskFieldset title={`Task #${index + 1}`} {...task.config} />
             </li>
           ))}
@@ -145,7 +132,14 @@ export default function TodoForm() {
 }
 
 export function TaskFieldset({ title, ...config }: TaskFieldsetProps) {
+  /**
+   * If `form.ref` is not accessible, you can use a fieldset ref instead
+   */
   const ref = useRef<HTMLFieldSetElement>(null);
+  /**
+   * The `useFieldset` will pick up the task config and
+   * derives config based on the field name
+   */
   const { content, completed } = useFieldset(ref, config);
 
   return (
@@ -167,12 +161,12 @@ export function TaskFieldset({ title, ...config }: TaskFieldsetProps) {
 
 ## Form submitter
 
-Similar to input, a submit button can also contribute to the form data when provided a _name_ and _value_ . It will be added to the final form data only when it is the [submitter](https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter). i.e. being clicked
+Similar to inputs, a submit button can contribute to the form data when it is provided a _name_ and _value_ . It will be added to the final form data if it is the [submitter](https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter). i.e. the button that triggered the submit event
 
 <details>
-<summary>Why is the submitter data not included in the FormData object?</summary>
+<summary>Why is the submitter value not included with `new FormData()`?</summary>
 
-Unfortunately, the FormData API is not able to capture the submitter information for us and requires some manipulations to mimick the browser behaviour. Because of this, **Conform** provides the modified formData to you as well.
+Unfortunately, the FormData API is not able to capture the submitter information directly and requires manipulations to mimick the browser behaviour. Because of this, **Conform** provides the modified formData to you as well.
 
 ```tsx
 function Product() {
@@ -181,16 +175,16 @@ function Product() {
       event.preventDefault();
 
       // This will log `null`
-      console.log(new FormData(event.currentTarget).get('action'));
+      console.log(new FormData(event.currentTarget).get('intent'));
 
       // This will log `bookmark`
-      console.log(formData.get('action'));
+      console.log(formData.get('intent'));
     },
   });
 
   return (
     <form>
-      <button type="submit" name="action" value="bookmark">
+      <button type="submit" name="intent" value="bookmark">
         Bookmark
       </button>
     </form>
@@ -202,7 +196,7 @@ function Product() {
 
 ### Command button
 
-The submitter value makes it possible to extends the form with different behaviour based on the intent added to the form data.
+The submitter value allows us to extend the form with different behaviour based on the intent.
 
 ```tsx
 function Product() {
@@ -220,9 +214,9 @@ function Product() {
 }
 ```
 
-However, this also means we are poluting the form data with information that are used for controlling the behaviour of the form only.
+However, this polutes the form data with information used for controlling form behaviour only.
 
-**Conform** specializes this pattern by referring it as **Command button**. If the submitter name is prefixed with `conform/` (e.g. _conform/submit_), it will be excluded from the structured data (i.e. `submission.value`) with `submission.context` being _submit_ and `submission.intent` being _add-to-cart_ or _buy-now_.
+**Conform** specializes this pattern by referring it as a **command button**. If the submitter name is prefixed with `conform/`, e.g. _conform/submit_, it will be excluded from the value with `submission.type` being _submit_ and `submission.intent` being _add-to-cart_ or _buy-now_.
 
 ```tsx
 import { useForm } from '@conform-to/react';
@@ -233,7 +227,7 @@ function Product() {
       event.preventDefault();
 
       // This will log `submit`
-      console.log(submission.context);
+      console.log(submission.type);
 
       // This will log `add-to-cart` or `buy-now`
       console.log(submission.intent);
@@ -257,9 +251,9 @@ function Product() {
 }
 ```
 
-### Built-in commands
+### List Command
 
-Command button is also used internally. For example, [useFieldList](/packages/conform-react/README.md#usefieldlist) works by introducing a set of command buttons with `submission.context` being **list**:
+The [useFieldList](/packages/conform-react/README.md#usefieldlist) hook provide helpers to setup a button as command button. The button name will be `conform/list` and value will be generated based on the helper and config.
 
 ```tsx
 export default function Todos() {
@@ -272,24 +266,21 @@ export default function Todos() {
       <fieldset>
         <label>
           <div>Title</div>
-          <input type="text" name="title" required />
+          <input type="text" name={title.config.name} required />
         </label>
         <ul>
           {taskList.map((task, index) => (
             <li key={task.key}>
               <TaskFieldset title={`Task #${index + 1}`} {...task.config} />
+              {/* Command button 1 */}
               <button {...command.remove({ index })}>Delete</button>
-              <button {...command.reorder({ from: index, to: 0 })}>
-                Move to top
-              </button>
-              <button
-                {...command.replace({ index, defaultValue: { content: '' } })}
-              >
-                Clear
-              </button>
             </li>
           ))}
         </ul>
+        <div>
+          {/* Command button 2 */}
+          <button {...control.append()}>Add task</button>
+        </div>
       </fieldset>
       <button type="submit">Save</button>
     </form>
@@ -297,7 +288,9 @@ export default function Todos() {
 }
 ```
 
-Valdation is also done through command buttons. For details, please check the [Validation](./validation) section.
+### Validate command
+
+**Conform** does validation by clicking on a button named `conform/validate` with the name of the field that triggered the validation as its value. More details will be covered in the [validation](/docs/validation.md) section.
 
 ## Demo
 
diff --git a/docs/validation.md b/docs/validation.md
index 6d42c02a..af32adf3 100644
--- a/docs/validation.md
+++ b/docs/validation.md
@@ -1,67 +1,92 @@
 # Validation
 
-**Conform** adopts a `server-first` paradigma. It submits your form for server validation and uses client validation as a middleware.
+In this section, we will walk you through how to validate a signup form based on different requirements.
 
 <!-- aside -->
 
 ## Table of Contents
 
-- [Constraint Validation](#constraint-validation)
+- [Concept](#concept)
 - [Server Validation](#server-validation)
-  - [Schema Integration](#schema-integration)
-  - [Validating on-demand](#validating-on-demand)
+  - [Validate with a schema](#validate-with-a-schema)
 - [Client Validation](#client-validation)
-  - [Sharing logics](#sharing-logics)
-  - [Fallback](#fallback)
+- [Async Validation](#async-validation)
+  - [Setup a passthrough](#setup-a-passthrough)
+  - [Validate on-demand](#validate-on-demand)
 - [Demo](#demo)
 
 <!-- /aside -->
 
-## Server Validation
+## Concept
+
+Conform tries to simplify the mental model by utilizing a server-first validation flow which submits your form for validation. This is achieved by creating a hidden [command button](/docs/submission.md#command-button) and clicking on it whenever validation is needed.
 
-Your APIs should always validate the form data provided regardless if client validation is done well. There are also things that can only be validated server side, e.g. checking if an email is registered on the database. It could be considered the source of truth of your validation logic.
+Now, client validation can be treated as a way to shorten the feedback loop. You can also setup a [passthrough](#setup-a-passthrough) based on the client validation result to decide if the submission should be rejected with `event.preventDefault()`.
+
+## Server Validation
 
-For example, you can validate a login form in Remix as follow:
+**Conform** tries to makes it easy to validate the form data on the server. For example, you can validate a login form **fully server side** with Remix as shown below:
 
 ```tsx
-import { useForm, useFieldset, parse } from '@conform-to/react';
+import { parse, useFieldset, useForm } from '@conform-to/react';
 
-interface LoginForm {
+interface SignupForm {
   email: string;
   password: string;
+  confirmPassword: string;
 }
 
-export async function action({ request }) {
+export async function action({ request }: ActionArgs) {
   const formData = await request.formData();
-  const submission = parse<LoginForm>(formData);
+  const submission = parse<SignupForm>(formData);
 
-  if (!submission.value.email) {
-    submission.error.push(['email', 'Email is required']);
-  } else if (!submission.value.email.includes('@')) {
-    submission.error.push(['email', 'Email is invalid']);
-  }
+  try {
+    switch (submission.type) {
+      // The type will be `submit` by default
+      case 'submit':
+      // The type will be `validate` for validation
+      case 'validate':
+        if (!submission.value.email) {
+          submission.error.push(['email', 'Email is required']);
+        } else if (!submission.value.email.includes('@')) {
+          submission.error.push(['email', 'Email is invalid']);
+        }
+
+        if (!submission.value.password) {
+          submission.error.push(['password', 'Password is required']);
+        }
+
+        if (!submission.value.confirmPassword) {
+          submission.error.push([
+            'confirmPassword',
+            'Confirm password is required',
+          ]);
+        } else if (
+          submission.value.confirmPassword !== submission.value.password
+        ) {
+          submission.error.push(['confirmPassword', 'Password does not match']);
+        }
 
-  if (!submission.value.password) {
-    submission.error.push(['password', 'Password is required']);
-  }
+        /**
+         * Signup only when the user click on the submit button
+         * and no error found
+         */
+        if (submission.type === 'submit' && !hasError(submission.error)) {
+          return await signup(submission.value);
+        }
 
-  /**
-   * Try logging the user in only when the submission is intentional
-   * with no error found
-   */
-  if (submission.context !== 'validate' && submission.error.length === 0) {
-    try {
-      return await login(submission.value);
-    } catch (error) {
-      /**
-       * By specifying the key as '', the message will be
-       * treated as a form-level error and populated
-       * on the client side as `form.error`
-       */
-      submission.error.push(['', 'Login failed']);
+        break;
     }
+  } catch (error) {
+    /**
+     * By specifying the key as '', the message will be
+     * treated as a form-level error and populated
+     * on the client side as `form.error`
+     */
+    submission.error.push(['', 'Oops! Something went wrong.']);
   }
 
+  // Always sends the submission state back to client until the user is signed up
   return json({
     ...submission,
     value: {
@@ -71,238 +96,218 @@ export async function action({ request }) {
   });
 }
 
-export default function login() {
-  const state = useActionData();
-  const form = useForm({
+export default function Signup() {
+  // Last submission returned by the server
+  const state = useActionData<typeof action>();
+  const form = useForm<SignupForm>({
+    // Enable server validation mode
     mode: 'server-validation',
+
+    // Begin validating on blur
+    initialReport: 'onBlur',
+
+    // Sync the result of last submission
     state,
   });
-  const { email, password } = useFieldset(form.ref, form.config);
-
-  return (
-    <Form method="post" {...form.props}>
-      <div>{form.error}</div>
-      <input type="text" name="email" />
-      <div>{email.error}</div>
-      <input type="password" name="password" />
-      <div>{password.error}</div>
-    </Form>
-  );
+
+  // ...
 }
 ```
 
-### Schema Integration
+Try it out on [Codesandbox](https://codesandbox.io/s/github/edmundhung/conform/tree/main/examples/remix-run?initialpath=/server-validation&file=/app/routes/server-validation.tsx).
+
+### Validate with a schema
 
-Integrating with a schema validation library is simple. For example, you can integrate it with `zod` like this:
+Writing validation logic manually could be cumbersome. You can also use a schema validation library like [yup](https://github.com/jquense/yup) or [zod](https://github.com/colinhacks/zod):
 
 ```tsx
-import { parse } from '@conform-to/react';
 import { formatError } from '@conform-to/zod';
 import { z } from 'zod';
 
-export async function action({ request }) {
-  const formData = await request.formData();
-  const submission = parse(formData);
-  const schema = z.object({
+const schema = z
+  .object({
     email: z.string().min(1, 'Email is required').email('Email is invalid'),
     password: z.string().min(1, 'Password is required'),
+    confirmPassword: z.string().min(1, 'Confirm Password is required'),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Password does not match',
+    path: ['confirmPassword'],
   });
 
+export async function action({ request }: ActionArgs) {
+  const formData = await request.formData();
+  const submission = parse(formData);
+
   try {
-    const data = schema.parse(submission.value);
+    switch (submission.type) {
+      case 'validate':
+      case 'submit': {
+        const data = schema.parse(submission.value);
+
+        if (submission.type === 'submit') {
+          return await signup(data);
+        }
 
-    if (submission.context === 'submit') {
-      return await login(result.data);
+        break;
+      }
     }
   } catch (error) {
-    /**
-     * The `formatError` helpers simply resolves the ZodError to
-     * a set of key/value pairs which refers to the name and
-     * error of each field.
-     */
-    submission.error = submission.error.concat(formatError(error));
+    submission.error.push(...formatError(error));
   }
 
-  return submission;
+  return json(submission);
 }
 ```
 
-### Validating on-demand
-
-Some validation rule could be expensive especially when it requires query result from database or even 3rd party services. This can be minimized by checking the submission context and intent, or using the `shouldValidate()` helper.
-
-```tsx
-import { parse, shouldValidate } from '@conform-to/react';
-
-export async function action({ request }) {
-  const formData = await request.formData();
-  const submission = parse(formData);
-
-  if (!submission.value.email) {
-    submission.error.push(['email', 'Email is required']);
-  } else if (!submission.value.email.includes('@')) {
-    submission.error.push(['email', 'Email is invalid']);
-  } else if (
-    // Continue checking only if necessary
-    shouldValidate(submission, 'email') &&
-    // e.g. Verifying if the email exists on the database (Example only)
-    (await isRegistered(submission.value.email))
-  ) {
-    submission.error.push(['email', 'Email is not registered']);
-  }
-
-  if (!submission.value.password) {
-    submission.error.push(['password', 'Password is required']);
-  }
-
-  /* ... */
-}
-```
+Try it out on [Codesandbox](https://codesandbox.io/s/github/edmundhung/conform/tree/main/examples/remix-run?initialpath=/zod&file=/app/routes/zod.tsx).
 
 ## Client Validation
 
-With proper server validation in place, client validation serves two main purposes:
-
-1. Shorten the feedback loop due to network latency
-2. Reduce server load caused by validation
-
-### Sharing logics
-
-For example, you can share validation logics between the server and client.
+Validating fully on server side is great. But, if network latency is a concern, we can also validate on the client side to shorten the feedback loop.
 
 ```tsx
-import type { Submission } from '@conform-to/react';
-import { useForm, useFieldset, parse } from '@conform-to/react';
-
-interface LoginForm {
-  email: string;
-  password: string;
-}
-
-/**
- * Move the validation logic out so it can be used
- * on both client and server side
- */
-function validate(submission: Submission<LoginForm>): Array<[string, string]> {
-  const error: Array<[string, string]> = [];
-
-  if (!submission.value.email) {
-    error.push(['email', 'Email is required']);
-  } else if (!submission.value.email.includes('@')) {
-    error.push(['email', 'Email is invalid']);
-  }
+import { useForm } from '@conform-to/react';
+import { validate } from '@conform-to/zod';
 
-  if (!submission.value.password) {
-    error.push(['password', 'Password is required']);
-  }
-
-  return error;
-}
-
-export async function action({ request }) {
-  const formData = await request.formData();
-  const submission = parse<LoginForm>(formData);
-  const error = validate(submission);
-
-  if (submission.context !== 'validate' && error.length === 0) {
-    try {
-      return await login(submission.value);
-    } catch (error) {
-      error.push(['', 'Login failed']);
-    }
-  }
-
-  return json({
-    ...submission,
-    value: {
-      email: submission.value.email,
-    },
-    error: submission.error.concat(error),
+const schema = z
+  .object({
+    email: z.string().min(1, 'Email is required').email('Email is invalid'),
+    password: z.string().min(1, 'Password is required'),
+    confirmPassword: z.string().min(1, 'Confirm Password is required'),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Password does not match',
+    path: ['confirmPassword'],
   });
+
+export async function action({ request }: ActionArgs) {
+  // ...
 }
 
-export default function login() {
+export default function Signup() {
   const state = useActionData();
   const form = useForm({
-    mode: 'server-validation',
+    /**
+     * Changing the mode to `client-only` as the client
+     * validation does exactly the same checks as the
+     * server now. There is no need to confirm with the
+     * server again.
+     *
+     * This can be omitted directly as it is the default mode
+     */
+    mode: 'client-only',
+
     state,
-    onValidate({ form, submission }) {
-      // Reuse the validation logic
-      return validate(submission);
-    },
 
-    onSubmit(event, { submission }) {
+    // Setup client validation
+    onValidate({ formData }) {
       /**
-       * This can be removed by specifying the `mode` as
-       * 'client-only' instead of `server-validation`
+       * The `validate` helper will parse the formData
+       * and returns the submission state with the validation
+       * error
        */
-      if (submission.context === 'validate') {
-        /**
-         * As the client validation cover all the checks,
-         * there is no need to be validated by the server.
-         */
-        event.preventDefault();
-      }
+      return validate(formData, schema);
     },
   });
-  const { email, password } = useFieldset(form.ref, form.config);
-
-  return (
-    <Form method="post" {...form.props}>
-      <div>{form.error}</div>
-      <input type="text" name="email" />
-      <div>{email.error}</div>
-      <input type="password" name="password" />
-      <div>{password.error}</div>
-    </Form>
-  );
+
+  // ...
 }
 ```
 
-### Fallback
+## Async valdiation
+
+Everything we did so far looks great, until one day, the requirment is changed. Now your user should also provide a _username_ which has to be **unique**. There are 2 situations here:
+
+1. If you are validating fully on the server, just query the database and add an error message if it is used.
+2. If you are validating also on the client, then you need to setup a **passthrough**.
+
+### Setup a passthrough
 
-However, sometimes not every validation rules can be applied client side. Let's fallback to the server.
+A **passthrough** is a logic gate that allows a submission to "pass through" based on the submission state.
 
 ```tsx
-import type { Submission } from '@conform-to/react';
 import { hasError } from '@conform-to/react';
 
 export function action() {
-  // No change from the previous example
+  // ...
 }
 
-export default function login() {
+export default function Signup() {
   const state = useActionData();
   const form = useForm({
+    /**
+     * Changing the mode back to `server-validation`
+     * as you want to confirm with the server now.
+     */
     mode: 'server-validation',
     state,
-    onValidate({ form, submission }) {
-      return validate(submission);
+    onValidate({ formData }) {
+      // ...
     },
-
     onSubmit(event, { submission }) {
       /**
-       *  Do not block the submission when validating email
+       * Let the submission passthrough if it is validating
+       * the username field and no error found on the client
        */
       if (
-        submission.context === 'validate' &&
-        (submission.intent !== 'email' || hasError(error, 'email'))
+        submission.type === 'validate' &&
+        (submission.intent !== 'username' || hasError(error, 'username'))
       ) {
         event.preventDefault();
       }
     },
   });
-  const { email, password } = useFieldset(form.ref, form.config);
-
-  return (
-    <Form method="post" {...form.props}>
-      <div>{form.error}</div>
-      <input type="text" name="email" />
-      <div>{email.error}</div>
-      <input type="password" name="password" />
-      <div>{password.error}</div>
-    </Form>
-  );
+
+  // ...
+}
+```
+
+### Validate on-demand
+
+Some validation rules could be expensive especially when they require querying from database or 3rd party services. This can be minimized by checking the submission type and intent, or using the `shouldValidate()` helper.
+
+```tsx
+import { parse, shouldValidate } from '@conform-to/react';
+
+export async function action({ request }: ActionArgs) {
+  const formData = await request.formData();
+  const submission = parse(formData);
+
+  try {
+    switch (submission.type) {
+      case 'validate':
+      case 'submit': {
+        const data = await schema
+          .refine(
+            async ({ username }) => {
+              // Continue checking only if necessary
+              if (!shouldValidate(submission, 'username')) {
+                return true;
+              }
+
+              // Verifying if the username is already registed
+              return await isUsernameUnique(username);
+            },
+            {
+              message: 'Username is already used',
+              path: ['username'],
+            },
+          )
+          .parseAsync(submission.value);
+
+        if (submission.type === 'submit') {
+          return await signup(data);
+        }
+
+        break;
+      }
+    }
+  } catch (error) {
+    submission.error.push(...formatError(error));
+  }
+
+  return json(submission);
 }
 ```
 
diff --git a/examples/basic/src/App.tsx b/examples/basic/src/App.tsx
index 4a4b4098..7fd112c2 100644
--- a/examples/basic/src/App.tsx
+++ b/examples/basic/src/App.tsx
@@ -1,22 +1,46 @@
-import { useForm, useFieldset } from '@conform-to/react';
+import {
+	useForm,
+	useFieldset,
+	parse,
+	getFormElements,
+} from '@conform-to/react';
 
 export default function LoginForm() {
-	/**
-	 * The useForm hook let you take control of the browser
-	 * validation flow and customize it
-	 */
 	const form = useForm({
+		initialReport: 'onBlur',
+		onValidate({ form, formData }) {
+			const submission = parse(formData);
+
+			for (const element of getFormElements(form)) {
+				switch (element.name) {
+					case 'email': {
+						if (element.validity.valueMissing) {
+							submission.error.push([element.name, 'Email is required']);
+						} else if (element.validity.typeMismatch) {
+							submission.error.push([element.name, 'Email is invalid']);
+						} else if (!element.value.endsWith('gmail.com')) {
+							submission.error.push([element.name, 'Only gmail is accepted']);
+						}
+						break;
+					}
+					case 'password': {
+						if (element.validity.valueMissing) {
+							submission.error.push([element.name, 'Password is required']);
+						}
+						break;
+					}
+				}
+			}
+
+			return submission;
+		},
 		onSubmit(event, { formData }) {
 			event.preventDefault();
 
 			console.log(Object.fromEntries(formData));
 		},
 	});
-	/**
-	 * The useFieldset hook let you subscribe to the state
-	 * of each field
-	 */
-	const { email, password } = useFieldset(form.ref);
+	const { email, password } = useFieldset(form.ref, form.config);
 
 	return (
 		<form {...form.props}>
diff --git a/examples/remix-run/README.md b/examples/remix-run/README.md
index fdd8b95c..cff39f05 100644
--- a/examples/remix-run/README.md
+++ b/examples/remix-run/README.md
@@ -1,43 +1,9 @@
-# Remix Integration
+# Remix Example
 
-This page shows you how to integrate conform with Remix. All examples works without JavaScript.
+This example shows you how to how you can use Remix to build a progressively enhanced todos list with [useFieldList](/packages/conform-react/README.md#usefieldlist) and the [conform](/packages/conform-react/README.md#conform) helpers.
 
-<!-- aside -->
+<!-- sandbox src="/examples/remix-run?initialpath=/todos&module=/app/routes/todos.tsx" -->
 
-## Table of Contents
-
-- [Basic setup](#basic-setup)
-- [Server validation with Zod](#server-validation-with-zod)
-- [Client validation with fallback](#client-validation-with-fallback)
-
-<!-- /aside -->
-
-## Basic setup
-
-To begin, let's build a basic login form with Remix.
-
-<!-- sandbox src="/examples/remix-run?initialpath=/basic&module=/app/routes/basic.tsx&runonclick=1" -->
-
-Try it out on [Codesandbox](https://codesandbox.io/s/github/edmundhung/conform/tree/main/examples/remix-run?initialpath=/basic&file=/app/routes/basic.tsx).
-
-<!-- /sandbox -->
-
-## Server validation with Zod
-
-Hand writting validation is error-prone. How about using **Zod**?
-
-<!-- sandbox src="/examples/remix-run?initialpath=/zod&module=/app/routes/zod.tsx&runonclick=1" -->
-
-Try it out on [Codesandbox](https://codesandbox.io/s/github/edmundhung/conform/tree/main/examples/remix-run?initialpath=/zod&file=/app/routes/zod.tsx).
-
-<!-- /sandbox -->
-
-## Client validation with fallback
-
-Server validation is good enough for many cases. But we can further improve the UX by shorten the feedback loop with client validation.
-
-<!-- sandbox src="/examples/remix-run?initialpath=/async-validation&module=/app/routes/async-validation.tsx&runonclick=1" -->
-
-Try it out on [Codesandbox](https://codesandbox.io/s/github/edmundhung/conform/tree/main/examples/remix-run?initialpath=/async-validation&file=/app/routes/async-validation.tsx).
+Try it out on [Codesandbox](https://codesandbox.io/s/github/edmundhung/conform/tree/main/examples/remix-run?initialpath=/todos&file=/app/routes/todos.tsx).
 
 <!-- /sandbox -->
diff --git a/examples/remix-run/app/routes/async-validation.tsx b/examples/remix-run/app/routes/async-validation.tsx
index 223eeda5..66a47efd 100644
--- a/examples/remix-run/app/routes/async-validation.tsx
+++ b/examples/remix-run/app/routes/async-validation.tsx
@@ -6,27 +6,39 @@ import {
 	hasError,
 	shouldValidate,
 } from '@conform-to/react';
-import { formatError } from '@conform-to/zod';
+import { formatError, validate } from '@conform-to/zod';
 import type { ActionArgs } from '@remix-run/node';
-import { json, redirect } from '@remix-run/node';
+import { json } from '@remix-run/node';
 import { Form, useActionData } from '@remix-run/react';
 import { z } from 'zod';
 
-const schema = z.object({
-	name: z.string().min(1, 'Name is required'),
-	email: z.string().min(1, 'Email is required').email('Email is invalid'),
-	title: z.string().min(1, 'Title is required').max(20, 'Title is too long'),
-});
+const schema = z
+	.object({
+		email: z.string().min(1, 'Email is required').email('Email is invalid'),
+		username: z
+			.string()
+			.min(1, 'Username is required')
+			.regex(
+				/^[a-zA-Z0-9]+$/,
+				'Invalid username: only letters or numbers are allowed',
+			),
+		password: z.string().min(1, 'Password is required'),
+		confirmPassword: z.string().min(1, 'Confirm Password is required'),
+	})
+	.refine((data) => data.password === data.confirmPassword, {
+		message: 'Password does not match',
+		path: ['confirmPassword'],
+	});
 
-async function isEmailUnique(email: string): Promise<boolean> {
+async function isUsernameUnique(username: string): Promise<boolean> {
 	return new Promise((resolve) => {
 		setTimeout(() => {
-			resolve(email !== 'me@edmund.dev');
-		}, Math.random() * 100);
+			resolve(username !== 'edmundhung');
+		}, Math.random() * 200);
 	});
 }
 
-async function createEmployee(data: z.infer<typeof schema>): Promise<void> {
+async function signup(data: z.infer<typeof schema>): Promise<Response> {
 	throw new Error('Not implemented');
 }
 
@@ -35,75 +47,74 @@ export async function action({ request }: ActionArgs) {
 	const submission = parse(formData);
 
 	try {
-		const data = await schema
-			.refine(
-				async (employee) => {
-					if (!shouldValidate(submission, 'email')) {
-						return true;
-					}
+		switch (submission.type) {
+			case 'validate':
+			case 'submit': {
+				const data = await schema
+					.refine(
+						async ({ username }) => {
+							if (!shouldValidate(submission, 'username')) {
+								return true;
+							}
 
-					return await isEmailUnique(employee.email);
-				},
-				{
-					message: 'Email is already used',
-					path: ['email'],
-				},
-			)
-			.parseAsync(submission.value);
+							return await isUsernameUnique(username);
+						},
+						{
+							message: 'Username is already used',
+							path: ['username'],
+						},
+					)
+					.parseAsync(submission.value);
 
-		if (submission.context === 'submit') {
-			await createEmployee(data);
+				if (submission.type === 'submit') {
+					return await signup(data);
+				}
 
-			return redirect('/');
+				break;
+			}
 		}
 	} catch (error) {
-		submission.error = submission.error.concat(formatError(error));
+		submission.error.push(...formatError(error));
 	}
 
-	return json(submission);
+	return json({
+		...submission,
+		value: {
+			email: submission.value.email,
+		},
+	});
 }
 
-export default function EmployeeForm() {
+export default function Signup() {
 	const state = useActionData<typeof action>();
-	const form = useForm<z.infer<typeof schema>>({
+	const form = useForm({
 		mode: 'server-validation',
 		initialReport: 'onBlur',
 		state,
-		onValidate({ submission }) {
-			const result = schema.safeParse(submission.value);
-
-			if (result.success) {
-				return [];
-			}
-
-			return formatError(result.error);
+		onValidate({ formData }) {
+			return validate(formData, schema);
 		},
-		// onSubmit will be triggered only if the submission is valid
 		onSubmit(event, { submission }) {
 			// Only the email field requires additional validation from the server
 			// We trust the client result otherwise
 			if (
-				submission.context === 'validate' &&
-				(submission.intent !== 'email' || hasError(submission.error, ['email']))
+				submission.type === 'validate' &&
+				(submission.intent !== 'username' ||
+					hasError(submission.error, 'username'))
 			) {
 				event.preventDefault();
 			}
 		},
 	});
-	const { name, email, title } = useFieldset(form.ref, form.config);
+	const { email, username, password, confirmPassword } = useFieldset(
+		form.ref,
+		form.config,
+	);
 
 	return (
 		<Form method="post" {...form.props}>
 			<fieldset>
 				<legend>{form.error}</legend>
-				<label>
-					<div>Name</div>
-					<input
-						className={name.error ? 'error' : ''}
-						{...conform.input(name.config)}
-					/>
-					<div>{name.error}</div>
-				</label>
 				<label>
 					<div>Email</div>
 					<input
@@ -113,15 +124,31 @@ export default function EmployeeForm() {
 					<div>{email.error}</div>
 				</label>
 				<label>
-					<div>Title</div>
+					<div>Username</div>
+					<input
+						className={username.error ? 'error' : ''}
+						{...conform.input(username.config)}
+					/>
+					<div>{username.error}</div>
+				</label>
+				<label>
+					<div>Password</div>
+					<input
+						className={password.error ? 'error' : ''}
+						{...conform.input(password.config, { type: 'password' })}
+					/>
+					<div>{password.error}</div>
+				</label>
+				<label>
+					<div>Confirm Password</div>
 					<input
-						className={title.error ? 'error' : ''}
-						{...conform.input(title.config)}
+						className={confirmPassword.error ? 'error' : ''}
+						{...conform.input(confirmPassword.config, { type: 'password' })}
 					/>
-					<div>{title.error}</div>
+					<div>{confirmPassword.error}</div>
 				</label>
 			</fieldset>
-			<button type="submit">Save</button>
+			<button type="submit">Signup</button>
 		</Form>
 	);
 }
diff --git a/examples/remix-run/app/routes/basic.tsx b/examples/remix-run/app/routes/basic.tsx
deleted file mode 100644
index 4be32ad5..00000000
--- a/examples/remix-run/app/routes/basic.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import type { Submission } from '@conform-to/react';
-import { conform, parse, useFieldset, useForm } from '@conform-to/react';
-import type { ActionArgs } from '@remix-run/node';
-import { json, redirect } from '@remix-run/node';
-import { Form, useActionData } from '@remix-run/react';
-
-interface Employee {
-	name: string;
-	email: string;
-	title: string;
-}
-
-// Async validation. e.g. checking if an email is registered on a database
-async function isEmailUnique(email: string): Promise<boolean> {
-	return new Promise((resolve) => {
-		setTimeout(() => {
-			resolve(email !== 'me@edmund.dev');
-		}, Math.random() * 100);
-	});
-}
-
-// Handle writting validation rules...
-async function validate(submission: Submission<Employee>) {
-	const error = [...submission.error];
-
-	if (!submission.value.name) {
-		error.push(['name', 'Name is required']);
-	}
-
-	if (!submission.value.email) {
-		error.push(['email', 'Email is required']);
-	} else if (!submission.value.email.includes('@')) {
-		error.push(['email', 'Email is invalid']);
-	} else if (!(await isEmailUnique(submission.value.email))) {
-		error.push(['email', 'Email is  is already used']);
-	}
-
-	if (!submission.value.title) {
-		error.push(['title', 'Title is required']);
-	} else if (submission.value.title.length > 20) {
-		error.push(['title', 'Title is too long']);
-	}
-
-	return error;
-}
-
-async function createEmployee(data: Employee): Promise<void> {
-	throw new Error('Not implemented');
-}
-
-export async function action({ request }: ActionArgs) {
-	const formData = await request.formData();
-	const submission = parse<Employee>(formData);
-	const error = await validate(submission);
-
-	if (error.length === 0) {
-		try {
-			// Check if it is default submission
-			if (submission.context === 'submit') {
-				await createEmployee(submission.value as Employee);
-				return redirect('/');
-			}
-		} catch (e) {
-			error.push(
-				// Empty string key means form level error
-				['', e instanceof Error ? e.message : 'Oops! Something went wrong.'],
-			);
-		}
-	}
-
-	return json({ ...submission, error });
-}
-
-export default function LoginForm() {
-	// Last submission returned by the server
-	const state = useActionData<typeof action>();
-	const form = useForm<Employee>({
-		// Enable server validation mode
-		mode: 'server-validation',
-
-		// Begin validating on blur
-		initialReport: 'onBlur',
-
-		// Sync the result of last submission
-		state,
-	});
-	const { name, email, title } = useFieldset(form.ref, form.config);
-
-	return (
-		<Form method="post" {...form.props}>
-			<fieldset>
-				<legend>{form.error}</legend>
-				<label>
-					<div>Name</div>
-					<input
-						className={name.error ? 'error' : ''}
-						{...conform.input(name.config)}
-					/>
-					<div>{name.error}</div>
-				</label>
-				<label>
-					<div>Email</div>
-					<input
-						className={email.error ? 'error' : ''}
-						{...conform.input(email.config)}
-					/>
-					<div>{email.error}</div>
-				</label>
-				<label>
-					<div>Title</div>
-					<input
-						className={title.error ? 'error' : ''}
-						{...conform.input(title.config)}
-					/>
-					<div>{title.error}</div>
-				</label>
-			</fieldset>
-			<button type="submit">Save</button>
-		</Form>
-	);
-}
diff --git a/examples/remix-run/app/routes/index.tsx b/examples/remix-run/app/routes/index.tsx
index 29501668..fef041dd 100644
--- a/examples/remix-run/app/routes/index.tsx
+++ b/examples/remix-run/app/routes/index.tsx
@@ -4,13 +4,16 @@ export default function Index() {
 	return (
 		<ul>
 			<li>
-				<Link to="basic">Basic setup</Link>
+				<Link to="server-validation">Server validation</Link>
 			</li>
 			<li>
 				<Link to="zod">Server validation with Zod</Link>
 			</li>
 			<li>
-				<Link to="async-validation">Client validation with fallback</Link>
+				<Link to="async-validation">Client validation with passthrough</Link>
+			</li>
+			<li>
+				<Link to="todos">Todos list</Link>
 			</li>
 		</ul>
 	);
diff --git a/examples/remix-run/app/routes/server-validation.tsx b/examples/remix-run/app/routes/server-validation.tsx
new file mode 100644
index 00000000..f08b0a84
--- /dev/null
+++ b/examples/remix-run/app/routes/server-validation.tsx
@@ -0,0 +1,132 @@
+import {
+	conform,
+	parse,
+	hasError,
+	useFieldset,
+	useForm,
+} from '@conform-to/react';
+import type { ActionArgs } from '@remix-run/node';
+import { json } from '@remix-run/node';
+import { Form, useActionData } from '@remix-run/react';
+
+interface SignupForm {
+	email: string;
+	password: string;
+	confirmPassword: string;
+}
+
+async function signup(data: unknown) {
+	throw new Error('Not implemented');
+}
+
+export async function action({ request }: ActionArgs) {
+	const formData = await request.formData();
+	const submission = parse<SignupForm>(formData);
+
+	try {
+		switch (submission.type) {
+			// The type will be `submit` by default
+			case 'submit':
+			// The type will be `validate` on validation
+			case 'validate':
+				if (!submission.value.email) {
+					submission.error.push(['email', 'Email is required']);
+				} else if (!submission.value.email.includes('@')) {
+					submission.error.push(['email', 'Email is invalid']);
+				}
+
+				if (!submission.value.password) {
+					submission.error.push(['password', 'Password is required']);
+				}
+
+				if (!submission.value.confirmPassword) {
+					submission.error.push([
+						'confirmPassword',
+						'Confirm password is required',
+					]);
+				} else if (
+					submission.value.confirmPassword !== submission.value.password
+				) {
+					submission.error.push(['confirmPassword', 'Password does not match']);
+				}
+
+				/**
+				 * Signup only when the user click on the submit button
+				 * and no error found
+				 */
+				if (submission.type === 'submit' && !hasError(submission.error)) {
+					return await signup(submission.value);
+				}
+
+				break;
+		}
+	} catch (error) {
+		/**
+		 * By specifying the key as '', the message will be
+		 * treated as a form-level error and populated
+		 * on the client side as `form.error`
+		 */
+		submission.error.push(['', 'Oops! Something went wrong.']);
+	}
+
+	// Always sends the submission state back to client until the user is signed up
+	return json({
+		...submission,
+		value: {
+			// Never send the password back to client
+			email: submission.value.email,
+		},
+	});
+}
+
+export default function Signup() {
+	// Last submission returned by the server
+	const state = useActionData<typeof action>();
+	const form = useForm<SignupForm>({
+		// Enable server validation mode
+		mode: 'server-validation',
+
+		// Begin validating on blur
+		initialReport: 'onBlur',
+
+		// Sync the result of last submission
+		state,
+	});
+	const { email, password, confirmPassword } = useFieldset(
+		form.ref,
+		form.config,
+	);
+
+	return (
+		<Form method="post" {...form.props}>
+			<fieldset>
+				<legend>{form.error}</legend>
+				<label>
+					<div>Email</div>
+					<input
+						className={email.error ? 'error' : ''}
+						{...conform.input(email.config)}
+					/>
+					<div>{email.error}</div>
+				</label>
+				<label>
+					<div>Password</div>
+					<input
+						className={password.error ? 'error' : ''}
+						{...conform.input(password.config, { type: 'password' })}
+					/>
+					<div>{password.error}</div>
+				</label>
+				<label>
+					<div>Confirm Password</div>
+					<input
+						className={confirmPassword.error ? 'error' : ''}
+						{...conform.input(confirmPassword.config, { type: 'password' })}
+					/>
+					<div>{confirmPassword.error}</div>
+				</label>
+			</fieldset>
+			<button type="submit">Signup</button>
+		</Form>
+	);
+}
diff --git a/examples/remix-run/app/routes/todos.tsx b/examples/remix-run/app/routes/todos.tsx
new file mode 100644
index 00000000..ba7edd75
--- /dev/null
+++ b/examples/remix-run/app/routes/todos.tsx
@@ -0,0 +1,133 @@
+import type { FieldsetConfig } from '@conform-to/react';
+import {
+	useForm,
+	useFieldset,
+	useFieldList,
+	conform,
+	parse,
+} from '@conform-to/react';
+import { formatError, validate } from '@conform-to/zod';
+import type { ActionArgs } from '@remix-run/node';
+import { json } from '@remix-run/node';
+import { Form, useActionData } from '@remix-run/react';
+import { useRef } from 'react';
+import { z } from 'zod';
+
+const taskSchema = z.object({
+	content: z.string().min(1, 'Content is required'),
+	completed: z.preprocess((value) => value === 'yes', z.boolean().optional()),
+});
+
+const todosSchema = z.object({
+	title: z.string().min(1, 'Title is required'),
+	tasks: z.array(taskSchema).min(1),
+});
+
+function createTodos(data: unknown) {
+	throw new Error('Not implemented');
+}
+
+export let action = async ({ request }: ActionArgs) => {
+	const formData = await request.formData();
+	const submission = parse(formData);
+
+	try {
+		switch (submission.type) {
+			case 'submit':
+			case 'validate': {
+				const data = todosSchema.parse(submission.value);
+
+				if (submission.type === 'submit') {
+					return await createTodos(data);
+				}
+			}
+		}
+	} catch (error) {
+		submission.error.push(...formatError(error));
+	}
+
+	return json(submission);
+};
+
+export default function TodoForm() {
+	const state = useActionData<typeof action>();
+	const form = useForm<z.infer<typeof todosSchema>>({
+		initialReport: 'onBlur',
+		state,
+		onValidate({ formData }) {
+			return validate(formData, todosSchema);
+		},
+	});
+	const { title, tasks } = useFieldset(form.ref, form.config);
+	const [taskList, command] = useFieldList(form.ref, tasks.config);
+
+	return (
+		<Form method="post" {...form.props}>
+			<fieldset>
+				<legend>{form.error}</legend>
+				<label>
+					<div>Title</div>
+					<input
+						className={title.error ? 'error' : ''}
+						{...conform.input(title.config)}
+					/>
+					<div>{title.error}</div>
+				</label>
+				<ul>
+					{taskList.map((task, index) => (
+						<li key={task.key}>
+							<TaskFieldset title={`Task #${index + 1}`} {...task.config} />
+							<button {...command.remove({ index })}>Delete</button>
+							<button {...command.reorder({ from: index, to: 0 })}>
+								Move to top
+							</button>
+							<button
+								{...command.replace({ index, defaultValue: { content: '' } })}
+							>
+								Clear
+							</button>
+						</li>
+					))}
+				</ul>
+				<div>
+					<button {...command.append()}>Add task</button>
+				</div>
+			</fieldset>
+			<button type="submit">Save</button>
+		</Form>
+	);
+}
+
+interface TaskFieldsetProps extends FieldsetConfig<z.infer<typeof taskSchema>> {
+	title: string;
+}
+
+function TaskFieldset({ title, ...config }: TaskFieldsetProps) {
+	const ref = useRef<HTMLFieldSetElement>(null);
+	const { content, completed } = useFieldset(ref, config);
+
+	return (
+		<fieldset ref={ref}>
+			<label>
+				<div>{title}</div>
+				<input
+					className={content.error ? 'error' : ''}
+					{...conform.input(content.config)}
+				/>
+				<div>{content.error}</div>
+			</label>
+			<div>
+				<label>
+					<span>Completed</span>
+					<input
+						className={completed.error ? 'error' : ''}
+						{...conform.input(completed.config, {
+							type: 'checkbox',
+							value: 'yes',
+						})}
+					/>
+				</label>
+			</div>
+		</fieldset>
+	);
+}
diff --git a/examples/remix-run/app/routes/zod.tsx b/examples/remix-run/app/routes/zod.tsx
index cc7ab6db..a15f0a89 100644
--- a/examples/remix-run/app/routes/zod.tsx
+++ b/examples/remix-run/app/routes/zod.tsx
@@ -1,89 +1,70 @@
-import {
-	conform,
-	parse,
-	shouldValidate,
-	useFieldset,
-	useForm,
-} from '@conform-to/react';
+import { conform, parse, useFieldset, useForm } from '@conform-to/react';
 import { formatError } from '@conform-to/zod';
 import type { ActionArgs } from '@remix-run/node';
-import { json, redirect } from '@remix-run/node';
+import { json } from '@remix-run/node';
 import { Form, useActionData } from '@remix-run/react';
 import { z } from 'zod';
 
-const schema = z.object({
-	name: z.string().min(1, 'Name is required'),
-	email: z.string().min(1, 'Email is required').email('Email is invalid'),
-	title: z.string().min(1, 'Title is required').max(20, 'Title is too long'),
-});
-
-async function isEmailUnique(email: string): Promise<boolean> {
-	return new Promise((resolve) => {
-		setTimeout(() => {
-			resolve(email !== 'me@edmund.dev');
-		}, Math.random() * 100);
+const schema = z
+	.object({
+		email: z.string().min(1, 'Email is required').email('Email is invalid'),
+		password: z.string().min(1, 'Password is required'),
+		confirmPassword: z.string().min(1, 'Confirm Password is required'),
+	})
+	.refine((data) => data.password === data.confirmPassword, {
+		message: 'Password does not match',
+		path: ['confirmPassword'],
 	});
-}
 
-async function createEmployee(data: z.infer<typeof schema>): Promise<void> {
+async function signup(data: unknown) {
 	throw new Error('Not implemented');
 }
 
 export async function action({ request }: ActionArgs) {
 	const formData = await request.formData();
-	const submission = parse(formData);
+	const submission = parse<z.infer<typeof schema>>(formData);
 
 	try {
-		const data = await schema
-			.refine(
-				async (employee) => {
-					// Validate only if necessary
-					if (!shouldValidate(submission, 'email')) {
-						return true;
-					}
+		switch (submission.type) {
+			case 'validate':
+			case 'submit': {
+				const data = schema.parse(submission.value);
 
-					return await isEmailUnique(employee.email);
-				},
-				{
-					message: 'Email is already used',
-					path: ['email'],
-				},
-			)
-			.parseAsync(submission.value);
+				if (submission.type === 'submit') {
+					return await signup(data);
+				}
 
-		if (submission.context === 'submit') {
-			await createEmployee(data);
-
-			return redirect('/');
+				break;
+			}
 		}
 	} catch (error) {
-		submission.error = submission.error.concat(formatError(error));
+		submission.error.push(...formatError(error));
 	}
 
-	return json(submission);
+	return json({
+		...submission,
+		value: {
+			email: submission.value.email,
+		},
+	});
 }
 
-export default function EmployeeForm() {
+export default function Signup() {
 	const state = useActionData<typeof action>();
 	const form = useForm<z.infer<typeof schema>>({
 		mode: 'server-validation',
 		initialReport: 'onBlur',
 		state,
 	});
-	const { name, email, title } = useFieldset(form.ref, form.config);
+	const { email, password, confirmPassword } = useFieldset(
+		form.ref,
+		form.config,
+	);
 
 	return (
 		<Form method="post" {...form.props}>
 			<fieldset>
 				<legend>{form.error}</legend>
-				<label>
-					<div>Name</div>
-					<input
-						className={name.error ? 'error' : ''}
-						{...conform.input(name.config)}
-					/>
-					<div>{name.error}</div>
-				</label>
 				<label>
 					<div>Email</div>
 					<input
@@ -93,15 +74,23 @@ export default function EmployeeForm() {
 					<div>{email.error}</div>
 				</label>
 				<label>
-					<div>Title</div>
+					<div>Password</div>
+					<input
+						className={password.error ? 'error' : ''}
+						{...conform.input(password.config, { type: 'password' })}
+					/>
+					<div>{password.error}</div>
+				</label>
+				<label>
+					<div>Confirm Password</div>
 					<input
-						className={title.error ? 'error' : ''}
-						{...conform.input(title.config)}
+						className={confirmPassword.error ? 'error' : ''}
+						{...conform.input(confirmPassword.config, { type: 'password' })}
 					/>
-					<div>{title.error}</div>
+					<div>{confirmPassword.error}</div>
 				</label>
 			</fieldset>
-			<button type="submit">Save</button>
+			<button type="submit">Signup</button>
 		</Form>
 	);
 }
diff --git a/examples/todos/src/App.tsx b/examples/todos/src/App.tsx
index 1b3055c0..4592af3c 100644
--- a/examples/todos/src/App.tsx
+++ b/examples/todos/src/App.tsx
@@ -22,7 +22,7 @@ export default function TodoForm() {
 		},
 	});
 	const { title, tasks } = useFieldset(form.ref, form.config);
-	const [taskList, control] = useFieldList(form.ref, tasks.config);
+	const [taskList, command] = useFieldList(form.ref, tasks.config);
 
 	return (
 		<form {...form.props}>
@@ -36,12 +36,12 @@ export default function TodoForm() {
 					{taskList.map((task, index) => (
 						<li key={task.key}>
 							<TaskFieldset title={`Task #${index + 1}`} {...task.config} />
-							<button {...control.remove({ index })}>Delete</button>
-							<button {...control.reorder({ from: index, to: 0 })}>
+							<button {...command.remove({ index })}>Delete</button>
+							<button {...command.reorder({ from: index, to: 0 })}>
 								Move to top
 							</button>
 							<button
-								{...control.replace({ index, defaultValue: { content: '' } })}
+								{...command.replace({ index, defaultValue: { content: '' } })}
 							>
 								Clear
 							</button>
@@ -49,7 +49,7 @@ export default function TodoForm() {
 					))}
 				</ul>
 				<div>
-					<button {...control.append()}>Add task</button>
+					<button {...command.append()}>Add task</button>
 				</div>
 			</fieldset>
 			<button type="submit">Save</button>
diff --git a/examples/yup/README.md b/examples/yup/README.md
index 69995b25..490fd855 100644
--- a/examples/yup/README.md
+++ b/examples/yup/README.md
@@ -1,6 +1,6 @@
 # Yup Example
 
-This example shows you how to validate the submission value using [yup](https://github.com/jquense/yup) and resolve the result with the [formatError](/packages/conform-yup/README.md#formatError) helper.
+This example shows you how to validate formData with [yup](https://github.com/jquense/yup) schema using the [validate](/packages/conform-yup/README.md#validate) helper.
 
 <!-- sandbox src="/examples/yup" -->
 
diff --git a/examples/yup/src/App.tsx b/examples/yup/src/App.tsx
index cafa6cb1..250fd837 100644
--- a/examples/yup/src/App.tsx
+++ b/examples/yup/src/App.tsx
@@ -1,5 +1,5 @@
 import { useFieldset, useForm } from '@conform-to/react';
-import { formatError } from '@conform-to/yup';
+import { validate } from '@conform-to/yup';
 import * as yup from 'yup';
 
 const schema = yup.object({
@@ -14,22 +14,13 @@ const schema = yup.object({
 	'confirm-password': yup
 		.string()
 		.required('Confirm Password is required')
-		.equals([yup.ref('password')], 'The password does not match'),
+		.equals([yup.ref('password')], 'Password does not match'),
 });
 
 export default function SignupForm() {
-	const form = useForm<yup.InferType<typeof schema>>({
-		onValidate({ submission }) {
-			try {
-				// Only sync validation is allowed on the client side
-				schema.validateSync(submission.value, {
-					abortEarly: false,
-				});
-
-				return [];
-			} catch (error) {
-				return formatError(error);
-			}
+	const form = useForm({
+		onValidate({ formData }) {
+			return validate(formData, schema);
 		},
 		onSubmit(event, { submission }) {
 			event.preventDefault();
diff --git a/examples/zod/README.md b/examples/zod/README.md
index ba546e98..c808d25d 100644
--- a/examples/zod/README.md
+++ b/examples/zod/README.md
@@ -1,6 +1,6 @@
 # Zod Example
 
-This example shows you how to validate the submission value using [zod](https://github.com/colinhacks/zod) and resolve the result with the [formatError](/packages/conform-zod/README.md#formatError) helper.
+This example shows you how to validate formData with [zod](https://github.com/colinhacks/zod) schema using the [validate](/packages/conform-zod/README.md#validate) helper.
 
 <!-- sandbox src="/examples/zod" -->
 
diff --git a/examples/zod/src/App.tsx b/examples/zod/src/App.tsx
index 021b4575..7104aacc 100644
--- a/examples/zod/src/App.tsx
+++ b/examples/zod/src/App.tsx
@@ -1,5 +1,5 @@
 import { useFieldset, useForm } from '@conform-to/react';
-import { formatError } from '@conform-to/zod';
+import { validate } from '@conform-to/zod';
 import { z } from 'zod';
 
 const schema = z
@@ -15,26 +15,14 @@ const schema = z
 		'confirm-password': z.string().min(1, 'Confirm Password is required'),
 	})
 	.refine((value) => value.password === value['confirm-password'], {
-		message: 'The password does not match',
+		message: 'Password does not match',
 		path: ['confirm-password'],
 	});
 
 export default function SignupForm() {
 	const form = useForm<z.infer<typeof schema>>({
-		onValidate({ submission }) {
-			// Only sync validation is allowed on the client side
-			const result = schema.safeParse(submission.value);
-
-			if (result.success) {
-				return [];
-			}
-
-			/**
-			 * The `formatError` helper simply resolves the ZodError to
-			 * a set of key/value pairs which refers to the name and
-			 * error of each field.
-			 */
-			return formatError(result.error);
+		onValidate({ formData }) {
+			return validate(formData, schema);
 		},
 		onSubmit(event, { submission }) {
 			event.preventDefault();
diff --git a/guide/app/components.tsx b/guide/app/components.tsx
index de585889..e8b515ee 100644
--- a/guide/app/components.tsx
+++ b/guide/app/components.tsx
@@ -65,7 +65,7 @@ export function Aside({ children }: { children: React.ReactNode }) {
 	return (
 		<aside
 			className={`
-				mb-8 xl:float-right xl:sticky xl:top-16 xl:w-72 xl:-mr-72 xl:pl-4 xl:py-8 xl:-mt-48 xl:max-h-[calc(100vh-4rem)] overflow-y-auto
+				-ml-4 xl:ml-0 mb-8 xl:float-right xl:sticky xl:top-16 xl:w-72 xl:-mr-72 xl:pl-4 xl:py-8 xl:-mt-48 xl:max-h-[calc(100vh-4rem)] overflow-y-auto
 				prose-ul:list-none prose-ul:m-0 prose-ul:pl-4 prose-li:m-0 prose-li:pl-0 prose-headings:pl-4
 				prose-a:block prose-a:py-2 prose-a:no-underline prose-a:font-normal prose-a:text-zinc-400 
 				hover:prose-a:text-white  
@@ -157,6 +157,10 @@ export function Link({
 
 	if (to.startsWith('/packages/')) {
 		to = to.replace('/packages/conform-', '/api/').replace('/README.md', '');
+	} else if (to.startsWith('/docs/')) {
+		to = to.replace('/docs', '').replace('.md', '');
+	} else {
+		to = to.replace('.md', '');
 	}
 
 	return (
diff --git a/guide/app/context.ts b/guide/app/context.ts
index 350f30aa..cab1c49e 100644
--- a/guide/app/context.ts
+++ b/guide/app/context.ts
@@ -1,8 +1,7 @@
 import type { AppLoadContext } from '@remix-run/cloudflare';
+import { getFile } from './octokit';
 
-export function getEnv({
-	env,
-}: AppLoadContext): Record<string, string | undefined> {
+export function getEnv({ env }: AppLoadContext): Record<string, any> {
 	if (typeof env !== 'object' || env === null) {
 		return {};
 	}
@@ -10,8 +9,53 @@ export function getEnv({
 	return Object(env);
 }
 
-export function getBranch(context: AppLoadContext) {
+export function getGitHubToken(context: AppLoadContext): string | undefined {
+	const env = getEnv(context);
+
+	return env.GITHUB_ACCESS_TOKEN;
+}
+
+export function getBranch(context: AppLoadContext): string {
 	const env = getEnv(context);
 
 	return env.CF_PAGES_BRANCH ?? 'main';
 }
+
+export function getCache(context: AppLoadContext): KVNamespace {
+	const env = getEnv(context);
+
+	return env.CACHE;
+}
+
+export function waitUntil(
+	context: AppLoadContext,
+	promise: Promise<any>,
+): void {
+	(context as any).waitUntil(promise);
+}
+
+export async function getFileContent(
+	context: AppLoadContext,
+	path: string,
+): Promise<string> {
+	const ref = getBranch(context);
+	const auth = getGitHubToken(context);
+	const cache = getCache(context);
+	const cacheKey = `${ref}/${path}`;
+
+	let content = await cache.get(cacheKey);
+
+	if (!content) {
+		const file = await getFile(path, { auth, ref });
+
+		content = file.content;
+		waitUntil(
+			context,
+			cache.put(cacheKey, content, {
+				expirationTtl: 300,
+			}),
+		);
+	}
+
+	return content;
+}
diff --git a/guide/app/octokit.tsx b/guide/app/octokit.tsx
index 7e6e594b..8eb2f71a 100644
--- a/guide/app/octokit.tsx
+++ b/guide/app/octokit.tsx
@@ -1,8 +1,11 @@
 import { Octokit } from '@octokit/core';
 import { notFound } from '~/util';
 
-export async function getFile(path: string, ref = 'main') {
-	const octokit = new Octokit();
+export async function getFile(
+	path: string,
+	{ auth, ref = 'main' }: { auth?: string; ref?: string } = {},
+) {
+	const octokit = new Octokit({ auth });
 
 	try {
 		const file = await octokit.request(
diff --git a/guide/app/routes/_guide.$page.tsx b/guide/app/routes/_guide.$page.tsx
index f61fd043..36d3f5a5 100644
--- a/guide/app/routes/_guide.$page.tsx
+++ b/guide/app/routes/_guide.$page.tsx
@@ -5,9 +5,8 @@ import {
 	json,
 } from '@remix-run/cloudflare';
 import { useLoaderData } from '@remix-run/react';
-import { getBranch } from '~/context';
+import { getFileContent } from '~/context';
 import { parse } from '~/markdoc';
-import { getFile } from '~/octokit';
 import { Markdown } from '~/components';
 import { formatTitle } from '~/util';
 
@@ -22,16 +21,15 @@ export const meta: MetaFunction = ({ params }) => {
 };
 
 export async function loader({ params, context }: LoaderArgs) {
-	const branch = getBranch(context);
-	const readme = await getFile(`docs/${params.page}.md`, branch);
+	const readme = await getFileContent(context, `docs/${params.page}.md`);
 
 	return json(
 		{
-			content: parse(atob(readme.content)),
+			content: parse(atob(readme)),
 		},
 		{
 			headers: {
-				'Cache-Control': 'public, max-age=300',
+				'Cache-Control': 'public, max-age=60',
 			},
 		},
 	);
diff --git a/guide/app/routes/_guide.api.$package.tsx b/guide/app/routes/_guide.api.$package.tsx
index 8ae3bc6a..d760b53b 100644
--- a/guide/app/routes/_guide.api.$package.tsx
+++ b/guide/app/routes/_guide.api.$package.tsx
@@ -6,10 +6,9 @@ import {
 } from '@remix-run/cloudflare';
 import { useLoaderData } from '@remix-run/react';
 import { Markdown } from '~/components';
-import { getBranch } from '~/context';
+import { getFileContent } from '~/context';
 import { formatTitle } from '~/util';
 import { parse } from '~/markdoc';
-import { getFile } from '~/octokit';
 
 export const headers: HeadersFunction = ({ loaderHeaders }) => {
 	return loaderHeaders;
@@ -22,19 +21,18 @@ export const meta: MetaFunction = ({ params }) => {
 };
 
 export async function loader({ params, context }: LoaderArgs) {
-	const branch = getBranch(context);
-	const readme = await getFile(
+	const readme = await getFileContent(
+		context,
 		`packages/conform-${params.package}/README.md`,
-		branch,
 	);
 
 	return json(
 		{
-			content: parse(atob(readme.content)),
+			content: parse(atob(readme)),
 		},
 		{
 			headers: {
-				'Cache-Control': 'public, max-age=300',
+				'Cache-Control': 'public, max-age=60',
 			},
 		},
 	);
diff --git a/guide/app/routes/_guide.examples.$name.tsx b/guide/app/routes/_guide.examples.$name.tsx
index c3b3ab58..ea778b49 100644
--- a/guide/app/routes/_guide.examples.$name.tsx
+++ b/guide/app/routes/_guide.examples.$name.tsx
@@ -5,9 +5,8 @@ import {
 	json,
 } from '@remix-run/cloudflare';
 import { useLoaderData } from '@remix-run/react';
-import { getBranch } from '~/context';
+import { getFileContent } from '~/context';
 import { parse } from '~/markdoc';
-import { getFile } from '~/octokit';
 import { Markdown } from '~/components';
 import { formatTitle } from '~/util';
 
@@ -22,16 +21,18 @@ export const meta: MetaFunction = ({ params }) => {
 };
 
 export async function loader({ params, context }: LoaderArgs) {
-	const branch = getBranch(context);
-	const readme = await getFile(`examples/${params.name}/README.md`, branch);
+	const readme = await getFileContent(
+		context,
+		`examples/${params.name}/README.md`,
+	);
 
 	return json(
 		{
-			content: parse(atob(readme.content)),
+			content: parse(atob(readme)),
 		},
 		{
 			headers: {
-				'Cache-Control': 'public, max-age=300',
+				'Cache-Control': 'public, max-age=60',
 			},
 		},
 	);
diff --git a/guide/app/routes/_guide.index.tsx b/guide/app/routes/_guide.index.tsx
index a99c527e..ad3a9c7e 100644
--- a/guide/app/routes/_guide.index.tsx
+++ b/guide/app/routes/_guide.index.tsx
@@ -4,29 +4,24 @@ import {
 	json,
 } from '@remix-run/cloudflare';
 import { useLoaderData } from '@remix-run/react';
-import { getBranch } from '~/context';
+import { getFileContent } from '~/context';
 import { parse } from '~/markdoc';
-import { getFile } from '~/octokit';
 import { Markdown } from '~/components';
-import { getIntroduction } from '~/util';
 
 export const headers: HeadersFunction = ({ loaderHeaders }) => {
 	return loaderHeaders;
 };
 
 export async function loader({ context }: LoaderArgs) {
-	const branch = getBranch(context);
-	const readme = await getFile('/README.md', branch);
-	const introduction = getIntroduction(atob(readme.content));
+	const readme = await getFileContent(context, 'README.md');
 
 	return json(
 		{
-			src: `edmundhung/conform/tree/${branch}/examples/basic`,
-			content: parse(introduction),
+			content: parse(atob(readme)),
 		},
 		{
 			headers: {
-				'Cache-Control': 'public, max-age=300',
+				'Cache-Control': 'public, max-age=60',
 			},
 		},
 	);
diff --git a/guide/app/util.ts b/guide/app/util.ts
index ecd66a49..394105d9 100644
--- a/guide/app/util.ts
+++ b/guide/app/util.ts
@@ -1,17 +1,3 @@
-export function getIntroduction(content: string) {
-	const lines = [];
-
-	for (const line of content.split('\n')) {
-		if (line.startsWith('## API References')) {
-			break;
-		}
-
-		lines.push(line);
-	}
-
-	return lines.join('\n');
-}
-
 export function formatTitle(text: string): string {
 	return `${text.slice(0, 1).toUpperCase()}${text.slice(1).toLowerCase()}`;
 }
diff --git a/guide/package.json b/guide/package.json
index e73657c1..768cfb0d 100644
--- a/guide/package.json
+++ b/guide/package.json
@@ -8,7 +8,7 @@
 		"ci": "sed -i -e \"s/CF_PAGES_BRANCH:\\s'main'/CF_PAGES_BRANCH: '$CF_PAGES_BRANCH'/g\" ./server.js",
 		"dev:remix": "remix watch",
 		"dev:style": "tailwindcss -i ./styles.css -o ./app/styles.css --watch",
-		"dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public",
+		"dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public --kv CACHE",
 		"dev": "remix build && run-p \"dev:*\"",
 		"start": "cross-env NODE_ENV=production npm run dev:wrangler"
 	},
diff --git a/guide/remix.env.d.ts b/guide/remix.env.d.ts
index b219711e..e106d344 100644
--- a/guide/remix.env.d.ts
+++ b/guide/remix.env.d.ts
@@ -1,3 +1,2 @@
 /// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/cloudflare/globals" />
 /// <reference types="@cloudflare/workers-types" />
diff --git a/guide/server.js b/guide/server.js
index 726608dd..6400b229 100644
--- a/guide/server.js
+++ b/guide/server.js
@@ -11,7 +11,12 @@ const handleRequest = createPagesFunctionHandler({
 			CF_PAGES_BRANCH: 'main',
 		};
 
-		return { env };
+		return {
+			env,
+			waitUntil(promise) {
+				context.waitUntil(promise);
+			},
+		};
 	},
 });
 
diff --git a/packages/conform-dom/index.ts b/packages/conform-dom/index.ts
index ff1746ef..210eb1c5 100644
--- a/packages/conform-dom/index.ts
+++ b/packages/conform-dom/index.ts
@@ -37,7 +37,7 @@ export type FieldsetConstraint<Schema extends Record<string, any>> = {
 };
 
 export type Submission<Schema = unknown> = {
-	context: string;
+	type: string;
 	intent?: string;
 	value: FieldValue<Schema>;
 	error: Array<[string, string]>;
@@ -53,6 +53,10 @@ export function isFieldElement(element: unknown): element is FieldElement {
 	);
 }
 
+export function getFormElements(form: HTMLFormElement): FieldElement[] {
+	return Array.from(form.elements).filter(isFieldElement);
+}
+
 export function getPaths(name: string): Array<string | number> {
 	const pattern = /(\w*)\[(\d+)\]/;
 
@@ -102,45 +106,26 @@ export function getName(paths: Array<string | number>): string {
 	}, '');
 }
 
-export function shouldValidate(submission: Submission, name: string): boolean {
+export function shouldValidate(submission: Submission, name?: string): boolean {
 	return (
-		submission.context === 'submit' ||
-		(submission.context === 'validate' && submission.intent === name)
+		submission.type === 'submit' ||
+		(submission.type === 'validate' &&
+			(typeof name === 'undefined' || submission.intent === name))
 	);
 }
 
 export function hasError(
 	error: Array<[string, string]>,
-	names?: string[],
+	name?: string,
 ): boolean {
 	return (
 		typeof error.find(
 			([fieldName, message]) =>
-				(typeof names === 'undefined' || names.includes(fieldName)) &&
-				message !== '',
+				(typeof name === 'undefined' || name === fieldName) && message !== '',
 		) !== 'undefined'
 	);
 }
 
-export function getFormError(
-	form: HTMLFormElement,
-	getFieldError?: (field: FieldElement) => Array<[string, string]>,
-): Array<[string, string]> {
-	let error: Array<[string, string]> = [];
-
-	for (const element of form.elements) {
-		if (isFieldElement(element) && element.willValidate) {
-			error.push(
-				...(getFieldError?.(element) ?? [
-					[element.name, element.validationMessage],
-				]),
-			);
-		}
-	}
-
-	return error;
-}
-
 export function setFormError(
 	form: HTMLFormElement,
 	submission: Submission,
@@ -270,7 +255,7 @@ export function parse<Schema extends Record<string, any>>(
 ): Submission<Schema> {
 	let hasCommand = false;
 	let submission: Submission<Record<string, unknown>> = {
-		context: 'submit',
+		type: 'submit',
 		value: {},
 		error: [],
 	};
@@ -292,7 +277,7 @@ export function parse<Schema extends Record<string, any>>(
 
 				submission = {
 					...submission,
-					context: submissionType,
+					type: submissionType,
 					intent: value,
 				};
 				hasCommand = true;
@@ -309,7 +294,7 @@ export function parse<Schema extends Record<string, any>>(
 			}
 		}
 
-		switch (submission.context) {
+		switch (submission.type) {
 			case 'list':
 				submission = handleList(submission);
 				break;
@@ -398,7 +383,7 @@ export function updateList<Schema>(
 export function handleList<Schema>(
 	submission: Submission<Schema>,
 ): Submission<Schema> {
-	if (submission.context !== 'list') {
+	if (submission.type !== 'list') {
 		return submission;
 	}
 
diff --git a/packages/conform-react/README.md b/packages/conform-react/README.md
index 3b5dfefb..43f9940a 100644
--- a/packages/conform-react/README.md
+++ b/packages/conform-react/README.md
@@ -11,10 +11,9 @@
 - [useFieldList](#usefieldlist)
 - [useControlledInput](#usecontrolledinput)
 - [conform](#conform)
+- [getFormElements](#getformelements)
 - [hasError](#haserror)
-- [isFieldElement](#isfieldelement)
 - [parse](#parse)
-- [setFormError](#setformerror)
 - [shouldValidate](#shouldvalidate)
 
 <!-- /aside -->
@@ -295,33 +294,6 @@ function Fieldset() {
 }
 ```
 
-<details>
-<summary>Is it required to provide the FieldsetConfig to `useFieldset`?</summary>
-
-No. The only thing required is the ref object. All the config is optional. You can always pass them to each fields manually.
-
-```tsx
-import { useForm, useFieldset } from '@conform-to/react';
-
-function SubscriptionForm() {
-  const formProps = useForm();
-  const { email } = useFieldset(formProps.ref);
-
-  return (
-    <form {...formProps}>
-      <input
-        type="email"
-        name={email.config.name}
-        defaultValue="support@conform.dev"
-        required
-      />
-    </form>
-  );
-}
-```
-
-</details>
-
 <details>
 <summary>Why does `useFieldset` require a ref object of the form or fieldset?</summary>
 
@@ -352,7 +324,7 @@ function ExampleForm() {
 
 ### useFieldList
 
-It returns a list of key and config, with a group of helpers configuring buttons for list manipulation
+It returns a list of key and config, with helpers to configure command buttons with [list command](/docs/submission.md#list-command).
 
 ```tsx
 import { useFieldset, useFieldList } from '@conform-to/react';
@@ -373,7 +345,7 @@ type Collection = {
 function CollectionFieldset() {
   const ref = useRef();
   const { books } = useFieldset<Collection>(ref);
-  const [bookList, control] = useFieldList(ref, books.config);
+  const [bookList, command] = useFieldList(ref, books.config);
 
   return (
     <fieldset ref={ref}>
@@ -390,12 +362,12 @@ function CollectionFieldset() {
           />
 
           {/* To setup a delete button */}
-          <button {...control.remove({ index })}>Delete</button>
+          <button {...command.remove({ index })}>Delete</button>
         </div>
       ))}
 
       {/* To setup a button that can append a new row with optional default value */}
-      <button {...control.append({ defaultValue: { name: '', isbn: '' } })}>
+      <button {...command.append({ defaultValue: { name: '', isbn: '' } })}>
         add
       </button>
     </fieldset>
@@ -412,7 +384,7 @@ import { useRef } from 'react';
 function CollectionFieldset() {
   const ref = useRef();
   const { books } = useFieldset<Collection>(ref);
-  const [bookList, control] = useFieldList(ref, books.config);
+  const [bookList, command] = useFieldList(ref, books.config);
 
   return (
     <fieldset ref={ref}>
@@ -422,12 +394,12 @@ function CollectionFieldset() {
           <BookFieldset {...book.config} />
 
           {/* To setup a delete button */}
-          <button {...control.remove({ index })}>Delete</button>
+          <button {...command.remove({ index })}>Delete</button>
         </div>
       ))}
 
       {/* To setup a button that can append a new row */}
-      <button {...control.append()}>add</button>
+      <button {...command.append()}>add</button>
     </fieldset>
   );
 }
@@ -582,74 +554,43 @@ function RandomForm() {
 }
 ```
 
-### hasError
-
-This helper checks if there is any message defined in error array with the provided name.
-
-```ts
-import { hasError } from '@conform-to/react';
-
-/**
- * Assume the error looks like this:
- */
-const error = [['email', 'Email is required']];
-
-// This will log `true`
-console.log(hasError(error, 'email'));
-
-// This will log `false`
-console.log(hasError(error, 'password'));
-```
-
 ---
 
-### isFieldElement
+### getFormElements
 
-This checks if the provided element is an `input` / `select` / `textarea` or `button` HTML element with type guard. Useful when you need to access the validityState of the fields and modify the validation message manually.
+It returns all _input_ / _select_ / _textarea_ or _button_ in the forms. Useful when looping through the form elements to validate each field.
 
 ```tsx
-import { isFieldElement } from '@conform-to/react';
+import { useForm, parse, getFormElements } from '@conform-to/react';
 
-export default function SignupForm() {
+export default function LoginForm() {
   const form = useForm({
-    onValidate({ form }) {
-      for (const element of form.elements) {
-        if (isFieldElement(element)) {
-          switch (field.name) {
-            case 'email':
-              if (field.validity.valueMissing) {
-                field.setCustomValidity('Email is required');
-              } else if (field.validity.typeMismatch) {
-                field.setCustomValidity('Please enter a valid email');
-              } else {
-                field.setCustomValidity('');
-              }
-              break;
-            case 'password':
-              if (field.validity.valueMissing) {
-                field.setCustomValidity('Password is required');
-              } else if (field.validity.tooShort) {
-                field.setCustomValidity(
-                  'The password should be at least 10 characters long',
-                );
-              } else {
-                field.setCustomValidity('');
-              }
-              break;
-            case 'confirm-password': {
-              if (field.validity.valueMissing) {
-                field.setCustomValidity('Confirm Password is required');
-              } else if (field.value !== formData.get('password')) {
-                field.setCustomValidity('The password does not match');
-              } else {
-                field.setCustomValidity('');
-              }
-              break;
+    onValidate({ form, formData }) {
+      const submission = parse(formData);
+
+      for (const element of getFormElements(form)) {
+        switch (element.name) {
+          case 'email': {
+            if (element.validity.valueMissing) {
+              submission.error.push([element.name, 'Email is required']);
+            } else if (element.validity.typeMismatch) {
+              submission.error.push([element.name, 'Email is invalid']);
+            }
+            break;
+          }
+          case 'password': {
+            if (element.validity.valueMissing) {
+              submission.error.push([element.name, 'Password is required']);
             }
+            break;
           }
         }
       }
+
+      return submission;
     },
+
+    // ....
   });
 
   // ...
@@ -658,42 +599,38 @@ export default function SignupForm() {
 
 ---
 
-### parse
+### hasError
 
-It parses the formData based on the [naming convention](/docs/submission).
+This helper checks if there is any message defined in error array with the provided name.
 
-```tsx
-import { parse } from '@conform-to/react';
+```ts
+import { hasError } from '@conform-to/react';
 
-const formData = new FormData(formElement);
-const submission = parse(formData);
+/**
+ * Assume the error looks like this:
+ */
+const error = [['email', 'Email is required']];
 
-console.log(submission);
+// This will log `true`
+console.log(hasError(error, 'email'));
+
+// This will log `false`
+console.log(hasError(error, 'password'));
 ```
 
 ---
 
-### setFormError
+### parse
 
-This helpers updates the form error based on the submission result by looping through all elements in the form and update the error with the [setCustomValidity](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity) API.
+It parses the formData based on the [naming convention](/docs/submission).
 
 ```tsx
-import { setFormError } from '@conform-to/react';
-
-function ExampleForm() {
-  const form = useForm({
-    onValidate({ form, submission }) {
-      const error = validate(submission);
+import { parse } from '@conform-to/react';
 
-      setFormError(form, {
-        ...submission,
-        error,
-      });
-    },
-  });
+const formData = new FormData();
+const submission = parse(formData);
 
-  // ...
-}
+console.log(submission);
 ```
 
 ---
@@ -706,14 +643,13 @@ This helper checks if the scope of validation includes a specific field by check
 import { shouldValidate } from '@conform-to/react';
 
 /**
- * The submission type and metadata give us hint on what should be valdiated.
+ * The submission type and intent give us hint on what should be valdiated.
  * If the type is 'validate', only the field with name matching the metadata must be validated.
- *
- * However, if the type is `undefined`, both will log true (Default submission)
+ * If the type is 'submit', everything should be validated (Default submission)
  */
 const submission = {
-  type: 'validate',
-  metadata: 'email',
+  context: 'validate',
+  intent: 'email',
   value: {},
   error: [],
 };
diff --git a/packages/conform-react/hooks.ts b/packages/conform-react/hooks.ts
index 07482e01..32231aa2 100644
--- a/packages/conform-react/hooks.ts
+++ b/packages/conform-react/hooks.ts
@@ -19,7 +19,6 @@ import {
 	requestValidate,
 	setFormError,
 	updateList,
-	getFormError,
 	hasError,
 } from '@conform-to/dom';
 import {
@@ -32,12 +31,6 @@ import {
 } from 'react';
 import { input } from './helpers';
 
-interface FormContext<Schema extends Record<string, any>> {
-	form: HTMLFormElement;
-	formData: FormData;
-	submission: Submission<Schema>;
-}
-
 export interface FormConfig<Schema extends Record<string, any>> {
 	/**
 	 * Validation mode. Default to `client-only`.
@@ -79,7 +72,13 @@ export interface FormConfig<Schema extends Record<string, any>> {
 	/**
 	 * A function to be called when the form should be (re)validated.
 	 */
-	onValidate?: (context: FormContext<Schema>) => Array<[string, string]>;
+	onValidate?: ({
+		form,
+		formData,
+	}: {
+		form: HTMLFormElement;
+		formData: FormData;
+	}) => Submission<Schema>;
 
 	/**
 	 * The submit event handler of the form. It will be called
@@ -87,7 +86,10 @@ export interface FormConfig<Schema extends Record<string, any>> {
 	 */
 	onSubmit?: (
 		event: FormEvent<HTMLFormElement>,
-		context: FormContext<Schema>,
+		context: {
+			formData: FormData;
+			submission: Submission<Schema>;
+		},
 	) => void;
 }
 
@@ -295,16 +297,38 @@ export function useForm<Schema extends Record<string, any>>(
 				}
 
 				try {
+					let submission: Submission<Schema>;
+
 					const formData = getFormData(form, submitter);
-					const submission = parse<Schema>(formData);
-					const context: FormContext<Schema> = {
-						form,
-						formData,
-						submission,
-					};
+
+					if (typeof config.onValidate === 'function') {
+						submission = config.onValidate({ form, formData });
+					} else {
+						submission = parse(formData);
+
+						if (config.mode !== 'server-validation') {
+							/**
+							 * As there is no custom logic defined,
+							 * removing the custom validity state will allow us
+							 * finding the latest validation message.
+							 *
+							 * This is mainly used to showcase the constraint validation API.
+							 */
+							setFormError(form, { type: 'submit', value: {}, error: [] });
+
+							for (const element of form.elements) {
+								if (isFieldElement(element) && element.willValidate) {
+									submission.error.push([
+										element.name,
+										element.validationMessage,
+									]);
+								}
+							}
+						}
+					}
 
 					// Touch all fields only if the submitter is not a command button
-					if (submission.context === 'submit') {
+					if (submission.type === 'submit') {
 						for (const field of form.elements) {
 							if (isFieldElement(field)) {
 								// Mark the field as touched
@@ -313,33 +337,16 @@ export function useForm<Schema extends Record<string, any>>(
 						}
 					}
 
-					let error: Array<[string, string]>;
-
-					if (typeof config.onValidate === 'function') {
-						error = config.onValidate(context);
-					} else {
-						if (config.mode !== 'server-validation') {
-							// Clear previous result
-							setFormError(form, { context: 'submit', value: {}, error: [] });
-						}
-
-						error = getFormError(form);
-					}
-
-					if (error.length > 0) {
-						submission.error.push(...error);
-					}
-
 					if (
 						(!config.noValidate &&
 							!submitter.formNoValidate &&
 							hasError(submission.error)) ||
-						(submission.context === 'validate' &&
+						(submission.type === 'validate' &&
 							config.mode !== 'server-validation')
 					) {
 						event.preventDefault();
 					} else {
-						config.onSubmit?.(event, context);
+						config.onSubmit?.(event, { formData, submission });
 					}
 
 					if (event.defaultPrevented) {
@@ -407,15 +414,15 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
  */
 export function useFieldset<Schema extends Record<string, any>>(
 	ref: RefObject<HTMLFormElement | HTMLFieldSetElement>,
-	config?: FieldsetConfig<Schema>,
+	config: FieldsetConfig<Schema>,
 ): Fieldset<Schema>;
 export function useFieldset<Schema extends Record<string, any>>(
 	ref: RefObject<HTMLFormElement | HTMLFieldSetElement>,
-	config?: FieldConfig<Schema>,
+	config: FieldConfig<Schema>,
 ): Fieldset<Schema>;
 export function useFieldset<Schema extends Record<string, any>>(
 	ref: RefObject<HTMLFormElement | HTMLFieldSetElement>,
-	config?: FieldsetConfig<Schema> | FieldConfig<Schema>,
+	config: FieldsetConfig<Schema> | FieldConfig<Schema>,
 ): Fieldset<Schema> {
 	const configRef = useRef(config);
 	const [uncontrolledState, setUncontrolledState] = useState<{
@@ -472,7 +479,7 @@ export function useFieldset<Schema extends Record<string, any>>(
 		const invalidHandler = (event: Event) => {
 			const form = getFormElement(ref.current);
 			const field = event.target;
-			const fieldsetName = configRef.current?.name ?? '';
+			const fieldsetName = configRef.current.name ?? '';
 
 			if (
 				!form ||
@@ -525,7 +532,7 @@ export function useFieldset<Schema extends Record<string, any>>(
 			setError((prev) => {
 				let next = prev;
 
-				const fieldsetName = configRef.current?.name ?? '';
+				const fieldsetName = configRef.current.name ?? '';
 
 				for (const field of form.elements) {
 					if (isFieldElement(field) && field.name.startsWith(fieldsetName)) {
@@ -610,29 +617,18 @@ export function useFieldset<Schema extends Record<string, any>>(
 	) as Fieldset<Schema>;
 }
 
-interface ControlButtonProps {
+interface CommandButtonProps {
 	name?: string;
 	value?: string;
 	form?: string;
 	formNoValidate: true;
 }
 
-type CommandPayload<
+type ListCommandPayload<
 	Schema,
 	Type extends ListCommand<FieldValue<Schema>>['type'],
 > = Extract<ListCommand<FieldValue<Schema>>, { type: Type }>['payload'];
 
-/**
- * A group of helpers for configuring a list control button
- */
-interface ListControl<Schema> {
-	prepend(payload?: CommandPayload<Schema, 'prepend'>): ControlButtonProps;
-	append(payload?: CommandPayload<Schema, 'append'>): ControlButtonProps;
-	replace(payload: CommandPayload<Schema, 'replace'>): ControlButtonProps;
-	remove(payload: CommandPayload<Schema, 'remove'>): ControlButtonProps;
-	reorder(payload: CommandPayload<Schema, 'reorder'>): ControlButtonProps;
-}
-
 /**
  * Returns a list of key and config, with a group of helpers
  * configuring buttons for list manipulation
@@ -647,7 +643,19 @@ export function useFieldList<Payload = any>(
 		key: string;
 		config: FieldConfig<Payload>;
 	}>,
-	ListControl<Payload>,
+	{
+		prepend(
+			payload?: ListCommandPayload<Payload, 'prepend'>,
+		): CommandButtonProps;
+		append(payload?: ListCommandPayload<Payload, 'append'>): CommandButtonProps;
+		replace(
+			payload: ListCommandPayload<Payload, 'replace'>,
+		): CommandButtonProps;
+		remove(payload: ListCommandPayload<Payload, 'remove'>): CommandButtonProps;
+		reorder(
+			payload: ListCommandPayload<Payload, 'reorder'>,
+		): CommandButtonProps;
+	},
 ] {
 	const configRef = useRef(config);
 	const [uncontrolledState, setUncontrolledState] = useState<{
@@ -695,7 +703,7 @@ export function useFieldList<Payload = any>(
 	 * This use proxy to capture all information about the command and
 	 * have it encoded in the value.
 	 */
-	const control = new Proxy(
+	const command = new Proxy(
 		{},
 		{
 			get(_target, type: any) {
@@ -709,7 +717,7 @@ export function useFieldList<Payload = any>(
 				};
 			},
 		},
-	) as ListControl<Payload>;
+	);
 
 	useEffect(() => {
 		configRef.current = config;
@@ -781,7 +789,11 @@ export function useFieldList<Payload = any>(
 		};
 	}, [ref]);
 
-	return [list, control];
+	return [
+		list,
+		// @ts-expect-error proxy type
+		command,
+	];
 }
 
 interface ShadowInputProps extends InputHTMLAttributes<HTMLInputElement> {
diff --git a/packages/conform-react/index.ts b/packages/conform-react/index.ts
index 1e775ec4..8b8a5de4 100644
--- a/packages/conform-react/index.ts
+++ b/packages/conform-react/index.ts
@@ -1,9 +1,8 @@
 export {
 	type FieldsetConstraint,
 	type Submission,
-	getFormError,
+	getFormElements,
 	hasError,
-	isFieldElement,
 	parse,
 	shouldValidate,
 } from '@conform-to/dom';
diff --git a/packages/conform-yup/README.md b/packages/conform-yup/README.md
index 8f556fb4..6c63a96a 100644
--- a/packages/conform-yup/README.md
+++ b/packages/conform-yup/README.md
@@ -7,6 +7,8 @@
 ## API Reference
 
 - [formatError](#formatError)
+- [getFieldsetConstraint](#getfieldsetconstraint)
+- [validate](#validate)
 
 <!-- /aside -->
 
@@ -17,7 +19,7 @@ This formats Yup `ValidationError` to the **conform** error structure (i.e. A se
 If the error received is not provided by Yup, it will be treated as a form level error with message set to **error.messages** or **Oops! Something went wrong.** if no fallback message is provided.
 
 ```tsx
-import { useForm } from '@conform-to/react';
+import { useForm, parse } from '@conform-to/react';
 import { formatError } from '@conform-to/yup';
 import * as yup from 'yup';
 
@@ -29,23 +31,25 @@ const schema = yup.object({
 
 function ExampleForm() {
   const formProps = useForm<yup.InferType<typeof schema>>({
-    onValidate({ form, submission }) {
+    onValidate({ formData }) {
+      const submission = parse(formData);
+
       try {
         // Only sync validation is allowed on the client side
         schema.validateSync(submission.value, {
           abortEarly: false,
         });
       } catch (error) {
-        submission.error = submission.error.concat(
+        submission.error.push(
           // The 2nd argument is an optional fallback message
-          formatError(
+          ...formatError(
             error,
             'The application has encountered an unknown error.',
           ),
         );
       }
 
-      setFormError(form, submission);
+      return submission;
     },
   });
 
@@ -74,17 +78,11 @@ export let action = async ({ request }) => {
       abortEarly: false,
     });
 
-    if (submission.context !== 'validate') {
+    if (submission.type !== 'validate') {
       return await handleFormData(data);
     }
   } catch (error) {
-    if (error instanceof yup.ValidationError) {
-      submission.error = submission.error.concat(formatError(error));
-    } else {
-      submission.error = submission.error.concat([
-        ['', 'Sorry, something went wrong.'],
-      ]);
-    }
+    submission.error.push(...formatError(error));
   }
 
   return submission;
@@ -100,3 +98,52 @@ export default function ExampleRoute() {
   // ...
 }
 ```
+
+### getFieldsetConstraint
+
+This tries to infer constraint of each field based on the yup schema. This is useful only for:
+
+1. Make it easy to style input using CSS, e.g. `:required`
+2. Have some basic validation working before/without JS. But the message is not customizable and it might be simpler and cleaner relying on server validation.
+
+```tsx
+import { getFieldsetConstraint } from '@conform-to/yup';
+
+function LoginFieldset() {
+  const form = useForm();
+  const { email, password } = useFieldset(ref, {
+    ...form.config,
+    constraint: getFieldsetConstraint(schema),
+  });
+
+  // ...
+}
+```
+
+### validate
+
+It parses the formData and returns a [submission](/docs/submission.md) object with the validation error, which removes the boilerplate code shown on the [formatError](#formaterror) example.
+
+```tsx
+import { useForm } from '@conform-to/react';
+import { validate } from '@conform-to/yup';
+import * as yup from 'yup';
+
+const schema = yup.object({
+  email: yup.string().required(),
+  password: yup.string().required(),
+});
+
+function ExampleForm() {
+  const formProps = useForm({
+    onValidate({ formData }) {
+      return validate(formData, schema, {
+        // Optional
+        fallbackMessage: 'The application has encountered an unknown error.',
+      });
+    },
+  });
+
+  // ...
+}
+```
diff --git a/packages/conform-yup/index.ts b/packages/conform-yup/index.ts
index d41681ad..1f509437 100644
--- a/packages/conform-yup/index.ts
+++ b/packages/conform-yup/index.ts
@@ -1,4 +1,9 @@
-import { type FieldConstraint, type FieldsetConstraint } from '@conform-to/dom';
+import {
+	type FieldConstraint,
+	type FieldsetConstraint,
+	type Submission,
+	parse,
+} from '@conform-to/dom';
 import * as yup from 'yup';
 
 export function getFieldsetConstraint<Source extends yup.AnyObjectSchema>(
@@ -96,3 +101,21 @@ export function formatError(
 
 	return [['', error instanceof Error ? error.message : fallbackMessage]];
 }
+
+export function validate<Schema extends yup.AnyObjectSchema>(
+	formData: FormData,
+	schema: Schema,
+	options: { fallbackMessage?: string } = {},
+): Submission<yup.InferType<Schema>> {
+	const submission = parse<yup.InferType<Schema>>(formData);
+
+	try {
+		schema.validateSync(submission.value, {
+			abortEarly: false,
+		});
+	} catch (error) {
+		submission.error.push(...formatError(error, options.fallbackMessage));
+	}
+
+	return submission;
+}
diff --git a/packages/conform-zod/README.md b/packages/conform-zod/README.md
index d52a95cb..cd3df472 100644
--- a/packages/conform-zod/README.md
+++ b/packages/conform-zod/README.md
@@ -7,6 +7,8 @@
 ## API Reference
 
 - [formatError](#formatError)
+- [getFieldsetConstraint](#getfieldsetconstraint)
+- [validate](#validate)
 
 <!-- /aside -->
 
@@ -17,7 +19,7 @@ This formats `ZodError` to the **conform** error structure (i.e. A set of key/va
 If the error received is not provided by Zod, it will be treated as a form level error with message set to **error.messages** or **Oops! Something went wrong.** if no fallback message is provided.
 
 ```tsx
-import { useForm } from '@conform-to/react';
+import { useForm, parse } from '@conform-to/react';
 import { formatError } from '@conform-to/zod';
 import { z } from 'zod';
 
@@ -29,15 +31,22 @@ const schema = z.object({
 
 function ExampleForm() {
   const formProps = useForm<z.infer<typeof schema>>({
-    onValidate({ form, submission }) {
+    onValidate({ formData }) {
       // Only sync validation is allowed on the client side
-      const result = schema.safeParse(submission.value);
-
-      if (!result.success) {
-        submission.error = submission.error.concat(formatError(result.error));
+      const submission = parse(formData);
+
+      try {
+        schema.parse(submission.value);
+      } catch (error) {
+        /**
+         * The `formatError` helper simply resolves the ZodError to
+         * a set of key/value pairs which refers to the name and
+         * error of each field.
+         */
+        submission.error.push(...formatError(error));
       }
 
-      setFormError(form, submission);
+      return submission;
     },
   });
 
@@ -63,13 +72,16 @@ export let action = async ({ request }) => {
   try {
     const data = await schema.parseAsync(submission.value);
 
-    if (submission.context === 'submit') {
+    if (submission.type === 'submit') {
       return await handleFormData(data);
     }
   } catch (error) {
-    submission.error = submission.error.concat(
+    submission.error.push(
       // The 2nd argument is an optional fallback message
-      formatError(error, 'The application has encountered an unknown error.'),
+      ...formatError(
+        error,
+        'The application has encountered an unknown error.',
+      ),
     );
   }
 
@@ -86,3 +98,50 @@ export default function ExampleRoute() {
   // ...
 }
 ```
+
+### getFieldsetConstraint
+
+This tries to infer constraint of each field based on the zod schema. This is useful only for:
+
+1. Make it easy to style input using CSS, e.g. `:required`
+2. Have some basic validation working before/without JS. But the message is not customizable and it might be simpler and cleaner relying on server validation.
+
+```tsx
+import { getFieldsetConstraint } from '@conform-to/zod';
+
+function LoginFieldset() {
+  const { email, password } = useFieldset(ref, {
+    constraint: getFieldsetConstraint(schema),
+  });
+
+  // ...
+}
+```
+
+### validate
+
+It parses the formData and returns a [submission](/docs/submission.md) object with the validation error, which removes the boilerplate code shown on the [formatError](#formaterror) example.
+
+```tsx
+import { useForm } from '@conform-to/react';
+import { validate } from '@conform-to/zod';
+import { z } from 'zod';
+
+const schema = z.object({
+  email: z.string().min(1, 'Email is required'),
+  password: z.string().min(1, 'Password is required'),
+});
+
+function ExampleForm() {
+  const formProps = useForm({
+    onValidate({ formData }) {
+      return validate(formData, schema, {
+        // Optional
+        fallbackMessage: 'The application has encountered an unknown error.',
+      });
+    },
+  });
+
+  // ...
+}
+```
diff --git a/packages/conform-zod/index.ts b/packages/conform-zod/index.ts
index 4108437e..e8619bc3 100644
--- a/packages/conform-zod/index.ts
+++ b/packages/conform-zod/index.ts
@@ -1,7 +1,9 @@
 import {
 	type FieldConstraint,
 	type FieldsetConstraint,
+	type Submission,
 	getName,
+	parse,
 } from '@conform-to/dom';
 import * as z from 'zod';
 
@@ -122,6 +124,22 @@ export function formatError(
 		return [['', error instanceof Error ? error.message : fallbackMessage]];
 }
 
+export function validate<Schema extends z.ZodTypeAny>(
+	formData: FormData,
+	schema: Schema,
+	options: { fallbackMessage?: string } = {},
+): Submission<z.infer<Schema>> {
+	const submission = parse<z.infer<Schema>>(formData);
+
+	try {
+		schema.parse(submission.value);
+	} catch (error) {
+		submission.error.push(...formatError(error, options.fallbackMessage));
+	}
+
+	return submission;
+}
+
 export function ifNonEmptyString(
 	fn: (value: string) => unknown,
 ): (value: unknown) => unknown {
diff --git a/playground/app/routes/employee.tsx b/playground/app/routes/employee.tsx
index c1a6482a..23d4cfb2 100644
--- a/playground/app/routes/employee.tsx
+++ b/playground/app/routes/employee.tsx
@@ -6,7 +6,7 @@ import {
 	useFieldset,
 	useForm,
 } from '@conform-to/react';
-import { formatError } from '@conform-to/zod';
+import { formatError, validate } from '@conform-to/zod';
 import type { ActionArgs, LoaderArgs } from '@remix-run/node';
 import { json } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
@@ -50,7 +50,7 @@ export let action = async ({ request }: ActionArgs) => {
 	try {
 		await serverSchema.parseAsync(submission.value);
 	} catch (error) {
-		submission.error = submission.error.concat(formatError(error));
+		submission.error.push(...formatError(error));
 	}
 
 	return json(submission);
@@ -62,22 +62,16 @@ export default function EmployeeForm() {
 	const form = useForm<Schema>({
 		...config,
 		state,
-		onValidate({ submission }) {
-			const result = schema.safeParse(submission.value);
-
-			if (result.success) {
-				return [];
-			}
-
-			return formatError(result.error);
+		onValidate({ formData }) {
+			return validate(formData, schema);
 		},
 		onSubmit:
 			config.mode === 'server-validation'
 				? (event, { submission }) => {
 						if (
-							submission.context === 'validate' &&
+							submission.type === 'validate' &&
 							(submission.intent !== 'email' ||
-								hasError(submission.error, ['email']))
+								hasError(submission.error, 'email'))
 						) {
 							event.preventDefault();
 						}
diff --git a/playground/app/routes/login.tsx b/playground/app/routes/login.tsx
index 3d18a3ee..5e75a09e 100644
--- a/playground/app/routes/login.tsx
+++ b/playground/app/routes/login.tsx
@@ -15,18 +15,18 @@ interface Login {
 	password: string;
 }
 
-function validate(submission: Submission<Login>): Array<[string, string]> {
-	const error: Array<[string, string]> = [];
+function validate(formData: FormData): Submission<Login> {
+	const submission = parse<Login>(formData);
 
 	if (!submission.value.email) {
-		error.push(['email', 'Email is required']);
+		submission.error.push(['email', 'Email is required']);
 	}
 
 	if (!submission.value.password) {
-		error.push(['password', 'Password is required']);
+		submission.error.push(['password', 'Password is required']);
 	}
 
-	return error;
+	return submission;
 }
 
 export let loader = async ({ request }: LoaderArgs) => {
@@ -35,15 +35,14 @@ export let loader = async ({ request }: LoaderArgs) => {
 
 export let action = async ({ request }: ActionArgs) => {
 	const formData = await request.formData();
-	const submission = parse<Login>(formData);
-	const error = validate(submission);
+	const submission = validate(formData);
 
 	if (
-		error.length === 0 &&
+		submission.error.length === 0 &&
 		(submission.value.email !== 'me@edmund.dev' ||
 			submission.value.password !== '$eCreTP@ssWord')
 	) {
-		error.push(['', 'The provided email or password is not valid']);
+		submission.error.push(['', 'The provided email or password is not valid']);
 	}
 
 	return {
@@ -52,7 +51,6 @@ export let action = async ({ request }: ActionArgs) => {
 			email: submission.value.email,
 			// Never send the password back to the client
 		},
-		error: submission.error.concat(error),
 	};
 };
 
@@ -63,12 +61,12 @@ export default function LoginForm() {
 		...config,
 		state,
 		onValidate: config.validate
-			? ({ submission }) => validate(submission)
+			? ({ formData }) => validate(formData)
 			: undefined,
 		onSubmit:
 			config.mode === 'server-validation'
 				? (event, { submission }) => {
-						if (submission.context === 'validate') {
+						if (submission.type === 'validate') {
 							event.preventDefault();
 						}
 				  }
diff --git a/playground/app/routes/movie.tsx b/playground/app/routes/movie.tsx
index b3ad6f2c..6a347600 100644
--- a/playground/app/routes/movie.tsx
+++ b/playground/app/routes/movie.tsx
@@ -1,7 +1,7 @@
 import type { FieldsetConstraint } from '@conform-to/react';
 import {
 	conform,
-	getFormError,
+	getFormElements,
 	parse,
 	useFieldset,
 	useForm,
@@ -84,50 +84,52 @@ export default function MovieForm() {
 		...config,
 		state,
 		onValidate: config.validate
-			? ({ form }) =>
-					getFormError(form, (field) => {
-						let message = '';
+			? ({ form, formData }) => {
+					const submission = parse(formData);
 
-						switch (field.name) {
+					for (const element of getFormElements(form)) {
+						switch (element.name) {
 							case 'title':
-								if (field.validity.valueMissing) {
-									message = 'Title is required';
-								} else if (field.validity.patternMismatch) {
-									message = 'Please enter a valid title';
-								} else {
-									message = '';
+								if (element.validity.valueMissing) {
+									submission.error.push([element.name, 'Title is required']);
+								} else if (element.validity.patternMismatch) {
+									submission.error.push([
+										element.name,
+										'Please enter a valid title',
+									]);
 								}
 								break;
 							case 'description':
-								if (field.validity.tooShort) {
-									message = 'Please provides more details';
-								} else {
-									message = '';
+								if (element.validity.tooShort) {
+									submission.error.push([
+										element.name,
+										'Please provides more details',
+									]);
 								}
 								break;
 							case 'genre':
-								if (field.validity.valueMissing) {
-									message = 'Genre is required';
-								} else {
-									message = '';
+								if (element.validity.valueMissing) {
+									submission.error.push([element.name, 'Genre is required']);
 								}
 								break;
 							case 'rating':
-								if (field.validity.stepMismatch) {
-									message = 'The provided rating is invalid';
-								} else {
-									message = '';
+								if (element.validity.stepMismatch) {
+									submission.error.push([
+										element.name,
+										'The provided rating is invalid',
+									]);
 								}
 								break;
 						}
+					}
 
-						return [[field.name, message]];
-					})
+					return submission;
+			  }
 			: undefined,
 		onSubmit:
 			config.mode === 'server-validation'
 				? (event, { submission }) => {
-						if (submission.context === 'validate') {
+						if (submission.type === 'validate') {
 							event.preventDefault();
 						}
 				  }
diff --git a/playground/app/routes/payment.tsx b/playground/app/routes/payment.tsx
index a830f9ec..f2c7a58f 100644
--- a/playground/app/routes/payment.tsx
+++ b/playground/app/routes/payment.tsx
@@ -1,8 +1,8 @@
-import { conform, parse, useFieldset, useForm } from '@conform-to/react';
+import { conform, useFieldset, useForm } from '@conform-to/react';
 import {
-	formatError,
 	getFieldsetConstraint,
 	ifNonEmptyString,
+	validate,
 } from '@conform-to/zod';
 import type { ActionArgs, LoaderArgs } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
@@ -41,15 +41,7 @@ export let loader = async ({ request }: LoaderArgs) => {
 
 export let action = async ({ request }: ActionArgs) => {
 	const formData = await request.formData();
-	const submission = parse(formData);
-	const result = schema.safeParse(submission.value);
-
-	if (!result.success) {
-		return {
-			...submission,
-			error: submission.error.concat(formatError(result.error)),
-		};
-	}
+	const submission = validate(formData, schema);
 
 	return submission;
 };
@@ -57,24 +49,16 @@ export let action = async ({ request }: ActionArgs) => {
 export default function PaymentForm() {
 	const config = useLoaderData();
 	const state = useActionData();
-	const form = useForm<z.infer<typeof schema>>({
+	const form = useForm({
 		...config,
 		state,
 		onValidate: config.validate
-			? ({ submission }) => {
-					const result = schema.safeParse(submission.value);
-
-					if (result.success) {
-						return [];
-					}
-
-					return formatError(result.error);
-			  }
+			? ({ formData }) => validate(formData, schema)
 			: undefined,
 		onSubmit:
 			config.mode === 'server-validation'
 				? (event, { submission }) => {
-						if (submission.context === 'validate') {
+						if (submission.type === 'validate') {
 							event.preventDefault();
 						}
 				  }
diff --git a/playground/app/routes/signup.tsx b/playground/app/routes/signup.tsx
index ff9574a0..6d8b44d6 100644
--- a/playground/app/routes/signup.tsx
+++ b/playground/app/routes/signup.tsx
@@ -11,29 +11,32 @@ interface Signup {
 	confirmPassword: string;
 }
 
-function validate(submission: Submission<Signup>): Array<[string, string]> {
-	const error: Array<[string, string]> = [];
+function validate(formData: FormData): Submission<Signup> {
+	const submission = parse<Signup>(formData);
 	const { email, password, confirmPassword } = submission.value;
 
 	if (!email) {
-		error.push(['email', 'Email is required']);
+		submission.error.push(['email', 'Email is required']);
 	} else if (!email.match(/^[^()@\s]+@[\w\d.]+$/)) {
-		error.push(['email', 'Email is invalid']);
+		submission.error.push(['email', 'Email is invalid']);
 	}
 
 	if (!password) {
-		error.push(['password', 'Password is required']);
+		submission.error.push(['password', 'Password is required']);
 	} else if (password.length < 8) {
-		error.push(['password', 'Password is too short']);
+		submission.error.push(['password', 'Password is too short']);
 	}
 
 	if (!confirmPassword) {
-		error.push(['confirmPassword', 'Confirm password is required']);
+		submission.error.push(['confirmPassword', 'Confirm password is required']);
 	} else if (confirmPassword !== password) {
-		error.push(['confirmPassword', 'The password provided does not match']);
+		submission.error.push([
+			'confirmPassword',
+			'The password provided does not match',
+		]);
 	}
 
-	return error;
+	return submission;
 }
 
 export let loader = async ({ request }: LoaderArgs) => {
@@ -42,8 +45,7 @@ export let loader = async ({ request }: LoaderArgs) => {
 
 export let action = async ({ request }: ActionArgs) => {
 	const formData = await request.formData();
-	const submission = parse(formData);
-	const error = validate(submission);
+	const submission = validate(formData);
 
 	return {
 		...submission,
@@ -51,7 +53,6 @@ export let action = async ({ request }: ActionArgs) => {
 			email: submission.value.email,
 			// Never send the password back to the client
 		},
-		error: submission.error.concat(error),
 	};
 };
 
@@ -62,12 +63,12 @@ export default function SignupForm() {
 		...config,
 		state,
 		onValidate: config.validate
-			? ({ submission }) => validate(submission)
+			? ({ formData }) => validate(formData)
 			: undefined,
 		onSubmit:
 			config.mode === 'server-validation'
 				? (event, { submission }) => {
-						if (submission.context === 'validate') {
+						if (submission.type === 'validate') {
 							event.preventDefault();
 						}
 				  }
diff --git a/playground/app/routes/student.tsx b/playground/app/routes/student.tsx
index 106e0028..80a30674 100644
--- a/playground/app/routes/student.tsx
+++ b/playground/app/routes/student.tsx
@@ -1,6 +1,5 @@
-import type { Submission } from '@conform-to/react';
-import { conform, useFieldset, useForm, parse } from '@conform-to/react';
-import { getFieldsetConstraint, formatError } from '@conform-to/yup';
+import { conform, useFieldset, useForm } from '@conform-to/react';
+import { getFieldsetConstraint, validate } from '@conform-to/yup';
 import type { ActionArgs, LoaderArgs } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
 import * as yup from 'yup';
@@ -19,33 +18,15 @@ const schema = yup.object({
 	grade: yup.string().oneOf(['A', 'B', 'C', 'D', 'E', 'F']).default('F'),
 });
 
-type Schema = yup.InferType<typeof schema>;
-
-function validate(submission: Submission<Schema>): Array<[string, string]> {
-	try {
-		schema.validateSync(submission.value, {
-			abortEarly: false,
-		});
-
-		return [];
-	} catch (error) {
-		return formatError(error);
-	}
-}
-
 export let loader = async ({ request }: LoaderArgs) => {
 	return parseConfig(request);
 };
 
 export let action = async ({ request }: ActionArgs) => {
 	const formData = await request.formData();
-	const submission = parse(formData);
-	const error = validate(submission);
+	const submission = validate(formData, schema);
 
-	return {
-		...submission,
-		error: submission.error.concat(error),
-	};
+	return submission;
 };
 
 export default function StudentForm() {
@@ -55,12 +36,12 @@ export default function StudentForm() {
 		...config,
 		state,
 		onValidate: config.validate
-			? ({ submission }) => validate(submission)
+			? ({ formData }) => validate(formData, schema)
 			: undefined,
 		onSubmit:
 			config.mode === 'server-validation'
 				? (event, { submission }) => {
-						if (submission.context === 'validate') {
+						if (submission.type === 'validate') {
 							event.preventDefault();
 						}
 				  }
diff --git a/playground/app/routes/todos.tsx b/playground/app/routes/todos.tsx
index e95f6959..ef3f0642 100644
--- a/playground/app/routes/todos.tsx
+++ b/playground/app/routes/todos.tsx
@@ -1,4 +1,4 @@
-import type { FieldsetConfig } from '@conform-to/react';
+import type { FieldsetConfig, Submission } from '@conform-to/react';
 import {
 	conform,
 	useFieldList,
@@ -27,21 +27,27 @@ const schema = z.object({
 	),
 });
 
+type Schema = z.infer<typeof schema>;
+
+function validate(formData: FormData): Submission<Schema> {
+	const submission = parse<Schema>(formData);
+
+	try {
+		schema.parse(submission.value);
+	} catch (error) {
+		submission.error.push(...formatError(error));
+	}
+
+	return submission;
+}
+
 export let loader = async ({ request }: LoaderArgs) => {
 	return parseConfig(request);
 };
 
 export let action = async ({ request }: ActionArgs) => {
 	const formData = await request.formData();
-	const submission = parse(formData);
-	const result = schema.safeParse(submission.value);
-
-	if (!result.success) {
-		return {
-			...submission,
-			error: submission.error.concat(formatError(result.error)),
-		};
-	}
+	const submission = validate(formData);
 
 	return submission;
 };
@@ -53,20 +59,12 @@ export default function TodosForm() {
 		...config,
 		state,
 		onValidate: config.validate
-			? ({ submission }) => {
-					const result = schema.safeParse(submission.value);
-
-					if (result.success) {
-						return [];
-					}
-
-					return formatError(result.error);
-			  }
+			? ({ formData }) => validate(formData)
 			: undefined,
 		onSubmit:
 			config.mode === 'server-validation'
 				? (event, { submission }) => {
-						if (submission.context === 'validate') {
+						if (submission.type === 'validate') {
 							event.preventDefault();
 						}
 				  }
@@ -107,7 +105,7 @@ export function TodosFieldset(config: FieldsetConfig<z.infer<typeof schema>>) {
 		...config,
 		constraint: getFieldsetConstraint(schema),
 	});
-	const [taskList, control] = useFieldList(ref, tasks.config);
+	const [taskList, command] = useFieldList(ref, tasks.config);
 
 	return (
 		<fieldset ref={ref} form={config.form}>
@@ -121,19 +119,19 @@ export function TodosFieldset(config: FieldsetConfig<z.infer<typeof schema>>) {
 						<div className="flex flex-row gap-2">
 							<button
 								className="rounded-md border p-2 hover:border-black"
-								{...control.remove({ index })}
+								{...command.remove({ index })}
 							>
 								Delete
 							</button>
 							<button
 								className="rounded-md border p-2 hover:border-black"
-								{...control.reorder({ from: index, to: 0 })}
+								{...command.reorder({ from: index, to: 0 })}
 							>
 								Move to top
 							</button>
 							<button
 								className="rounded-md border p-2 hover:border-black"
-								{...control.replace({ index, defaultValue: { content: '' } })}
+								{...command.replace({ index, defaultValue: { content: '' } })}
 							>
 								Clear
 							</button>
@@ -144,13 +142,13 @@ export function TodosFieldset(config: FieldsetConfig<z.infer<typeof schema>>) {
 			<div className="flex flex-row gap-2">
 				<button
 					className="rounded-md border p-2 hover:border-black"
-					{...control.prepend()}
+					{...command.prepend()}
 				>
 					Insert top
 				</button>
 				<button
 					className="rounded-md border p-2 hover:border-black"
-					{...control.append()}
+					{...command.append()}
 				>
 					Insert bottom
 				</button>
diff --git a/tests/conform-dom.spec.ts b/tests/conform-dom.spec.ts
index 0186a101..b797585e 100644
--- a/tests/conform-dom.spec.ts
+++ b/tests/conform-dom.spec.ts
@@ -27,7 +27,7 @@ test.describe('conform-dom', () => {
 					]),
 				),
 			).toEqual({
-				context: 'submit',
+				type: 'submit',
 				value: {
 					title: 'The cat',
 					description: 'Once upon a time...',
@@ -44,7 +44,7 @@ test.describe('conform-dom', () => {
 					]),
 				),
 			).toEqual({
-				context: 'submit',
+				type: 'submit',
 				value: {
 					account: 'AB00 1111 2222 3333 4444',
 					amount: {
@@ -65,7 +65,7 @@ test.describe('conform-dom', () => {
 					]),
 				),
 			).toEqual({
-				context: 'submit',
+				type: 'submit',
 				value: {
 					title: '',
 					tasks: [
@@ -86,7 +86,7 @@ test.describe('conform-dom', () => {
 					]),
 				),
 			).toEqual({
-				context: 'submit',
+				type: 'submit',
 				value: {
 					title: 'The cat',
 					description: 'Once upon a time...',
@@ -104,7 +104,7 @@ test.describe('conform-dom', () => {
 					]),
 				),
 			).toEqual({
-				context: 'test',
+				type: 'test',
 				intent: 'command value',
 				value: {
 					title: 'Test command',
@@ -119,7 +119,7 @@ test.describe('conform-dom', () => {
 					]),
 				),
 			).toEqual({
-				context: 'list',
+				type: 'list',
 				intent: JSON.stringify({ greeting: 'Hello World' }),
 				value: {
 					title: '',
@@ -139,7 +139,7 @@ test.describe('conform-dom', () => {
 				['tasks[0].completed', 'Yes'],
 			];
 			const result = {
-				context: 'list',
+				type: 'list',
 				value: {
 					tasks: [{ content: 'Test some stuffs', completed: 'Yes' }],
 				},
diff --git a/tests/react.spec.ts b/tests/react.spec.ts
index 4b18de85..73f3fd30 100644
--- a/tests/react.spec.ts
+++ b/tests/react.spec.ts
@@ -127,7 +127,7 @@ test.describe('Client Validation', () => {
 		await clickSubmitButton(form);
 
 		expect(await getSubmission(form)).toEqual({
-			context: 'submit',
+			type: 'submit',
 			value: {
 				title: 'The Dark Knight',
 				description: 'When the menace known as the Joker wreaks havoc...',
@@ -204,7 +204,7 @@ test.describe('Client Validation', () => {
 
 		await clickSubmitButton(form);
 		expect(await getSubmission(form)).toEqual({
-			context: 'submit',
+			type: 'submit',
 			value: {
 				title: 'The Matrix',
 				description:
@@ -241,7 +241,7 @@ test.describe('Client Validation', () => {
 		await clickSubmitButton(playground);
 
 		expect(await getSubmission(playground)).toEqual({
-			context: 'submit',
+			type: 'submit',
 			value: {
 				email: 'me@edmund.dev',
 			},
@@ -311,7 +311,7 @@ test.describe('Client Validation', () => {
 		await clickSubmitButton(form);
 
 		expect(await getSubmission(form)).toEqual({
-			context: 'submit',
+			type: 'submit',
 			value: {
 				iban: 'DE89 3704 0044 0532 0130 00',
 				amount: {
@@ -383,7 +383,7 @@ test.describe('Client Validation', () => {
 		await clickSubmitButton(form);
 
 		expect(await getSubmission(form)).toEqual({
-			context: 'submit',
+			type: 'submit',
 			value: {
 				email: '',
 			},
@@ -398,7 +398,7 @@ test.describe('Client Validation', () => {
 		await clickSubmitButton(form);
 
 		expect(await getSubmission(form)).toEqual({
-			context: 'submit',
+			type: 'submit',
 			value: {
 				email: 'invalid email',
 			},
@@ -499,7 +499,7 @@ test.describe('Server Validation', () => {
 				status: 200,
 				contentType: 'application/json',
 				body: JSON.stringify({
-					context: 'submit',
+					type: 'submit',
 					value: {},
 					error: [['', 'Request forbidden']],
 				}),
@@ -562,7 +562,9 @@ test.describe('Server Validation', () => {
 
 		await email.type('e');
 
-		await expect.poll(() => getErrorMessages(form)).toEqual(['', '', '', '']);
+		await expect
+			.poll(() => getErrorMessages(form), { timeout: 10000 })
+			.toEqual(['', '', '', '']);
 
 		await Promise.all([waitForDataResponse(page), clickSubmitButton(form)]);
 
@@ -731,7 +733,7 @@ test.describe('Field list', () => {
 		await clickSubmitButton(form);
 
 		expect(await getSubmission(form)).toEqual({
-			context: 'submit',
+			type: 'submit',
 			value: {
 				title: 'My schedule',
 				tasks: [
@@ -744,7 +746,7 @@ test.describe('Field list', () => {
 		});
 	});
 
-	test('Control buttons', async ({ page }) => {
+	test('Command buttons', async ({ page }) => {
 		const form = await gotoForm(page, '/todos');
 		const tasks = form.locator('ol > li');
 
@@ -798,7 +800,7 @@ test.describe('Field list', () => {
 		await clickSubmitButton(form);
 
 		expect(await getSubmission(form)).toEqual({
-			context: 'submit',
+			type: 'submit',
 			value: {
 				title: 'Testing plan',
 				tasks: [