diff --git a/.changeset/mean-bugs-end.md b/.changeset/mean-bugs-end.md
new file mode 100644
index 00000000..4906dc77
--- /dev/null
+++ b/.changeset/mean-bugs-end.md
@@ -0,0 +1,5 @@
+---
+"@sjsf/form": minor
+---
+
+Implement `useForm` API, Add `FormContent` and `SubmitButton` components
diff --git a/.github/workflows/deploy-pages.yaml b/.github/workflows/deploy-pages.yaml
new file mode 100644
index 00000000..89070db2
--- /dev/null
+++ b/.github/workflows/deploy-pages.yaml
@@ -0,0 +1,54 @@
+name: Deploy to GitHub Pages
+on:
+  release:
+    types: [published]
+
+permissions:
+  id-token: write
+  contents: write
+  pages: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout code repository
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      - name: Build
+        run: pnpm run build --filter="./apps/*"
+
+      - name: Merge apps build outputs
+        run: mv apps/playground/dist apps/docs/dist/playground
+
+      - name: Upload Pages Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "apps/docs/dist/"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.github/workflows/release.yml b/.github/workflows/version-and-publish.yaml
similarity index 65%
rename from .github/workflows/release.yml
rename to .github/workflows/version-and-publish.yaml
index db603e7d..1fcf83de 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/version-and-publish.yaml
@@ -1,4 +1,4 @@
-name: Release
+name: Version and Publish
 on:
   push:
     branches:
@@ -10,7 +10,6 @@ permissions:
   id-token: write
   contents: write
   pull-requests: write
-  pages: write
 
 jobs:
   version:
@@ -41,9 +40,9 @@ jobs:
             ${{ runner.os }}-turbo-
 
       - name: Build
-        run: pnpm run ci:build
+        run: pnpm run ci:build --filter="@sjsf/*"
 
-      - name: create and publish versions
+      - name: Create and publish versions
         uses: changesets/action@v1
         with:
           version: pnpm ci:version
@@ -53,23 +52,3 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Merge apps build outputs
-        run: mv apps/playground/dist apps/docs/dist/playground
-
-      - name: Upload Pages Artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: "apps/docs/dist/"
-
-  deploy:
-    needs: version
-    runs-on: ubuntu-latest
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
-
diff --git a/README.md b/README.md
index fb7d239f..0ec1e285 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
 ```svelte
 <script lang="ts">
   import Ajv from 'ajv';
-  import { Form } from '@sjsf/form';
+  import { useForm, SimpleForm, type Schema } from '@sjsf/form';
   import { translation } from '@sjsf/form/translations/en';
   import { theme } from '@sjsf/form/basic-theme';
   import {
@@ -31,32 +31,32 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
   const validator = new AjvValidator(
     addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
   );
-</script>
 
-<Form
-  {...theme}
-  schema={{
-    title: 'Tasks',
-    type: 'array',
-    items: {
-      type: 'object',
-      properties: {
-        name: {
-          type: 'string',
-          title: 'Name',
-        },
-        description: {
-          type: 'string',
-          title: 'Description',
-        },
+  const schema: Schema = {
+    type: 'object',
+    properties: {
+      name: {
+        type: 'string',
+        title: 'Name',
+      },
+      description: {
+        type: 'string',
+        title: 'Description',
       },
-      required: ["name"]
     },
-  }}
-  {validator}
-  {translation}
-  onSubmit={console.log}
-/>
+    required: ["name"]
+  }
+
+  const form = useForm({
+    ...theme,
+    schema,
+    validator,
+    translation,
+    onSubmit: console.log,
+  })
+</script>
+
+<SimpleForm {form} />
 ```
 
 ## License
diff --git a/apps/docs/src/theme.svelte.ts b/apps/docs/src/astro.svelte.ts
similarity index 97%
rename from apps/docs/src/theme.svelte.ts
rename to apps/docs/src/astro.svelte.ts
index c4fc21cf..1456238c 100644
--- a/apps/docs/src/theme.svelte.ts
+++ b/apps/docs/src/astro.svelte.ts
@@ -14,7 +14,7 @@ const loadTheme = (): Theme =>
 const getPreferredColorScheme = (): DarkOrLight =>
   matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
 
-export function astroTheme() {
+export function useAstro() {
   let theme = $state(loadTheme());
 
   $effect(() => {
diff --git a/apps/docs/src/components/custom-form.svelte b/apps/docs/src/components/custom-form.svelte
deleted file mode 100644
index 922a3d85..00000000
--- a/apps/docs/src/components/custom-form.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts" generics="T">
-  import { SvelteMap } from "svelte/reactivity";
-  import Ajv, { type ErrorObject } from "ajv";
-  import { Form, type FormProps } from "@sjsf/form";
-  import { translation } from "@sjsf/form/translations/en";
-  import { theme } from "@sjsf/form/basic-theme";
-  import {
-    AjvValidator,
-    addFormComponents,
-    DEFAULT_AJV_CONFIG,
-  } from "@sjsf/ajv8-validator";
-
-  type Defaults = "widgets" | "components" | "validator" | "translation";
-
-  type Props<T> = Omit<FormProps<T, ErrorObject>, Defaults> &
-    Partial<Pick<FormProps<T, ErrorObject>, Defaults>>;
-
-  let {
-    value = $bindable(),
-    form = $bindable(),
-    isSubmitted = $bindable(false),
-    errors = $bindable(new SvelteMap()),
-    validator = new AjvValidator(
-      addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
-    ),
-    ...rest
-  }: Props<T> = $props();
-
-  let self: Form<T, ErrorObject>;
-
-  export function validate() {
-    return self.validate();
-  }
-</script>
-
-<Form
-  bind:this={self}
-  {translation}
-  {...theme}
-  {...rest}
-  {validator}
-  bind:value
-  bind:form
-  bind:isSubmitted
-  bind:errors
-/>
diff --git a/apps/docs/src/components/custom-form.ts b/apps/docs/src/components/custom-form.ts
new file mode 100644
index 00000000..e6b90628
--- /dev/null
+++ b/apps/docs/src/components/custom-form.ts
@@ -0,0 +1,27 @@
+import Ajv, { type ErrorObject } from "ajv";
+import { useForm, type UseFormOptions } from "@sjsf/form";
+import { translation } from "@sjsf/form/translations/en";
+import { theme } from "@sjsf/form/basic-theme";
+import {
+  AjvValidator,
+  addFormComponents,
+  DEFAULT_AJV_CONFIG,
+} from "@sjsf/ajv8-validator";
+
+type Defaults = "widgets" | "components" | "validator" | "translation";
+
+export type CustomOptions<T> = Omit<UseFormOptions<T, ErrorObject>, Defaults> &
+  Partial<Pick<UseFormOptions<T, ErrorObject>, Defaults>>;
+
+export function useCustomForm<T>(options: CustomOptions<T>) {
+  const validator = new AjvValidator(
+    addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
+  );
+  return useForm(
+    Object.setPrototypeOf(options, {
+      ...theme,
+      validator,
+      translation,
+    })
+  );
+}
diff --git a/apps/docs/src/content/docs/_schema.ts b/apps/docs/src/content/docs/_schema.ts
index 73bac299..182ae9b5 100644
--- a/apps/docs/src/content/docs/_schema.ts
+++ b/apps/docs/src/content/docs/_schema.ts
@@ -87,7 +87,7 @@ export const uiSchema: UiSchemaRoot = {
   },
 };
 
-export const initialData = {
+export const initialValue = {
   lastName: "Norris",
   age: 75,
   bio: "Roundhouse kicking asses since 1940",
diff --git a/apps/docs/src/content/docs/_with-basic.svelte b/apps/docs/src/content/docs/_with-basic.svelte
index 713b0dd4..b8a1ab12 100644
--- a/apps/docs/src/content/docs/_with-basic.svelte
+++ b/apps/docs/src/content/docs/_with-basic.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
-  import { Form } from "@sjsf/form";
+  import { useForm, SimpleForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/form/basic-theme";
 
-  import { schema, uiSchema, initialData } from "./_schema";
+  import { schema, uiSchema, initialValue } from "./_schema";
   import { validator } from "./_validator";
 
-  let value = $state(initialData);
+  const form = useForm({
+    ...theme,
+    initialValue,
+    schema,
+    uiSchema,
+    validator,
+    translation,
+  });
 </script>
 
-<Form
-  bind:value
-  {...theme}
-  {schema}
-  {uiSchema}
-  {validator}
-  {translation}
-  onSubmit={console.log}
-/>
+<SimpleForm {form} style="display: flex; flex-direction: column; gap: 1rem;" />
 
-<pre>{JSON.stringify(value, null, 2)}</pre>
+<pre>{JSON.stringify(form.value, null, 2)}</pre>
diff --git a/apps/docs/src/content/docs/_with-daisyui.svelte b/apps/docs/src/content/docs/_with-daisyui.svelte
index e3900c86..c07d0a4f 100644
--- a/apps/docs/src/content/docs/_with-daisyui.svelte
+++ b/apps/docs/src/content/docs/_with-daisyui.svelte
@@ -1,28 +1,30 @@
 <script lang="ts">
-  import { Form } from "@sjsf/form";
+  import { SimpleForm, useForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/daisyui-theme";
 
-  import { astroTheme } from "@/theme.svelte";
+  import { useAstro } from "@/astro.svelte";
 
-  import { schema, uiSchema, initialData } from "./_schema";
-  import { validator } from './_validator'
+  import { schema, uiSchema, initialValue } from "./_schema";
+  import { validator } from "./_validator";
 
-  let value = $state(initialData);
+  const astro = useAstro();
 
-  const astro = astroTheme();
+  const form = useForm({
+    ...theme,
+    initialValue,
+    schema,
+    uiSchema,
+    validator,
+    translation,
+  });
 </script>
 
-<Form
+<SimpleForm
+  {form}
   style="background-color: transparent; margin-bottom: 1rem;"
-  bind:value
-  {...theme}
-  {schema}
-  {uiSchema}
-  {validator}
-  {translation}
+  class="flex flex-col gap-4"
   data-theme={astro.darkOrLight}
-  onSubmit={console.log}
 />
 
-<pre>{JSON.stringify(value, null, 2)}</pre>
+<pre>{JSON.stringify(form.value, null, 2)}</pre>
diff --git a/apps/docs/src/content/docs/_with-flowbite.svelte b/apps/docs/src/content/docs/_with-flowbite.svelte
index 038a9d3e..95d3b64f 100644
--- a/apps/docs/src/content/docs/_with-flowbite.svelte
+++ b/apps/docs/src/content/docs/_with-flowbite.svelte
@@ -1,27 +1,25 @@
 <script lang="ts">
-  import { Form } from "@sjsf/form";
+  import { SimpleForm, useForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/flowbite-theme";
 
-  import { astroTheme } from "@/theme.svelte";
+  import { useAstro } from "@/astro.svelte";
 
-  import { schema, uiSchema, initialData } from "./_schema";
+  import { schema, uiSchema, initialValue } from "./_schema";
   import { validator } from "./_validator";
 
-  let value = $state(initialData);
+  const astro = useAstro();
 
-  const astro = astroTheme();
+  const form = useForm({
+    ...theme,
+    initialValue,
+    schema,
+    uiSchema,
+    validator,
+    translation,
+  });
 </script>
 
-<Form
-  class="flex flex-col gap-4 mb-4 {astro.darkOrLight}"
-  bind:value
-  {...theme}
-  {schema}
-  {uiSchema}
-  {validator}
-  {translation}
-  onSubmit={console.log}
-/>
+<SimpleForm {form} class="flex flex-col gap-4 mb-4 {astro.darkOrLight}" />
 
-<pre>{JSON.stringify(value, null, 2)}</pre>
+<pre>{JSON.stringify(form.value, null, 2)}</pre>
diff --git a/apps/docs/src/content/docs/_with-shadcn.svelte b/apps/docs/src/content/docs/_with-shadcn.svelte
index 7684fb87..f3a4dc3b 100644
--- a/apps/docs/src/content/docs/_with-shadcn.svelte
+++ b/apps/docs/src/content/docs/_with-shadcn.svelte
@@ -1,30 +1,28 @@
 <script lang="ts">
-  import { Form } from "@sjsf/form";
+  import { SimpleForm, useForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme, setThemeContext } from "@sjsf/shadcn-theme";
-  import { components } from '@sjsf/shadcn-theme/default'
+  import { components } from "@sjsf/shadcn-theme/default";
 
-  import { astroTheme } from "@/theme.svelte";
+  import { useAstro } from "@/astro.svelte";
 
-  import { schema, uiSchema, initialData } from "./_schema";
+  import { schema, uiSchema, initialValue } from "./_schema";
   import { validator } from "./_validator";
 
-  let value = $state(initialData);
+  const astro = useAstro();
 
-  const astro = astroTheme();
+  const form = useForm({
+    ...theme,
+    initialValue,
+    schema,
+    uiSchema,
+    validator,
+    translation,
+  });
 
-  setThemeContext({ components })
+  setThemeContext({ components });
 </script>
 
-<Form
-  class="flex flex-col gap-4 {astro.darkOrLight}"
-  bind:value
-  {...theme}
-  {schema}
-  {uiSchema}
-  {validator}
-  {translation}
-  onSubmit={console.log}
-/>
+<SimpleForm {form} class="flex flex-col gap-4 {astro.darkOrLight}" />
 
-<pre style="padding-top: 1rem;">{JSON.stringify(value, null, 2)}</pre>
+<pre style="padding-top: 1rem;">{JSON.stringify(form.value, null, 2)}</pre>
diff --git a/apps/docs/src/content/docs/_with-skeleton.svelte b/apps/docs/src/content/docs/_with-skeleton.svelte
index d421fc83..46b313ab 100644
--- a/apps/docs/src/content/docs/_with-skeleton.svelte
+++ b/apps/docs/src/content/docs/_with-skeleton.svelte
@@ -1,29 +1,30 @@
 <script lang="ts">
-  import { Form } from "@sjsf/form";
+  import { SimpleForm, useForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/skeleton-theme";
 
-  import { astroTheme } from "@/theme.svelte";
+  import { useAstro } from "@/astro.svelte";
 
-  import { schema, uiSchema, initialData } from "./_schema";
+  import { schema, uiSchema, initialValue } from "./_schema";
   import { validator } from "./_validator";
 
-  let value = $state(initialData);
+  const astro = useAstro();
 
-  const astro = astroTheme();
+  const form = useForm({
+    ...theme,
+    initialValue,
+    schema,
+    uiSchema,
+    validator,
+    translation,
+  });
 </script>
 
-<Form
+<SimpleForm
+  {form}
   class="flex flex-col gap-4 {astro.darkOrLight}"
   style="margin-bottom: 1rem;"
-  bind:value
-  {...theme}
-  {schema}
-  {uiSchema}
-  {validator}
-  {translation}
   data-theme="cerberus"
-  onSubmit={console.log}
 />
 
-<pre>{JSON.stringify(value, null, 2)}</pre>
+<pre>{JSON.stringify(form.value, null, 2)}</pre>
diff --git a/apps/docs/src/content/docs/guides/custom-form.mdx b/apps/docs/src/content/docs/advanced/custom-form.mdx
similarity index 51%
rename from apps/docs/src/content/docs/guides/custom-form.mdx
rename to apps/docs/src/content/docs/advanced/custom-form.mdx
index 2f9d706d..7119729e 100644
--- a/apps/docs/src/content/docs/guides/custom-form.mdx
+++ b/apps/docs/src/content/docs/advanced/custom-form.mdx
@@ -1,14 +1,14 @@
 ---
 title: Custom form
 sidebar:
-  order: 4
+  order: 0
 ---
 
 import { Code } from '@astrojs/starlight/components';
 
-import customFormCode from '@/components/custom-form.svelte?raw';
+import customFormCode from '@/components/custom-form.ts?raw';
 
 Even with a simple setup, resulting code is very verbose.
-Therefore, after choosing a theme, validator and translation, it is convenient to create a custom component.
+Therefore, after choosing a theme, validator and translation, it is convenient to create a wrapper around the `useForm`.
 
-<Code code={customFormCode} lang="svelte" title="custom-form.svelte" />
+<Code code={customFormCode} lang="typescript" title="custom-form.ts" />
diff --git a/apps/docs/src/content/docs/advanced/custom-validation.mdx b/apps/docs/src/content/docs/advanced/custom-validation.mdx
index 1dc428c6..3353524e 100644
--- a/apps/docs/src/content/docs/advanced/custom-validation.mdx
+++ b/apps/docs/src/content/docs/advanced/custom-validation.mdx
@@ -1,7 +1,7 @@
 ---
 title: Custom validation
 sidebar:
-  order: 2
+  order: 1
 ---
 
 ## Errors transformation and custom validation
diff --git a/apps/docs/src/content/docs/advanced/custom-widgets.mdx b/apps/docs/src/content/docs/advanced/custom-widgets.mdx
index 21a922b9..f614450e 100644
--- a/apps/docs/src/content/docs/advanced/custom-widgets.mdx
+++ b/apps/docs/src/content/docs/advanced/custom-widgets.mdx
@@ -1,7 +1,7 @@
 ---
 title: Custom widgets
 sidebar:
-  order: 3
+  order: 2
 ---
 
 ## Example
diff --git a/apps/docs/src/content/docs/advanced/form-base.mdx b/apps/docs/src/content/docs/advanced/form-base.mdx
deleted file mode 100644
index 1850f8cc..00000000
--- a/apps/docs/src/content/docs/advanced/form-base.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Form base
-sidebar:
-  order: 0
----
-
-By default `Form` will calculate default value for provided `schema` and current `value` on each `schema` change.
-
-```typescript
-$effect(() => {
-  schema;
-  value = untrack(() => getDefaultFormState(
-    validator,
-    schema,
-    value
-  ));
-});
-```
-
-While this behavior is convenient it has some drawbacks:
-
-- Empty form on initial render when `value` is `undefined`
-- Additional render after defaults calculation
-- This behavior may not be desirable in some cases
-
-To prevent this behavior, you can use `FormBase` component,
-which provides the same interface as `Form`.
-
-:::note
-
-You should calculate initial value by yourself.
-
-:::
-
-```svelte
-<script lang="ts">
-  import { FormBase } from "@sjsf/form";
-  import { translation } from "@sjsf/form/translations/en";
-  import { theme } from "@sjsf/form/basic-theme";
-  import { getDefaultFormState } from '@sjsf/form/get-default-form-state';
-
-  import { schema, uiSchema, initialData } from "./schema";
-  import { validator } from "./validator";
-
-  let value = $state(getDefaultFormState(validator, schema, initialData));
-</script>
-
-<FormBase
-  bind:value
-  {...theme}
-  {schema}
-  {uiSchema}
-  {validator}
-  {translation}
-  onSubmit={console.log}
-/>
-```
diff --git a/apps/docs/src/content/docs/advanced/state-transformation.mdx b/apps/docs/src/content/docs/advanced/state-transformation.mdx
index 66ccc6bd..db70c7ef 100644
--- a/apps/docs/src/content/docs/advanced/state-transformation.mdx
+++ b/apps/docs/src/content/docs/advanced/state-transformation.mdx
@@ -1,7 +1,7 @@
 ---
 title: State transformation
 sidebar:
-  order: 4
+  order: 3
 ---
 
 In some cases it may be necessary to transform the form state before it is passed to the validator.
@@ -26,32 +26,32 @@ It will be replaced with `@sjsf/form/omit-extra-data` import in the major releas
 ```svelte
 <script lang="ts">
   import { defaultMerger } from '@sjsf/form/core'
-  import { Form } from "@sjsf/form";
+  import { useForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/form/basic-theme";
   import { omitExtraData2 } from "@sjsf/form/legacy-omit-extra-data";
 
-  import { schema, uiSchema, initialData } from "./schema";
+  import { schema, uiSchema, initialValue } from "./schema";
   import { validator } from "./validator";
   import { transform } from "./transform";
   
-  let value = $state();
+  const form = useForm({
+    ...theme,
+    initialValue,
+    schema,
+    uiSchema,
+    validator,
+    translation,
+    getSnapshot() {
+      return omitExtraData2(validator, defaultMerger, schema, $state.snapshot(form.formValue))
+    },
+    onSubmit(value) {
+      console.log("transformed", value);
+    },
+    onSubmitError(errors, _, value) {
+      console.log("errors", errors);
+      console.log("transformed", value);
+    }
+  })
 </script>
-
-<Form
-  bind:value
-  {...theme}
-  {schema}
-  {uiSchema}
-  {validator}
-  {translation}
-  getSnapshot={() => omitExtraData2(validator, defaultMerger, schema, $state.snapshot(value))}
-  onSubmit={(value) => {
-    console.log("transformed", value);
-  }}
-  onSubmitError={(errors, _, value) => {
-    console.log("errors", errors);
-    console.log("transformed", value);
-  }}
-/>
-```
\ No newline at end of file
+```
diff --git a/apps/docs/src/content/docs/api-reference/handlers.mdx b/apps/docs/src/content/docs/api-reference/handlers.mdx
index 80ca28e5..f849394a 100644
--- a/apps/docs/src/content/docs/api-reference/handlers.mdx
+++ b/apps/docs/src/content/docs/api-reference/handlers.mdx
@@ -15,9 +15,9 @@ interface FormProps<T> {
      * The function to get the form data snapshot
      * 
      * The snapshot is used to validate the form and passed to
-     * `onSubmit` and `onSubmitError` handlers. 
+     * `onSubmit` and `onSubmitError` handlers.
      * 
-     * @default () => $state.snapshot(value)
+     * @default () => $state.snapshot(formValue)
      */
     getSnapshot?: () => SchemaValue | undefined
     /**
@@ -41,7 +41,7 @@ interface FormProps<T> {
      * 
      * By default it will clear the errors and set `isSubmitted` state to `false`.
      * 
-     * @default  () => { isSubmitted = false; errors.clear() }
+     * @default () => { isSubmitted = false; errors.clear() }
      */
     onReset?: (e: Event) => void
 }
diff --git a/apps/docs/src/content/docs/api-reference/icons.mdx b/apps/docs/src/content/docs/api-reference/icons.mdx
index 23c09e45..c6f0bff8 100644
--- a/apps/docs/src/content/docs/api-reference/icons.mdx
+++ b/apps/docs/src/content/docs/api-reference/icons.mdx
@@ -4,6 +4,12 @@ sidebar:
   order: 12
 ---
 
+:::note
+
+See [Translation](../translation/) for `Label` and `Labels` types.
+
+:::
+
 ```typescript
 import type { Snippet } from "svelte";
 
diff --git a/apps/docs/src/content/docs/api-reference/overview.mdx b/apps/docs/src/content/docs/api-reference/overview.mdx
deleted file mode 100644
index a9756708..00000000
--- a/apps/docs/src/content/docs/api-reference/overview.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Overview
-sidebar:
-  order: 0
----
-
-import { LinkCard, CardGrid } from '@astrojs/starlight/components';
-
-The form component consists of several parts that allow you to divide responsibility for different aspects of the form.
-
-<CardGrid>
-  <LinkCard
-    title="JSON Schema"
-    href="../json-schema/"
-    description="Your data model"
-  />
-  <LinkCard
-    title="UI Schema"
-    href="../ui-schema/"
-    description="How the form should look like"
-  />
-  <LinkCard title="Fields" href="../fields/" description="Form logic block" />
-  <LinkCard title="Widgets" href="../widgets/" description="Various input elements" />
-  <LinkCard title="Components" href="../components/" description="Reusable UI elements" />
-  <LinkCard title="Templates" href="../templates/" description="Standardized component structures"/>
-</CardGrid>
diff --git a/apps/docs/src/content/docs/api-reference/translation.mdx b/apps/docs/src/content/docs/api-reference/translation.mdx
index 560b08f0..02cf30c7 100644
--- a/apps/docs/src/content/docs/api-reference/translation.mdx
+++ b/apps/docs/src/content/docs/api-reference/translation.mdx
@@ -23,4 +23,6 @@ interface Labels {
   "move-array-item-down": [];
   "add-array-item": [];
 }
-```
\ No newline at end of file
+
+type Label = keyof Labels;
+```
diff --git a/apps/docs/src/content/docs/guides/_bind-form.svelte b/apps/docs/src/content/docs/guides/_bind-form.svelte
index 5899b7d6..a401ce87 100644
--- a/apps/docs/src/content/docs/guides/_bind-form.svelte
+++ b/apps/docs/src/content/docs/guides/_bind-form.svelte
@@ -1,27 +1,22 @@
 <script lang="ts">
-  import type { Schema } from "@sjsf/form";
+  import { FormContent, type Schema } from "@sjsf/form";
 
-  import CustomForm from "@/components/custom-form.svelte";
+  import { useCustomForm } from "@/components/custom-form";
 
   const schema: Schema = {
     type: "string",
   };
 
-  let form = $state<HTMLFormElement>();
-</script>
-
-<CustomForm bind:form {schema} novalidate onSubmit={(v) => window.alert(v)}>
-  {null}
-</CustomForm>
+  const form = useCustomForm({
+    schema,
+    onSubmit: (v) => window.alert(v),
+  });
 
-<button
-  onclick={() => {
-    form?.requestSubmit();
-  }}>My submit</button
->
+  let formElement: HTMLFormElement;
+</script>
 
-<button onclick={() => {
-  form?.reset();
-}} >
-  My reset
-</button>
+<form bind:this={formElement} use:form.enhance>
+  <FormContent bind:value={form.formValue} />
+</form>
+<button onclick={() => formElement?.requestSubmit()}>My submit</button>
+<button onclick={() => formElement?.reset()}> My reset </button>
diff --git a/apps/docs/src/content/docs/guides/_errors-list.svelte b/apps/docs/src/content/docs/guides/_errors-list.svelte
index ddd2bee4..50eaa4cc 100644
--- a/apps/docs/src/content/docs/guides/_errors-list.svelte
+++ b/apps/docs/src/content/docs/guides/_errors-list.svelte
@@ -1,26 +1,27 @@
 <script lang="ts">
-  import type { ErrorObject } from 'ajv';
-  import type { Errors } from "@sjsf/form";
-  import { SvelteMap } from 'svelte/reactivity';
+  import { SimpleForm } from "@sjsf/form";
 
-  import CustomForm from "@/components/custom-form.svelte";
+  import { useCustomForm } from "@/components/custom-form";
 
-  import { objectSchema } from './_demo-schemas';
+  import { objectSchema } from "./_demo-schemas";
 
-  let errors: Errors<ErrorObject> = $state.raw(new SvelteMap());
+  const form = useCustomForm({
+    schema: objectSchema,
+    onSubmit: console.log,
+  });
 </script>
 
-<CustomForm
-  bind:errors
-  schema={objectSchema}
+<SimpleForm
+  {form}
   novalidate
-  onSubmit={console.log}
+  style="display: flex; flex-direction: column; gap: 1rem"
 />
-{#if errors.size > 0}
+
+{#if form.errors.size > 0}
   <div style="padding-top: 1rem;">
     <span style="font-size: larger; font-weight: bold;">Errors</span>
     <ui style="color: red;">
-      {#each errors as [field, fieldErrors] (field)}
+      {#each form.errors as [field, fieldErrors] (field)}
         {#each fieldErrors as err}
           <li>"{err.propertyTitle}" {err.message}</li>
         {/each}
diff --git a/apps/docs/src/content/docs/guides/_focus-on-first-error.svelte b/apps/docs/src/content/docs/guides/_focus-on-first-error.svelte
index ca09a1f5..5dee733b 100644
--- a/apps/docs/src/content/docs/guides/_focus-on-first-error.svelte
+++ b/apps/docs/src/content/docs/guides/_focus-on-first-error.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
+  import { SimpleForm } from "@sjsf/form";
   import { focusOnFirstError } from "@sjsf/form/focus-on-first-error";
 
-  import CustomForm from "@/components/custom-form.svelte";
+  import { useCustomForm } from "@/components/custom-form";
 
   import { objectSchema } from "./_demo-schemas";
+
+  const form = useCustomForm({
+    schema: objectSchema,
+    onSubmit: console.log,
+    onSubmitError: focusOnFirstError,
+  });
 </script>
 
-<CustomForm
-  schema={objectSchema}
+<SimpleForm
+  {form}
   novalidate
-  onSubmitError={focusOnFirstError}
+  style="display: flex; flex-direction: column; gap: 1rem"
 />
diff --git a/apps/docs/src/content/docs/guides/_form-data.svelte b/apps/docs/src/content/docs/guides/_form-data.svelte
index 37ae1966..dcd9e794 100644
--- a/apps/docs/src/content/docs/guides/_form-data.svelte
+++ b/apps/docs/src/content/docs/guides/_form-data.svelte
@@ -1,27 +1,24 @@
 <script lang="ts">
-  import { SvelteMap } from "svelte/reactivity";
+  import { type Schema, SimpleForm } from "@sjsf/form";
 
-  import type { Schema, Errors } from "@sjsf/form";
-
-  import CustomForm from "@/components/custom-form.svelte";
-  import type { ErrorObject } from "ajv";
+  import { useCustomForm } from "@/components/custom-form";
 
   const schema: Schema = {
     type: "string",
     minLength: 10,
   };
 
-  let value = $state("initial");
-
-  let errors: Errors<ErrorObject> = $state.raw(new SvelteMap());
+  const form = useCustomForm({
+    initialValue: "initial",
+    schema,
+    onSubmit: console.log,
+  });
 </script>
 
-<CustomForm bind:value bind:errors {schema} novalidate onSubmit={console.log} />
+<SimpleForm style="display: flex; flex-direction: column; gap: 1rem" {form} />
 
-<div>
-  <pre>{JSON.stringify(
-      { value, errors: Object.fromEntries(errors) },
-      null,
-      2
-    )}</pre>
-</div>
+<pre>{JSON.stringify(
+    { value: form.value, errors: Object.fromEntries(form.errors) },
+    null,
+    2
+  )}</pre>
diff --git a/apps/docs/src/content/docs/guides/_icons.svelte b/apps/docs/src/content/docs/guides/_icons.svelte
index 199c8a35..cba656b2 100644
--- a/apps/docs/src/content/docs/guides/_icons.svelte
+++ b/apps/docs/src/content/docs/guides/_icons.svelte
@@ -1,20 +1,21 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { Schema } from "@sjsf/form";
+  import { type Schema, SimpleForm } from "@sjsf/form";
 
-  import CustomForm from "@/components/custom-form.svelte";
+  import { useCustomForm } from "@/components/custom-form";
 
-  const { children: icon }: { children: Snippet } = $props();
+  const { children }: { children: Snippet } = $props();
 
   const schema: Schema = {
-    title: "With icon",
+    title: "With icons",
   };
-  let value = $state();
+  
+  const form = useCustomForm({
+    schema,
+    icons: {
+      submit: children
+    }
+  });
 </script>
 
-<CustomForm
-  bind:value
-  icons={{ submit: icon }}
-  {schema}
-  onSubmit={console.log}
-/>
+<SimpleForm {form} />
diff --git a/apps/docs/src/content/docs/guides/_inputs-validation.svelte b/apps/docs/src/content/docs/guides/_inputs-validation.svelte
index 72f641ea..0ac02aa6 100644
--- a/apps/docs/src/content/docs/guides/_inputs-validation.svelte
+++ b/apps/docs/src/content/docs/guides/_inputs-validation.svelte
@@ -1,14 +1,19 @@
 <script lang="ts">
-  import { ON_CHANGE, ON_INPUT, AFTER_SUBMITTED } from "@sjsf/form";
+  import { ON_CHANGE, ON_INPUT, AFTER_SUBMITTED, SimpleForm } from "@sjsf/form";
 
-  import CustomForm from "@/components/custom-form.svelte";
+  import { useCustomForm } from "@/components/custom-form";
 
   import { objectSchema } from "./_demo-schemas";
+
+  const form = useCustomForm({
+    schema: objectSchema,
+    inputsValidationMode: ON_INPUT | ON_CHANGE | AFTER_SUBMITTED,
+    onSubmit: console.log,
+  });
 </script>
 
-<CustomForm
-  schema={objectSchema}
-  inputsValidationMode={ON_INPUT | ON_CHANGE | AFTER_SUBMITTED}
+<SimpleForm
+  {form}
   novalidate
-  onSubmit={console.log}
+  style="display: flex; flex-direction: column; gap: 1rem"
 />
diff --git a/apps/docs/src/content/docs/guides/_live-validation.svelte b/apps/docs/src/content/docs/guides/_live-validation.svelte
index f37e008c..6a13d5b5 100644
--- a/apps/docs/src/content/docs/guides/_live-validation.svelte
+++ b/apps/docs/src/content/docs/guides/_live-validation.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { SvelteMap } from "svelte/reactivity";
   import Ajv from "ajv";
-  import { Form, type Errors, type Schema } from "@sjsf/form";
+  import { useForm, SimpleForm, type Schema } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/form/basic-theme";
   import {
@@ -16,25 +15,21 @@
 
   const schema: Schema = {
     type: "string",
-    minLength: 7,
+    minLength: 10,
   };
 
-  let form: Form<any, any>;
-  let value = $state("initial");
-  let errors: Errors = $state.raw(new SvelteMap());
+  const form = useForm({
+    ...theme,
+    initialValue: "initial",
+    schema,
+    validator,
+    translation,
+    onSubmit: console.log,
+  });
+
   $effect(() => {
-    value;
-    errors = form.validate();
+    form.errors = form.validate();
   });
 </script>
 
-<Form
-  bind:this={form}
-  bind:value
-  bind:errors
-  {...theme}
-  {schema}
-  {validator}
-  {translation}
-  onSubmit={console.log}
-/>
+<SimpleForm {form} style="display: flex; flex-direction: column; gap: 1rem" />
diff --git a/apps/docs/src/content/docs/guides/_minimal-setup.svelte b/apps/docs/src/content/docs/guides/_minimal-setup.svelte
index 31d3618e..06ac5e55 100644
--- a/apps/docs/src/content/docs/guides/_minimal-setup.svelte
+++ b/apps/docs/src/content/docs/guides/_minimal-setup.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Ajv from "ajv";
-  import { Form, type Schema } from "@sjsf/form";
+  import { type Schema, useForm, SimpleForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/form/basic-theme";
   import {
@@ -14,21 +14,17 @@
   );
 
   const schema: Schema = {
-    type: "object",
-    title: "Mini form",
-    properties: {
-      text: {
-        type: "string",
-      }
-    },
-    required: ["text"],
-  }
+    type: "string",
+    title: "Simple text input",
+  };
+
+  const form = useForm({
+    ...theme,
+    schema,
+    validator,
+    translation,
+    onSubmit: console.log,
+  });
 </script>
 
-<Form
-  {...theme}
-  {schema}
-  {validator}
-  {translation}
-  onsubmit={(e) => e.preventDefault()}
-/>
+<SimpleForm {form} style="display: flex; flex-direction: column; gap: 1rem" />
diff --git a/apps/docs/src/content/docs/guides/_ui-schema.svelte b/apps/docs/src/content/docs/guides/_ui-schema.svelte
index 40afb6b8..623c6c42 100644
--- a/apps/docs/src/content/docs/guides/_ui-schema.svelte
+++ b/apps/docs/src/content/docs/guides/_ui-schema.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type { Schema, UiSchemaRoot } from "@sjsf/form";
+  import { SimpleForm, type Schema, type UiSchemaRoot } from "@sjsf/form";
 
-  import CustomForm from "@/components/custom-form.svelte";
+  import { useCustomForm } from "@/components/custom-form";
 
   const schema: Schema = {
-    title: "Schema title",
     type: "string",
+    title: "Simple text input",
   };
 
   const uiSchema: UiSchemaRoot = {
@@ -17,6 +17,12 @@
       },
     },
   };
+
+  const form = useCustomForm({
+    schema,
+    uiSchema,
+    onSubmit: console.log,
+  });
 </script>
 
-<CustomForm {schema} {uiSchema} onSubmit={console.log} />
+<SimpleForm {form} style="display: flex; flex-direction: column; gap: 1rem" />
diff --git a/apps/docs/src/content/docs/guides/labels-and-icons.mdx b/apps/docs/src/content/docs/guides/labels-and-icons.mdx
index 51bd2457..d94b0860 100644
--- a/apps/docs/src/content/docs/guides/labels-and-icons.mdx
+++ b/apps/docs/src/content/docs/guides/labels-and-icons.mdx
@@ -47,11 +47,13 @@ Usage:
 
 ```svelte
 <script lang="ts">
-  import { Form } from '@sjsf/form';
+  import { useForm } from '@sjsf/form';
   import { icons } from '@sjsf/lucide-icons';
-</script>
 
-<Form {icons} />
+  const form = useForm({
+    icons
+  })
+</script>
 ```
 
 <LinkButton
@@ -85,11 +87,13 @@ Usage:
 
 ```svelte
 <script lang="ts">
-  import { Form } from '@sjsf/form';
+  import { useForm } from '@sjsf/form';
   import { icons } from '@sjsf/flowbite-icons';
-</script>
 
-<Form {icons} />
+  const form = useForm({
+    icons
+  })
+</script>
 ```
 
 <LinkButton
diff --git a/apps/docs/src/content/docs/guides/programmatic-control.mdx b/apps/docs/src/content/docs/guides/programmatic-control.mdx
index 42db04c9..4a703852 100644
--- a/apps/docs/src/content/docs/guides/programmatic-control.mdx
+++ b/apps/docs/src/content/docs/guides/programmatic-control.mdx
@@ -9,24 +9,10 @@ import { Code, Card } from '@astrojs/starlight/components';
 import BindForm from './_bind-form.svelte';
 import bindFormCode from './_bind-form.svelte?raw';
 
-If you need to control the form programmatically, you can bind to the `form` property.
+You can bind to the from element to control it programmatically:
 
 <Code code={bindFormCode} lang="svelte" />
 
 <Card>
   <BindForm client:only="svelte" />
 </Card>
-
-## Methods
-
-Also you can bind to `this` to get access to exported methods:
-
-### Validate
-
-Perform validation on the form without form state modifications.
-
-```typescript
-import type { Errors } from '@sjsf/form';
-
-function validate(): Errors<E>
-```
diff --git a/apps/docs/src/content/docs/guides/quickstart.mdx b/apps/docs/src/content/docs/guides/quickstart.mdx
index 90c9b219..6d9ca597 100644
--- a/apps/docs/src/content/docs/guides/quickstart.mdx
+++ b/apps/docs/src/content/docs/guides/quickstart.mdx
@@ -8,10 +8,12 @@ import { Code, Card, LinkCard } from '@astrojs/starlight/components';
 
 
 import MinimalSetup from './_minimal-setup.astro';
-import UiSchema from './_ui-schema.astro';
-import FormData from './_form-data.astro';
 import minimalSetupCode from './_minimal-setup.svelte?raw';
+
+import UiSchema from './_ui-schema.astro';
 import uiSchemaCode from './_ui-schema.svelte?raw';
+
+import FormData from './_form-data.astro';
 import formDataCode from './_form-data.svelte?raw';
 
 ## Minimal setup
@@ -24,17 +26,13 @@ Let's explore the most basic setup:
   <MinimalSetup />
 </Card>
 
-With this setting, the form will be built based on the JSON Schema definition and
-will behave like a normal HTML form, performing only HTML5 validation.
-
-<LinkCard title="JSON Schema API reference" href="../../api-reference/json-schema/" />
-
-But by providing additional properties we can customize the form behavior.
+Quite verbose and here's why:
 
-## Handlers
+- **Explicit Configuration**: The library favors explicit configuration over "magic" defaults.
+- **Tree-Shakeable Architecture**: Each feature is separated into modules so you can import only the functionality you need, keeping your bundle lean and optimized.
+- **Highly Customizable**: We provide extensive customization options so that you can customize every piece of from.
 
-By providing `onSubmit` handler, you can achieve the form data validation and get a snapshot of the current form data
-(if valid, otherwise the `onSubmitError` handler will be triggered with the errors).
+<LinkCard title="JSON Schema API reference" href="../../api-reference/json-schema/" />
 
 <LinkCard title="Handlers API reference" href="../../api-reference/handlers/" />
 
@@ -42,6 +40,12 @@ By providing `onSubmit` handler, you can achieve the form data validation and ge
 
 You can also customize the form UI with the `uiSchema` property.
 
+:::note
+
+We'll talk about `useCustomForm` in [Custom form](../../advanced/custom-form/) guide.
+
+:::
+
 <Code code={uiSchemaCode} lang="svelte" />
 
 <Card>
@@ -53,16 +57,10 @@ You can also customize the form UI with the `uiSchema` property.
 
 ## Form state
 
-You can use bindable properties like `value` and `errors` to work with form state.
+You can use properties like `value` and `errors` to work with form state.
 
 <Code code={formDataCode} lang="svelte" />
 
 <Card>
   <FormData />
 </Card>
-
-:::tip
-
-To make the entire form read-only use the `inert` attribute.
-
-:::
diff --git a/apps/docs/src/content/docs/guides/validation.mdx b/apps/docs/src/content/docs/guides/validation.mdx
index 41c24043..02df20ec 100644
--- a/apps/docs/src/content/docs/guides/validation.mdx
+++ b/apps/docs/src/content/docs/guides/validation.mdx
@@ -7,16 +7,18 @@ sidebar:
 import { Code, Card, LinkCard } from '@astrojs/starlight/components';
 
 import LiveValidation from './_live-validation.astro'
-import InputsValidation from './_inputs-validation.astro'
-import FocusOnFirsError from './_focus-on-first-error.astro'
-import ErrorsList from './_errors-list.astro'
-
 import liveValidationCode from './_live-validation.svelte?raw'
+
+import InputsValidation from './_inputs-validation.astro'
 import inputsValidationCode from './_inputs-validation.svelte?raw'
+
+import FocusOnFirsError from './_focus-on-first-error.astro'
 import focusOnFirstErrorCode from './_focus-on-first-error.svelte?raw'
+
+import ErrorsList from './_errors-list.astro'
 import errorsListCode from './_errors-list.svelte?raw'
 
-By default form data will be validated by HTML5 validation and provided validator only on submission.
+By default, form data will only be validated by HTML5 validation and the provided validator when submitted.
 
 :::tip
 
diff --git a/apps/docs/src/content/docs/guides/value-vs-form-value.mdx b/apps/docs/src/content/docs/guides/value-vs-form-value.mdx
new file mode 100644
index 00000000..43bf84ff
--- /dev/null
+++ b/apps/docs/src/content/docs/guides/value-vs-form-value.mdx
@@ -0,0 +1,20 @@
+---
+title: "`value` vs `formValue`"
+sidebar:
+  order: 4
+---
+
+Once a form is created, you have access to its state through the `value` and `formValue` properties.
+Let's take a look at their areas of application:
+
+`value: T | undefined`
+
+- Intended for use by the user
+- Maintains the consistency of the form state
+  - Returns a snapshot of the form state
+  - The update takes into account the default values from the JSON Schema
+
+`formValue: SchemaValue | undefined`
+
+- Intended for use by the library
+- Direct access to the form state
diff --git a/apps/docs/src/content/docs/themes/_basic-theme.svelte b/apps/docs/src/content/docs/themes/_basic-theme.svelte
index c7e93c9b..a75e2afe 100644
--- a/apps/docs/src/content/docs/themes/_basic-theme.svelte
+++ b/apps/docs/src/content/docs/themes/_basic-theme.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
+  import { SimpleForm } from "@sjsf/form";
   import { theme } from "@sjsf/form/basic-theme";
 
-  import CustomForm from "@/components/custom-form.svelte";
+  import { useCustomForm } from "@/components/custom-form";
 
   import { schema, uiSchema } from "./_demo-schema";
-
-  let value = $state();
+  
+  const form = useCustomForm({
+    ...theme,
+    schema,
+    uiSchema,
+  });
 </script>
 
-<CustomForm
-  {...theme}
-  bind:value
-  {schema}
-  {uiSchema}
+<SimpleForm
+  {form}
   novalidate
-  onSubmit={console.log}
+  style="display: flex; flex-direction: column; gap: 1rem;"
 />
 
-<pre style="margin-top: 1rem">{JSON.stringify(value, null, 2)}</pre>
+<pre>{JSON.stringify(form.value, null, 2)}</pre>
diff --git a/apps/docs/src/content/docs/themes/_daisyui-theme.svelte b/apps/docs/src/content/docs/themes/_daisyui-theme.svelte
index cd8dc887..0f61bad6 100644
--- a/apps/docs/src/content/docs/themes/_daisyui-theme.svelte
+++ b/apps/docs/src/content/docs/themes/_daisyui-theme.svelte
@@ -1,25 +1,26 @@
 <script lang="ts">
+  import { SimpleForm } from "@sjsf/form";
   import { theme } from "@sjsf/daisyui-theme";
 
-  import { astroTheme } from "@/theme.svelte";
-  import CustomForm from "@/components/custom-form.svelte";
+  import { useAstro } from "@/astro.svelte";
+  import { useCustomForm } from "@/components/custom-form";
 
   import { schema, uiSchema } from "./_demo-schema";
 
-  const astro = astroTheme();
+  const astro = useAstro();
 
-  let value = $state()
+  const form = useCustomForm({
+    ...theme,
+    schema,
+    uiSchema,
+  });
 </script>
 
-<CustomForm
-  {...theme}
-  bind:value
-  {schema}
-  {uiSchema}
+<SimpleForm
+  {form}
   novalidate
-  onSubmit={console.log}
-  style="background-color: transparent; margin-bottom: 1rem;"
+  style="display: flex; flex-direction: column; gap: 1rem; background-color: transparent; margin-bottom: 1rem;"
   data-theme={astro.darkOrLight}
 />
 
-<pre>{JSON.stringify(value, null, 2)}</pre>
+<pre>{JSON.stringify(form.value, null, 2)}</pre>
diff --git a/apps/docs/src/content/docs/themes/_flowbite-theme.svelte b/apps/docs/src/content/docs/themes/_flowbite-theme.svelte
index 728b9f85..c3711dbf 100644
--- a/apps/docs/src/content/docs/themes/_flowbite-theme.svelte
+++ b/apps/docs/src/content/docs/themes/_flowbite-theme.svelte
@@ -1,24 +1,25 @@
 <script lang="ts">
+  import { SimpleForm } from "@sjsf/form";
   import { theme } from "@sjsf/flowbite-theme";
 
-  import { astroTheme } from "@/theme.svelte";
-  import CustomForm from "@/components/custom-form.svelte";
+  import { useAstro } from "@/astro.svelte";
+  import { useCustomForm } from "@/components/custom-form";
 
   import { schema, uiSchema } from "./_demo-schema";
 
-  const astro = astroTheme();
+  const astro = useAstro();
 
-  let value = $state();
+  const form = useCustomForm({
+    ...theme,
+    schema,
+    uiSchema,
+  });
 </script>
 
-<CustomForm
-  {...theme}
-  bind:value
-  {schema}
-  {uiSchema}
+<SimpleForm
+  {form}
   novalidate
-  onSubmit={console.log}
   class="flex flex-col gap-4 mb-4 {astro.darkOrLight}"
 />
 
-<pre>{JSON.stringify(value, null, 2)}</pre>
+<pre>{JSON.stringify(form.value, null, 2)}</pre>
diff --git a/apps/docs/src/content/docs/themes/_shadcn-theme.svelte b/apps/docs/src/content/docs/themes/_shadcn-theme.svelte
index c40b4e70..2f6bd5da 100644
--- a/apps/docs/src/content/docs/themes/_shadcn-theme.svelte
+++ b/apps/docs/src/content/docs/themes/_shadcn-theme.svelte
@@ -1,27 +1,24 @@
 <script lang="ts">
+  import { SimpleForm } from "@sjsf/form";
   import { theme, setThemeContext } from "@sjsf/shadcn-theme";
-  import { components } from '@sjsf/shadcn-theme/default'
+  import { components } from "@sjsf/shadcn-theme/default";
 
-  import { astroTheme } from "@/theme.svelte";
-  import CustomForm from "@/components/custom-form.svelte";
+  import { useAstro } from "@/astro.svelte";
+  import { useCustomForm } from "@/components/custom-form";
 
   import { schema, uiSchema } from "./_demo-schema";
 
-  const astro = astroTheme();
+  const astro = useAstro();
 
-  let value = $state();
+  const form = useCustomForm({
+    ...theme,
+    schema,
+    uiSchema,
+  });
 
-  setThemeContext({ components })
+  setThemeContext({ components });
 </script>
 
-<CustomForm
-  {...theme}
-  bind:value
-  {schema}
-  {uiSchema}
-  novalidate
-  onSubmit={console.log}
-  class="flex flex-col gap-4 {astro.darkOrLight}"
-/>
+<SimpleForm {form} novalidate class="flex flex-col gap-4 {astro.darkOrLight}" />
 
-<pre style="padding-top: 1rem;">{JSON.stringify(value, null, 2)}</pre>
+<pre style="padding-top: 1rem;">{JSON.stringify(form.value, null, 2)}</pre>
diff --git a/apps/docs/src/content/docs/themes/_skeleton-theme.svelte b/apps/docs/src/content/docs/themes/_skeleton-theme.svelte
index 4d7985a5..62e53300 100644
--- a/apps/docs/src/content/docs/themes/_skeleton-theme.svelte
+++ b/apps/docs/src/content/docs/themes/_skeleton-theme.svelte
@@ -1,26 +1,27 @@
 <script lang="ts">
+  import { SimpleForm } from '@sjsf/form';
   import { theme } from "@sjsf/skeleton-theme";
 
-  import { astroTheme } from "@/theme.svelte";
-  import CustomForm from "@/components/custom-form.svelte";
+  import { useAstro } from "@/astro.svelte";
+  import { useCustomForm } from "@/components/custom-form";
 
   import { schema, uiSchema } from "./_demo-schema";
 
-  const astro = astroTheme();
+  const astro = useAstro();
 
-  let value = $state();
+  const form = useCustomForm({
+    ...theme,
+    schema,
+    uiSchema,
+  });
 </script>
 
-<CustomForm
-  {...theme}
-  bind:value
-  {schema}
-  {uiSchema}
+<SimpleForm
+  {form}
   novalidate
-  onSubmit={console.log}
   class="flex flex-col gap-4 {astro.darkOrLight}"
   style="margin-bottom: 1rem;"
   data-theme="cerberus"
 />
 
-<pre>{JSON.stringify(value, null, 2)}</pre>
+<pre>{JSON.stringify(form.value, null, 2)}</pre>
diff --git a/apps/playground/src/app.svelte b/apps/playground/src/app.svelte
index fd457cd5..c548feae 100644
--- a/apps/playground/src/app.svelte
+++ b/apps/playground/src/app.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import { SvelteMap } from 'svelte/reactivity';
   import Ajv from "ajv";
-  import { ON_BLUR, ON_CHANGE, ON_INPUT, AFTER_CHANGED, AFTER_SUBMITTED, AFTER_TOUCHED, type Errors } from "@sjsf/form";
+  import { ON_BLUR, ON_CHANGE, ON_INPUT, AFTER_CHANGED, AFTER_SUBMITTED, AFTER_TOUCHED, useForm, SimpleForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { AjvValidator, addFormComponents, DEFAULT_AJV_CONFIG } from "@sjsf/ajv8-validator";
   import { focusOnFirstError } from '@sjsf/form/focus-on-first-error';
+  import { setThemeContext } from '@sjsf/shadcn-theme'
+  import { components } from '@sjsf/shadcn-theme/default'
 
-  import Form from "./form.svelte";
   import { themes, themeStyles } from './themes'
   import { icons, iconsStyles } from './icons'
   import { ShadowHost } from "./shadow";
@@ -43,7 +44,6 @@
   let sampleName = $state(initialSampleName);
   let schema = $state(samples[initialSampleName].schema);
   let uiSchema = $state(samples[initialSampleName].uiSchema);
-  let value = $state(samples[initialSampleName].formData);
 
   const parsedThemeName = url.searchParams.get("theme");
   function selectTheme(name: keyof typeof themes, replace = false) {
@@ -78,13 +78,48 @@
     )
   );
 
-
   let disabled = $state(false);
   let html5Validation = $state(false);
   let doFocusOnFirstError = $state(true);
-  let errors: Errors = $state.raw(
-    samples[initialSampleName].errors ?? new SvelteMap()
-  );
+
+  const form = useForm({
+    initialValue: samples[initialSampleName].formData,
+    initialErrors: samples[initialSampleName].errors ?? new SvelteMap(),
+    translation,
+    get schema() {
+      return schema;
+    },
+    get uiSchema() {
+      return uiSchema;
+    },
+    get components() {
+      return theme.components;
+    },
+    get widgets() {
+      return theme.widgets;
+    },
+    get validator() {
+      return validator;
+    },
+    get disabled() {
+      return disabled;
+    },
+    get inputsValidationMode() {
+      return validationEvent | validationAfter
+    },
+    get icons() {
+      return iconSet;
+    },
+    onSubmit (value) {
+      console.log("submit", value);
+    },
+    onSubmitError (errors, e) {
+      if (doFocusOnFirstError) {
+        focusOnFirstError(errors, e);
+      }
+      console.log("errors", errors);
+    },
+  })
 
   let playgroundTheme = $state<"system" | "light" | "dark">(
     localStorage.theme ?? "system"
@@ -104,6 +139,8 @@
   const urlValidationAfter = Number(url.searchParams.get("vafter") ?? 0)
   const initialValidationAfter = [0, AFTER_SUBMITTED, AFTER_TOUCHED, AFTER_CHANGED].find((v) => v === urlValidationAfter) ?? 0
   let validationAfter = $state(setValidation("vafter", initialValidationAfter, true));
+
+  setThemeContext({ components });
 </script>
 
 <div
@@ -173,8 +210,8 @@
           sampleName = selectSample(name as keyof typeof samples);
           schema = samples[sampleName].schema;
           uiSchema = samples[sampleName].uiSchema;
-          value = samples[sampleName].formData;
-          errors = samples[sampleName].errors ?? new SvelteMap();
+          form.value = samples[sampleName].formData;
+          form.errors = samples[sampleName].errors ?? new SvelteMap();
         }}
       >
         {name}
@@ -186,36 +223,17 @@
       <Editor class="font-mono h-[400px] border rounded p-2 data-[error=true]:border-red-500 data-[error=true]:outline-none bg-transparent" bind:value={schema} />
       <div class="flex gap-2">
         <Editor class="font-mono h-[400px] grow border rounded p-2 data-[error=true]:border-red-500 data-[error=true]:outline-none bg-transparent" bind:value={uiSchema} />
-        <Editor class="font-mono h-[400px] grow border rounded p-2 data-[error=true]:border-red-500 data-[error=true]:outline-none bg-transparent" bind:value={value} />
+        <Editor class="font-mono h-[400px] grow border rounded p-2 data-[error=true]:border-red-500 data-[error=true]:outline-none bg-transparent" bind:value={form.value} />
       </div>
     </div>
     <ShadowHost class="flex-[3] max-h-[808px] overflow-y-auto" style={`${themeStyle}\n${iconSetStyle}`}>
-      {#key themeName}
-        <Form
-          {themeName}
-          {lightOrDark}
-          bind:value
-          {...theme}
-          icons={iconSet}
-          {schema}
-          {uiSchema}
-          {validator}
-          {translation}
-          {disabled}
-          novalidate={!html5Validation || undefined}
-          inputsValidationMode={validationEvent | validationAfter}
-          bind:errors
-          onSubmit={(value) => {
-            console.log("submit", value);
-          }}
-          onSubmitError={(errors, e) => {
-            if (doFocusOnFirstError) {
-              focusOnFirstError(errors, e);
-            }
-            console.log("errors", errors);
-          }}
-        />
-      {/key}
+      <SimpleForm
+        {form}
+        data-theme={themeName === "skeleton" ? "cerberus" : lightOrDark}
+        class={lightOrDark}
+        style="background-color: transparent; display: flex; flex-direction: column; gap: 1rem; padding: 0.3rem;"
+        novalidate={!html5Validation || undefined}
+      />
     </ShadowHost>
   </div>
 </div>
diff --git a/apps/playground/src/form.svelte b/apps/playground/src/form.svelte
deleted file mode 100644
index a9305fb6..00000000
--- a/apps/playground/src/form.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts" generics="T, E">
-  import { SvelteMap } from "svelte/reactivity";
-  import { Form, type FormProps } from "@sjsf/form";
-  import { components } from "@sjsf/shadcn-theme/default";
-  import { setThemeContext } from "@sjsf/shadcn-theme";
-
-  import type { themes } from "./themes";
-
-  interface Props<T> extends FormProps<T, E> {
-    themeName: keyof typeof themes;
-    lightOrDark: "light" | "dark";
-  }
-
-  let {
-    themeName,
-    lightOrDark,
-    value = $bindable(),
-    form = $bindable(),
-    isSubmitted = $bindable(false),
-    errors = $bindable(new SvelteMap()),
-    ...rest
-  }: Props<T> = $props();
-
-  let self: Form<T, E>;
-
-  export function validate() {
-    return self.validate();
-  }
-
-  if (themeName === "shadcn") {
-    setThemeContext({ components });
-  }
-</script>
-
-<Form
-  data-theme={themeName === "skeleton" ? "cerberus" : lightOrDark}
-  class={lightOrDark}
-  style="background-color: transparent; display: flex; flex-direction: column; gap: 1rem; padding: 0.3rem;"
-  bind:this={self}
-  {...rest}
-  bind:value
-  bind:form
-  bind:isSubmitted
-  bind:errors
-/>
diff --git a/packages/daisyui-theme/README.md b/packages/daisyui-theme/README.md
index 6140a605..5a101c02 100644
--- a/packages/daisyui-theme/README.md
+++ b/packages/daisyui-theme/README.md
@@ -2,7 +2,7 @@
 
 The [daisyui](https://github.com/saadeghi/daisyui) based theme for [svelte-jsonschema-form](https://github.com/x0k/svelte-jsonschema-form).
 
-- [Documentation](https://x0k.github.io/svelte-jsonschema-form/)
+- [Documentation](https://x0k.github.io/svelte-jsonschema-form/themes/daisyui/)
 - [Playground](https://x0k.github.io/svelte-jsonschema-form/playground/)
 
 ## Installation
@@ -52,11 +52,13 @@ import themeStyles from "@sjsf/daisyui-theme/styles.css?inline";
 
 ```svelte
 <script lang="ts">
-  import { Form } from '@sjsf/form';
+  import { useForm } from '@sjsf/form';
   import { theme } from '@sjsf/daisyui-theme';
-</script>
 
-<Form {...theme} />
+  const form = useForm({
+    ...theme
+  })
+</script>
 ```
 
 ## License
diff --git a/packages/flowbite-icons/README.md b/packages/flowbite-icons/README.md
index 98b811f7..47a1fb89 100644
--- a/packages/flowbite-icons/README.md
+++ b/packages/flowbite-icons/README.md
@@ -2,7 +2,7 @@
 
 The [flowbite-svelte-icons](https://github.com/themesberg/flowbite-svelte-icons) based icons set for [svelte-jsonschema-form](https://github.com/x0k/svelte-jsonschema-form).
 
-- [Documentation](https://x0k.github.io/svelte-jsonschema-form/)
+- [Documentation](https://x0k.github.io/svelte-jsonschema-form/guides/labels-and-icons/#flowbite-icons)
 - [Playground](https://x0k.github.io/svelte-jsonschema-form/playground/)
 
 ## Installation
@@ -50,11 +50,13 @@ import flowbiteIconsStyles from "@sjsf/flowbite-icons/styles.css?inline";
 
 ```svelte
 <script lang="ts">
-  import { Form } from '@sjsf/form';
+  import { useForm } from '@sjsf/form';
   import { icons } from '@sjsf/flowbite-icons';
-</script>
 
-<Form {icons} />
+  const form = useForm({
+    icons
+  })
+</script>
 ```
 
 ## License
diff --git a/packages/flowbite-theme/README.md b/packages/flowbite-theme/README.md
index f1f48e74..4613b895 100644
--- a/packages/flowbite-theme/README.md
+++ b/packages/flowbite-theme/README.md
@@ -2,7 +2,7 @@
 
 The [flowbite-svelte](https://github.com/themesberg/flowbite-svelte) based theme for [svelte-jsonschema-form](https://github.com/x0k/svelte-jsonschema-form).
 
-- [Documentation](https://x0k.github.io/svelte-jsonschema-form/)
+- [Documentation](https://x0k.github.io/svelte-jsonschema-form/themes/flowbite/)
 - [Playground](https://x0k.github.io/svelte-jsonschema-form/playground/)
 
 ## Installation
@@ -52,11 +52,13 @@ import themeStyles from "@sjsf/flowbite-theme/styles.css?inline";
 
 ```svelte
 <script lang="ts">
-  import { Form } from '@sjsf/form';
+  import { useForm } from '@sjsf/form';
   import { theme } from '@sjsf/flowbite-theme';
-</script>
 
-<Form {...theme} />
+  const form = useForm({
+    ...theme,
+  })
+</script>
 ```
 
 ## License
diff --git a/packages/form/README.md b/packages/form/README.md
index 746d7aa1..5234e6db 100644
--- a/packages/form/README.md
+++ b/packages/form/README.md
@@ -19,7 +19,7 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
 ```svelte
 <script lang="ts">
   import Ajv from 'ajv';
-  import { Form } from '@sjsf/form';
+  import { useForm, SimpleForm, type Schema } from '@sjsf/form';
   import { translation } from '@sjsf/form/translations/en';
   import { theme } from '@sjsf/form/basic-theme';
   import {
@@ -31,11 +31,8 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
   const validator = new AjvValidator(
     addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
   );
-</script>
 
-<Form
-  {...theme}
-  schema={{
+  const schema: Schema = {
     title: 'Tasks',
     type: 'array',
     items: {
@@ -52,11 +49,18 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
       },
       required: ["name"]
     },
-  }}
-  {validator}
-  {translation}
-  onSubmit={console.log}
-/>
+  }
+
+  const form = useForm({
+    ...theme,
+    schema,
+    validator,
+    translation,
+    onSubmit: console.log
+  })
+</script>
+
+<SimpleForm {form} style="display: flex; flex-direction: column; gap: 1rem" />
 ```
 
 ## License
diff --git a/packages/form/src/form/fields/object/object-field.svelte b/packages/form/src/form/fields/object/object-field.svelte
index ccbbeeb2..f0e1268d 100644
--- a/packages/form/src/form/fields/object/object-field.svelte
+++ b/packages/form/src/form/fields/object/object-field.svelte
@@ -64,7 +64,9 @@
   // will populate their `defaults`.
   $effect.pre(() => {
     schemaProperties;
-    value = untrack(() => getDefaultFieldState(ctx, retrievedSchema, value) as SchemaObjectValue);
+    untrack(() => {
+      value = getDefaultFieldState(ctx, retrievedSchema, value) as SchemaObjectValue
+    });
   })
 
   const schemaPropertiesOrder = $derived(
diff --git a/packages/form/src/form/form-base.svelte b/packages/form/src/form/form-base.svelte
index bea44c6e..01e6a51d 100644
--- a/packages/form/src/form/form-base.svelte
+++ b/packages/form/src/form/form-base.svelte
@@ -1,3 +1,7 @@
+<!--
+    @component
+    @deprecated use `SimpleForm` component
+-->
 <script lang="ts" module>
   import type { HTMLFormAttributes } from "svelte/elements";
   import type { Snippet } from 'svelte';
diff --git a/packages/form/src/form/form-content.svelte b/packages/form/src/form/form-content.svelte
new file mode 100644
index 00000000..23086a88
--- /dev/null
+++ b/packages/form/src/form/form-content.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { SchemaValue } from "@/core/schema.js";
+
+  import {
+    retrieveSchema,
+    getFormContext,
+    makeIdSchema,
+    getUiOptions,
+    getField,
+  } from "./context/index.js";
+  import type { Config } from './config.js';
+
+  let { value = $bindable() }: { value: SchemaValue | undefined } = $props();
+
+  const ctx = getFormContext();
+
+  const retrievedSchema = $derived(
+    retrieveSchema(ctx, ctx.schema, value)
+  );
+  const idSchema = $derived(
+    makeIdSchema(
+      ctx,
+      retrievedSchema,
+      ctx.uiSchema["ui:rootFieldId"],
+      value
+    )
+  );
+  const uiOptions = $derived(getUiOptions(ctx, ctx.uiSchema));
+  const config: Config = $derived({
+    name: "",
+    title: uiOptions?.title ?? retrievedSchema.title ?? "",
+    schema: retrievedSchema,
+    uiSchema: ctx.uiSchema,
+    idSchema,
+    uiOptions,
+    required: false,
+  })
+
+  const Field = $derived(getField(ctx, "root", config));
+</script>
+
+<Field bind:value {config} />
diff --git a/packages/form/src/form/form.svelte b/packages/form/src/form/form.svelte
index 43f38b6b..2413d79e 100644
--- a/packages/form/src/form/form.svelte
+++ b/packages/form/src/form/form.svelte
@@ -1,3 +1,7 @@
+<!--
+    @component
+    @deprecated use `SimpleForm` component
+-->
 <script lang="ts" generics="T, E">
   import { SvelteMap } from "svelte/reactivity";
   import { untrack } from "svelte";
diff --git a/packages/form/src/form/icon-or-translation.svelte b/packages/form/src/form/icon-or-translation.svelte
new file mode 100644
index 00000000..322a653d
--- /dev/null
+++ b/packages/form/src/form/icon-or-translation.svelte
@@ -0,0 +1,16 @@
+<script lang="ts" generics="L extends Label" >
+  import { getFormContext } from './context/context.js';
+  import type { Label, Labels } from './translation.js'
+
+  const ctx = getFormContext()
+
+  const { data }: { data: [L, ...Labels[L]] } = $props();
+
+  const icon = $derived(ctx.icons[data[0]])
+</script>
+
+{#if icon}
+  {@render icon(data)}
+{:else}
+  {ctx.translation.apply(null, data as never)}
+{/if}
diff --git a/packages/form/src/form/index.ts b/packages/form/src/form/index.ts
index 5fce76fe..4ff4a297 100644
--- a/packages/form/src/form/index.ts
+++ b/packages/form/src/form/index.ts
@@ -45,3 +45,8 @@ export {
   type Props as FormProps,
 } from "./form-base.svelte";
 export { default as Form } from "./form.svelte";
+
+export * from './use-form.svelte.js'
+export { default as FormContent } from "./form-content.svelte";
+export { default as SubmitButton } from "./submit-button.svelte";
+export { default as SimpleForm } from "./simple-form.svelte";
diff --git a/packages/form/src/form/simple-form.svelte b/packages/form/src/form/simple-form.svelte
new file mode 100644
index 00000000..125dfdab
--- /dev/null
+++ b/packages/form/src/form/simple-form.svelte
@@ -0,0 +1,19 @@
+<script lang="ts" generics="T, E">
+  import type { HTMLFormAttributes } from "svelte/elements";
+
+  import type { FormAPI } from "./use-form.svelte.js";
+  import FormContent from "./form-content.svelte";
+  import SubmitButton from "./submit-button.svelte";
+
+  interface Props extends HTMLFormAttributes {
+    form: FormAPI<T, E>;
+  }
+
+  const { form, ...rest }: Props = $props();
+</script>
+
+<form use:form.enhance {...rest}>
+  <!-- svelte-ignore ownership_invalid_binding -->
+  <FormContent bind:value={form.formValue} />
+  <SubmitButton />
+</form>
diff --git a/packages/form/src/form/use-form.svelte.ts b/packages/form/src/form/use-form.svelte.ts
new file mode 100644
index 00000000..41ab4b1e
--- /dev/null
+++ b/packages/form/src/form/use-form.svelte.ts
@@ -0,0 +1,273 @@
+import type { ComponentInternals, Snippet } from "svelte";
+import type { Action } from "svelte/action";
+import { SvelteMap } from "svelte/reactivity";
+
+import type { SchedulerYield } from "@/lib/scheduler.js";
+import type { Schema, SchemaValue } from "@/core/schema.js";
+
+import type { FormValidator } from "./validator.js";
+import type { Components } from "./component.js";
+import type { Widgets } from "./widgets.js";
+import type { Label, Labels, Translation } from "./translation.js";
+import type { UiSchemaRoot } from "./ui-schema.js";
+import type { Fields } from "./fields/index.js";
+import type { Templates } from "./templates/index.js";
+import type { Icons } from "./icons.js";
+import type { InputsValidationMode } from "./validation.js";
+import type { Errors } from "./errors.js";
+import { setFromContext } from "./context/index.js";
+import { DefaultFormMerger, type FormMerger } from "./merger.js";
+import { fields as defaultFields } from "./fields/index.js";
+import { templates as defaultTemplates } from "./templates/index.js";
+import { DEFAULT_ID_PREFIX, DEFAULT_ID_SEPARATOR } from "./id-schema.js";
+import IconOrTranslation from "./icon-or-translation.svelte";
+
+export interface UseFormOptions<T, E> {
+  validator: FormValidator<E>;
+  schema: Schema;
+  components: Components;
+  translation: Translation;
+  widgets: Widgets;
+  uiSchema?: UiSchemaRoot;
+  merger?: FormMerger;
+  fields?: Fields;
+  templates?: Templates;
+  icons?: Icons;
+  inputsValidationMode?: InputsValidationMode;
+  disabled?: boolean;
+  idPrefix?: string;
+  idSeparator?: string;
+  //
+  initialValue?: T;
+  initialErrors?: Errors<E>;
+  /**
+   * The function to get the form data snapshot
+   *
+   * The snapshot is used to validate the form and passed to
+   * `onSubmit` and `onSubmitError` handlers.
+   *
+   * @default () => $state.snapshot(formValue)
+   */
+  getSnapshot?: () => SchemaValue | undefined;
+  /**
+   * Submit handler
+   *
+   * Will be called when the form is submitted and form data
+   * snapshot is valid
+   */
+  onSubmit?: (value: T | undefined, e: SubmitEvent) => void;
+  /**
+   * Submit error handler
+   *
+   * Will be called when the form is submitted and form data
+   * snapshot is not valid
+   */
+  onSubmitError?: (
+    errors: Errors<E>,
+    e: SubmitEvent,
+    snapshot: SchemaValue | undefined
+  ) => void;
+  /**
+   * Reset handler
+   *
+   * Will be called on form reset.
+   *
+   * By default it will clear the errors and set `isSubmitted` state to `false`.
+   *
+   * @default () => { isSubmitted = false; errors.clear() }
+   */
+  onReset?: (e: Event) => void;
+  schedulerYield?: SchedulerYield;
+}
+
+export interface FormState<T, E> {
+  value: T | undefined;
+  formValue: SchemaValue | undefined;
+  errors: Errors<E>;
+  isSubmitted: boolean;
+  validate: () => Errors<E>;
+}
+
+export interface FormAPI<T, E> extends FormState<T, E> {
+  enhance: Action;
+}
+
+type Value = SchemaValue | undefined;
+
+export function useForm<T, E>(options: UseFormOptions<T, E>): FormAPI<T, E> {
+  const merger = $derived(
+    options.merger ?? new DefaultFormMerger(options.validator, options.schema)
+  );
+
+  let value = $state(
+    merger.mergeFormDataAndSchemaDefaults(
+      options.initialValue as Value,
+      options.schema
+    )
+  );
+  let errors: Errors<E> = $state(options.initialErrors ?? new SvelteMap());
+  let isSubmitted = $state(false);
+
+  const getSnapshot = $derived(
+    options.getSnapshot ?? (() => $state.snapshot(value))
+  );
+
+  function validateSnapshot(snapshot: SchemaValue | undefined) {
+    const list = options.validator.validateFormData(options.schema, snapshot);
+    return new SvelteMap(SvelteMap.groupBy(list, (error) => error.instanceId));
+  }
+
+  const submitHandler = (e: SubmitEvent) => {
+    e.preventDefault();
+    isSubmitted = true;
+    const snapshot = getSnapshot();
+    errors = validateSnapshot(snapshot);
+    if (errors.size === 0) {
+      options.onSubmit?.(snapshot as T | undefined, e);
+      return;
+    }
+    options.onSubmitError?.(errors, e, snapshot);
+  };
+
+  const resetHandler = $derived(
+    options.onReset ??
+      (() => {
+        isSubmitted = false;
+        errors.clear();
+      })
+  );
+
+  const inputsValidationMode = $derived(options.inputsValidationMode ?? 0);
+  const uiSchema = $derived(options.uiSchema ?? {});
+  const disabled = $derived(options.disabled ?? false);
+  const idPrefix = $derived(options.idPrefix ?? DEFAULT_ID_PREFIX);
+  const idSeparator = $derived(options.idSeparator ?? DEFAULT_ID_SEPARATOR);
+  const fields = $derived(options.fields ?? defaultFields);
+  const templates = $derived(options.templates ?? defaultTemplates);
+  const icons = $derived(options.icons ?? {});
+  const schedulerYield: SchedulerYield = $derived(
+    (options.schedulerYield ??
+      (typeof scheduler !== "undefined" && "yield" in scheduler))
+      ? scheduler.yield.bind(scheduler)
+      : ({ signal }: Parameters<SchedulerYield>[0]) =>
+          new Promise((resolve, reject) => {
+            setTimeout(() => {
+              if (signal.aborted) {
+                reject(signal.reason);
+              } else {
+                resolve();
+              }
+            }, 0);
+          })
+  );
+
+  setFromContext({
+    get inputsValidationMode() {
+      return inputsValidationMode;
+    },
+    get isSubmitted() {
+      return isSubmitted;
+    },
+    get errors() {
+      return errors;
+    },
+    get schema() {
+      return options.schema;
+    },
+    get uiSchema() {
+      return uiSchema;
+    },
+    get disabled() {
+      return disabled;
+    },
+    get idPrefix() {
+      return idPrefix;
+    },
+    get idSeparator() {
+      return idSeparator;
+    },
+    get validator() {
+      return options.validator;
+    },
+    get merger() {
+      return merger;
+    },
+    get fields() {
+      return fields;
+    },
+    get templates() {
+      return templates;
+    },
+    get components() {
+      return options.components;
+    },
+    get widgets() {
+      return options.widgets;
+    },
+    get translation() {
+      return options.translation;
+    },
+    get icons() {
+      return icons;
+    },
+    get schedulerYield() {
+      return schedulerYield;
+    },
+    iconOrTranslation: (<L extends Label>(
+      internals: ComponentInternals,
+      data: () => [L, ...Labels[L]]
+    ) => {
+      IconOrTranslation(internals, {
+        get data() {
+          return data();
+        },
+      });
+    }) as unknown as Snippet<
+      [
+        {
+          [L in Label]: [L, ...Labels[L]];
+        }[Label],
+      ]
+    >,
+  });
+
+  return {
+    get value() {
+      return getSnapshot() as T | undefined;
+    },
+    set value(v) {
+      value = merger.mergeFormDataAndSchemaDefaults(v as Value, options.schema);
+    },
+    get formValue() {
+      return value;
+    },
+    set formValue(v) {
+      value = v;
+    },
+    get errors() {
+      return errors;
+    },
+    set errors(v) {
+      errors = v;
+    },
+    get isSubmitted() {
+      return isSubmitted;
+    },
+    set isSubmitted(v) {
+      isSubmitted = v;
+    },
+    validate() {
+      return validateSnapshot(getSnapshot());
+    },
+    enhance(node) {
+      $effect(() => {
+        node.addEventListener("submit", submitHandler);
+        node.addEventListener("reset", resetHandler);
+        return () => {
+          node.removeEventListener("submit", submitHandler);
+          node.removeEventListener("reset", resetHandler);
+        };
+      });
+    },
+  };
+}
diff --git a/packages/lucide-icons/README.md b/packages/lucide-icons/README.md
index 8cdae72e..9ee09556 100644
--- a/packages/lucide-icons/README.md
+++ b/packages/lucide-icons/README.md
@@ -2,7 +2,7 @@
 
 The [lucide](https://github.com/lucide-icons/lucide) based icons set for [svelte-jsonschema-form](https://github.com/x0k/svelte-jsonschema-form).
 
-- [Documentation](https://x0k.github.io/svelte-jsonschema-form/)
+- [Documentation](https://x0k.github.io/svelte-jsonschema-form/guides/labels-and-icons/#lucide-icons)
 - [Playground](https://x0k.github.io/svelte-jsonschema-form/playground/)
 
 ## Installation
@@ -15,11 +15,13 @@ npm install @sjsf/form @sjsf/lucide-icons
 
 ```svelte
 <script lang="ts">
-  import { Form } from '@sjsf/form';
+  import { useForm } from '@sjsf/form';
   import { icons } from '@sjsf/lucide-icons';
-</script>
 
-<Form {icons} />
+  const form = useForm({
+    icons
+  })
+</script>
 ```
 
 ## License
diff --git a/packages/shadcn-theme/README.md b/packages/shadcn-theme/README.md
index 8e89b6ab..cf486409 100644
--- a/packages/shadcn-theme/README.md
+++ b/packages/shadcn-theme/README.md
@@ -2,7 +2,7 @@
 
 The [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) based theme for [svelte-jsonschema-form](https://github.com/x0k/svelte-jsonschema-form).
 
-- [Documentation](https://x0k.github.io/svelte-jsonschema-form/)
+- [Documentation](https://x0k.github.io/svelte-jsonschema-form/themes/shadcn/)
 - [Playground](https://x0k.github.io/svelte-jsonschema-form/playground/)
 
 ## Installation
@@ -50,14 +50,16 @@ import themeStyles from "@sjsf/shadcn-theme/styles.css?inline";
 
 ```svelte
 <script lang="ts">
-  import { Form } from '@sjsf/form';
+  import { useForm } from '@sjsf/form';
   import { theme, setThemeContext } from '@sjsf/shadcn-theme';
   import { components } from '@sjsf/shadcn-theme/default'
 
+  const form = useForm({
+    ...theme,
+  })
+
   setThemeContext({ components })
 </script>
-
-<Form {...theme} />
 ```
 
 ## License
diff --git a/packages/skeleton-theme/README.md b/packages/skeleton-theme/README.md
index dadb36bd..d77ef46c 100644
--- a/packages/skeleton-theme/README.md
+++ b/packages/skeleton-theme/README.md
@@ -2,7 +2,7 @@
 
 The [skeleton](https://github.com/skeletonlabs/skeleton) based theme for [svelte-jsonschema-form](https://github.com/x0k/svelte-jsonschema-form).
 
-- [Documentation](https://x0k.github.io/svelte-jsonschema-form/)
+- [Documentation](https://x0k.github.io/svelte-jsonschema-form/themes/skeleton/)
 - [Playground](https://x0k.github.io/svelte-jsonschema-form/playground/)
 
 ## Installation
@@ -66,11 +66,13 @@ Bundled themes:
 
 ```svelte
 <script lang="ts">
-  import { Form } from '@sjsf/form';
+  import { useForm } from '@sjsf/form';
   import { theme } from '@sjsf/skeleton-theme';
-</script>
 
-<Form {...theme} />
+  const form = useForm({
+    ...theme,
+  })
+</script>
 ```
 
 ## License