diff --git a/README.md b/README.md index 14fbf23d..01645d40 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,11 @@ In addition, Formisch offers several functions (we call them "methods") that can ## Comparison -What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms. +What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow. + +## Vision + +My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework. ## Partners diff --git a/frameworks/preact/README.md b/frameworks/preact/README.md index 85d69ce7..67c1dd9c 100644 --- a/frameworks/preact/README.md +++ b/frameworks/preact/README.md @@ -59,7 +59,11 @@ In addition, Formisch offers several functions (we call them "methods") that can ## Comparison -What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms. +What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow. + +## Vision + +My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework. ## Partners diff --git a/frameworks/qwik/README.md b/frameworks/qwik/README.md index 6e45f74a..048ca78f 100644 --- a/frameworks/qwik/README.md +++ b/frameworks/qwik/README.md @@ -64,7 +64,11 @@ In addition, Formisch offers several functions (we call them "methods") that can ## Comparison -What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms. +What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow. + +## Vision + +My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework. ## Partners diff --git a/frameworks/react/README.md b/frameworks/react/README.md index 977a3aab..fa752c1f 100644 --- a/frameworks/react/README.md +++ b/frameworks/react/README.md @@ -59,7 +59,13 @@ In addition, Formisch offers several functions (we call them "methods") that can ## Comparison -What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms. +What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow. + +For a side-by-side look at how Formisch compares to React Hook Form and TanStack Form, see the [comparison guide](https://formisch.dev/react/guides/comparison/). + +## Vision + +My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework. ## Partners diff --git a/frameworks/solid/README.md b/frameworks/solid/README.md index 2e3b2794..de9c6c8b 100644 --- a/frameworks/solid/README.md +++ b/frameworks/solid/README.md @@ -59,7 +59,13 @@ In addition, Formisch offers several functions (we call them "methods") that can ## Comparison -What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms. +What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow. + +For a side-by-side look at how Formisch compares to Felte and TanStack Form, see the [comparison guide](https://formisch.dev/solid/guides/comparison/). + +## Vision + +My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework. ## Partners diff --git a/frameworks/svelte/README.md b/frameworks/svelte/README.md index fe24d31f..1e9f4a7d 100644 --- a/frameworks/svelte/README.md +++ b/frameworks/svelte/README.md @@ -59,7 +59,13 @@ In addition, Formisch offers several functions (we call them "methods") that can ## Comparison -What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms. +What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow. + +For a side-by-side look at how Formisch compares to Superforms and TanStack Form, see the [comparison guide](https://formisch.dev/svelte/guides/comparison/). + +## Vision + +My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework. ## Partners diff --git a/frameworks/vue/README.md b/frameworks/vue/README.md index a8f0160e..31cc6b67 100644 --- a/frameworks/vue/README.md +++ b/frameworks/vue/README.md @@ -53,7 +53,13 @@ In addition, Formisch offers several functions (we call them "methods") that can ## Comparison -What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms. +What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow. + +For a side-by-side look at how Formisch compares to VeeValidate, FormKit, and TanStack Form, see the [comparison guide](https://formisch.dev/vue/guides/comparison/). + +## Vision + +My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework. ## Partners diff --git a/website/src/routes/(docs)/react/guides/(get-started)/comparison/index.mdx b/website/src/routes/(docs)/react/guides/(get-started)/comparison/index.mdx new file mode 100644 index 00000000..525d298d --- /dev/null +++ b/website/src/routes/(docs)/react/guides/(get-started)/comparison/index.mdx @@ -0,0 +1,58 @@ +--- +title: Comparison +description: >- + A concise comparison of Formisch with React Hook Form and TanStack Form + across TypeScript inference, validation, and re-render behavior, with a + short decision guide. +contributors: + - fabian-hiller +--- + +import { Link } from '~/components'; + +# Comparison + +Formisch is one of several form libraries available for React. The two most common alternatives are [React Hook Form](https://react-hook-form.com) and [TanStack Form](https://tanstack.com/form/latest). This page is meant as a quick reference for picking the right tool. For a deeper explanation of the architectural differences and the reasoning behind each row of the table below, see our long-form comparison article. + +## At a glance + +| | **Formisch** | React Hook Form | TanStack Form | +| ---------------------- | --------------------------------------- | ----------------------------------- | --------------------------------------- | +| Type source | Inferred from schema | Generic you declare | Inferred from `defaultValues` | +| Validation location | Defined in schema | Per-field or resolver | Per-validator config | +| Validation timing | Form-wide `validate` / `revalidate` | Form-wide `mode` option | Per-validator trigger | +| Async validation | Built-in via schema | Manual loading state | Built-in `isValidating` | +| Re-render scope | Automatic per signal | Manual via `watch` / `useFormState` | Automatic per subscription | +| Schema libraries | Valibot | Any via resolvers | Standard Schema | +| Bundle size (min+gzip) | From ~2.5 kB | ~12 kB | ~15 kB | +| Framework support | React, Preact, Solid, Svelte, Vue, Qwik | React | React, Vue, Solid, Svelte, Lit, Angular | + +The table is intentionally short. It only covers the dimensions that most often drive a library choice in practice. Other differences such as devtools, ecosystem maturity, and community size are real but tend to matter less than how each library handles types, validation, and re-renders. + +## Why Formisch? + +Three reasons to pick Formisch over the alternatives above: + +**One schema, no second source of truth.** A single Valibot schema is everything the form needs: the runtime validator, the source of types, and the description of the form's structure — all at once. There is no separate TypeScript generic to declare, no `defaultValues` object to keep aligned with the schema, no resolver to configure. When the schema changes, every part of the form follows — at compile time and at runtime. + +**The smallest bundle, by a wide margin.** Formisch starts at ~2.5 kB and grows only as you import additional methods like `focus`, `getInput`, and `reset`. That is several times smaller than the alternatives in the table above — and it stays that way because the core is intentionally small and the library is fully tree-shakable, so methods you don't import don't end up in your bundle. + +**Type safety that stays fast.** Types flow from the schema through every API, including deeply nested paths and field arrays. The inference is structured to keep TypeScript editor performance from degrading as schemas grow — which matters in large codebases where heavily-generic form libraries become a friction point. + +## Which library should you use? + +**React Hook Form** is a mature, well-documented choice with a large community and years of production usage. For simple to moderately complex forms, it remains a reasonable default. The tradeoffs only become visible as forms grow: types and schema drift out of sync, validation rules spread across components, and re-render scope becomes your responsibility. + +**TanStack Form** is a good fit when you need fine-grained control over validation timing and built-in async validation handling without building that infrastructure yourself. It is also the natural choice if your team is already invested in the TanStack ecosystem and values a consistent mental model across data fetching, routing, and forms. + +**Formisch** makes the most sense for new projects in TypeScript-heavy codebases, especially when you expect forms to grow in complexity. The schema-first design means there is a single source of truth for types, runtime validation, and form structure, so there is less to keep aligned over time. The main consideration is that Formisch currently supports only [Valibot](https://valibot.dev) as the schema library. + +## Migrating from React Hook Form + +Migrating from React Hook Form to Formisch is a genuine rewrite of the form layer, not a drop-in replacement. The mental model is different: instead of starting from a component and attaching form behavior to it, you start from a schema and build the component around it. The two libraries can coexist in the same application, so you can migrate one form at a time. + +For a side-by-side mapping of common React Hook Form APIs to their Formisch equivalents, see the migration section of the comparison article. + +## Next steps + +If you have decided that Formisch is a good fit, install it via the installation guide and start building by defining your form. diff --git a/website/src/routes/(docs)/react/guides/(get-started)/introduction/index.mdx b/website/src/routes/(docs)/react/guides/(get-started)/introduction/index.mdx index b08be35f..ec53eb42 100644 --- a/website/src/routes/(docs)/react/guides/(get-started)/introduction/index.mdx +++ b/website/src/routes/(docs)/react/guides/(get-started)/introduction/index.mdx @@ -69,7 +69,13 @@ In addition, Formisch offers several functions (we call them "methods") that can ## Comparison -What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to Vite, but for forms. +What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow. + +For a side-by-side look at how Formisch compares to React Hook Form and TanStack Form, see the comparison guide. + +## Vision + +My vision for Formisch is to create a framework-agnostic platform similar to Vite, but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework. ## Partners diff --git a/website/src/routes/(docs)/react/guides/menu.md b/website/src/routes/(docs)/react/guides/menu.md index 9742978f..e3815c18 100644 --- a/website/src/routes/(docs)/react/guides/menu.md +++ b/website/src/routes/(docs)/react/guides/menu.md @@ -4,6 +4,7 @@ - [Introduction](/react/guides/introduction/) - [Installation](/react/guides/installation/) +- [Comparison](/react/guides/comparison/) - [LLMs.txt](/react/guides/llms-txt/) ## Main concepts diff --git a/website/src/routes/(docs)/solid/guides/(get-started)/comparison/index.mdx b/website/src/routes/(docs)/solid/guides/(get-started)/comparison/index.mdx new file mode 100644 index 00000000..ce4ec77a --- /dev/null +++ b/website/src/routes/(docs)/solid/guides/(get-started)/comparison/index.mdx @@ -0,0 +1,56 @@ +--- +title: Comparison +description: >- + A concise comparison of Formisch with Felte and TanStack Form for SolidJS + across TypeScript inference, validation, and reactivity, with a short + decision guide. +contributors: + - fabian-hiller +--- + +import { Link } from '~/components'; + +# Comparison + +Formisch is one of several form libraries available for SolidJS. The two most common alternatives are [Felte](https://felte.dev) and [TanStack Form](https://tanstack.com/form/latest). This page is meant as a quick reference for picking the right tool. + +## At a glance + +| | **Formisch** | Felte | TanStack Form | +| ---------------------- | --------------------------------------- | ------------------------------------ | --------------------------------------- | +| Type source | Inferred from schema | Inferred from validator or declared | Inferred from `defaultValues` | +| Validation location | Defined in schema | Validator package or `validate` fn | Per-validator config | +| Validation timing | Form-wide `validate` / `revalidate` | Per validator, with debounce | Per-validator trigger | +| Async validation | Built-in via schema | Built-in | Built-in `isValidating` | +| Reactivity scope | Fine-grained per signal | Per Solid store subscription | Per subscription | +| Schema libraries | Valibot | Zod, Yup, Valibot, Vest, Superstruct | Standard Schema | +| Bundle size (min+gzip) | From ~2.5 kB | ~8 kB | ~15 kB | +| Framework support | React, Preact, Solid, Svelte, Vue, Qwik | React, Preact, Solid, Svelte | React, Vue, Solid, Svelte, Lit, Angular | + +The table is intentionally short. It only covers the dimensions that most often drive a library choice in practice. Other differences such as devtools, ecosystem maturity, and community size are real but tend to matter less than how each library handles types, validation, and reactivity. + +## Why Formisch? + +Three reasons to pick Formisch over the alternatives above: + +**One schema, no second source of truth.** A single Valibot schema is everything the form needs: the runtime validator, the source of types, and the description of the form's structure — all at once. There is no separate TypeScript generic to declare, no `defaultValues` object to keep aligned with the schema, no resolver to configure. When the schema changes, every part of the form follows — at compile time and at runtime. + +**The smallest bundle, by a wide margin.** Formisch starts at ~2.5 kB and grows only as you import additional methods like `focus`, `getInput`, and `reset`. That is several times smaller than the alternatives in the table above — and it stays that way because the core is intentionally small and the library is fully tree-shakable, so methods you don't import don't end up in your bundle. + +**Type safety that stays fast.** Types flow from the schema through every API, including deeply nested paths and field arrays. The inference is structured to keep TypeScript editor performance from degrading as schemas grow — which matters in large codebases where heavily-generic form libraries become a friction point. + +## Which library should you use? + +**Felte** is a small, focused form library with a directive-based API (`use:form`). It supports a wide range of schema validators through separate adapter packages and is a good fit when you want a minimal library that stays close to plain Solid stores. + +**TanStack Form** is a good fit when you need fine-grained control over validation timing and built-in async validation handling without building that infrastructure yourself. It is also the natural choice if your team is already invested in the TanStack ecosystem and values a consistent mental model across data fetching, routing, and forms. + +**Formisch** makes the most sense for new projects in TypeScript-heavy codebases, especially when you expect forms to grow in complexity. The schema-first design means there is a single source of truth for types, runtime validation, and form structure, so there is less to keep aligned over time. The main consideration is that Formisch currently supports only [Valibot](https://valibot.dev) as the schema library. + +## Migrating from Felte + +Migrating from Felte to Formisch is not a drop-in replacement. The mental model is different: instead of attaching form behavior to an element through a directive, you start from a Valibot schema and build your fields around it. Formisch and Felte can coexist in the same application, so you can migrate one form at a time and use the most complex form first as a reference point. + +## Next steps + +If you have decided that Formisch is a good fit, install it via the installation guide and start building by defining your form. diff --git a/website/src/routes/(docs)/solid/guides/(get-started)/introduction/index.mdx b/website/src/routes/(docs)/solid/guides/(get-started)/introduction/index.mdx index 632b8f1c..ee99cb98 100644 --- a/website/src/routes/(docs)/solid/guides/(get-started)/introduction/index.mdx +++ b/website/src/routes/(docs)/solid/guides/(get-started)/introduction/index.mdx @@ -69,7 +69,13 @@ In addition, Formisch offers several functions (we call them "methods") that can ## Comparison -What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to Vite, but for forms. +What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow. + +For a side-by-side look at how Formisch compares to Felte and TanStack Form, see the comparison guide. + +## Vision + +My vision for Formisch is to create a framework-agnostic platform similar to Vite, but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework. ## Partners diff --git a/website/src/routes/(docs)/solid/guides/menu.md b/website/src/routes/(docs)/solid/guides/menu.md index 980299b8..683b1f57 100644 --- a/website/src/routes/(docs)/solid/guides/menu.md +++ b/website/src/routes/(docs)/solid/guides/menu.md @@ -4,6 +4,7 @@ - [Introduction](/solid/guides/introduction/) - [Installation](/solid/guides/installation/) +- [Comparison](/solid/guides/comparison/) - [LLMs.txt](/solid/guides/llms-txt/) ## Main concepts diff --git a/website/src/routes/(docs)/svelte/guides/(get-started)/comparison/index.mdx b/website/src/routes/(docs)/svelte/guides/(get-started)/comparison/index.mdx new file mode 100644 index 00000000..2fb5228e --- /dev/null +++ b/website/src/routes/(docs)/svelte/guides/(get-started)/comparison/index.mdx @@ -0,0 +1,57 @@ +--- +title: Comparison +description: >- + A concise comparison of Formisch with Superforms and TanStack Form for + Svelte across TypeScript inference, validation, and reactivity, with a + short decision guide. +contributors: + - fabian-hiller +--- + +import { Link } from '~/components'; + +# Comparison + +Formisch is one of several form libraries available for Svelte. The two most common alternatives are [Superforms](https://superforms.rocks) and [TanStack Form](https://tanstack.com/form/latest). This page is meant as a quick reference for picking the right tool. + +## At a glance + +| | **Formisch** | Superforms | TanStack Form | +| ---------------------- | --------------------------------------- | ------------------------------------ | --------------------------------------- | +| Type source | Inferred from schema | Inferred from schema | Inferred from `defaultValues` | +| Validation location | Defined in schema | Defined in schema | Per-validator config | +| Validation timing | Form-wide `validate` / `revalidate` | Configurable per form / event | Per-validator trigger | +| Async validation | Built-in via schema | Built-in (client + server) | Built-in `isValidating` | +| Reactivity scope | Fine-grained per rune | Per Svelte store / rune | Per subscription | +| Schema libraries | Valibot | Zod, Valibot, Yup, ArkType, … | Standard Schema | +| Server integration | Client-only (SvelteKit support planned) | First-class (SvelteKit form actions) | Client-only | +| Bundle size (min+gzip) | From ~2.5 kB | ~20 kB | ~15 kB | +| Framework support | React, Preact, Solid, Svelte, Vue, Qwik | Svelte / SvelteKit | React, Vue, Solid, Svelte, Lit, Angular | + +The table is intentionally short. It only covers the dimensions that most often drive a library choice in practice. Other differences such as devtools, ecosystem maturity, and community size are real but tend to matter less than how each library handles types, validation, and reactivity. + +## Why Formisch? + +Three reasons to pick Formisch over the alternatives above: + +**One schema, no second source of truth.** A single Valibot schema is everything the form needs: the runtime validator, the source of types, and the description of the form's structure — all at once. There is no separate TypeScript generic to declare, no `defaultValues` object to keep aligned with the schema, no resolver to configure. When the schema changes, every part of the form follows — at compile time and at runtime. + +**The smallest bundle, by a wide margin.** Formisch starts at ~2.5 kB and grows only as you import additional methods like `focus`, `getInput`, and `reset`. That is several times smaller than the alternatives in the table above — and it stays that way because the core is intentionally small and the library is fully tree-shakable, so methods you don't import don't end up in your bundle. + +**Type safety that stays fast.** Types flow from the schema through every API, including deeply nested paths and field arrays. The inference is structured to keep TypeScript editor performance from degrading as schemas grow — which matters in large codebases where heavily-generic form libraries become a friction point. + +## Which library should you use? + +**Superforms** is the strongest choice when forms are tightly coupled to SvelteKit's server form actions. It supports unified client and server validation, progressive enhancement, and a wide range of schema libraries through Standard Schema. If SvelteKit is doing the heavy lifting on the server, Superforms fits naturally. + +**TanStack Form** is a good fit when you need fine-grained control over validation timing and built-in async validation handling without building that infrastructure yourself. It is also the natural choice if your team is already invested in the TanStack ecosystem and values a consistent mental model across data fetching, routing, and forms. + +**Formisch** makes the most sense for new projects in TypeScript-heavy codebases, especially when you expect forms to grow in complexity. The schema-first design means there is a single source of truth for types, runtime validation, and form structure, so there is less to keep aligned over time. Reactivity is fine-grained through Svelte 5 runes. The main considerations are that Formisch currently supports only [Valibot](https://valibot.dev) as the schema library, and is presently a client-side form layer — dedicated SvelteKit integration is planned for one of the next releases. + +## Migrating from Superforms + +Migrating from Superforms to Formisch is not a drop-in replacement. Superforms is built around SvelteKit's server form actions, while Formisch is a pure client-side form layer. Migration typically means moving validation and submission out of `+page.server.ts` actions into client-side handlers, or wiring server validation separately. The two libraries can coexist in the same application, so you can migrate one form at a time. + +## Next steps + +If you have decided that Formisch is a good fit, install it via the installation guide and start building by defining your form. diff --git a/website/src/routes/(docs)/svelte/guides/(get-started)/introduction/index.mdx b/website/src/routes/(docs)/svelte/guides/(get-started)/introduction/index.mdx index 393f86ff..45cfe8b4 100644 --- a/website/src/routes/(docs)/svelte/guides/(get-started)/introduction/index.mdx +++ b/website/src/routes/(docs)/svelte/guides/(get-started)/introduction/index.mdx @@ -71,7 +71,13 @@ In addition, Formisch offers several functions (we call them "methods") that can ## Comparison -What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to Vite, but for forms. +What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow. + +For a side-by-side look at how Formisch compares to Superforms and TanStack Form, see the comparison guide. + +## Vision + +My vision for Formisch is to create a framework-agnostic platform similar to Vite, but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework. ## Partners diff --git a/website/src/routes/(docs)/svelte/guides/menu.md b/website/src/routes/(docs)/svelte/guides/menu.md index 9bf3aea9..9c41c5df 100644 --- a/website/src/routes/(docs)/svelte/guides/menu.md +++ b/website/src/routes/(docs)/svelte/guides/menu.md @@ -4,6 +4,7 @@ - [Introduction](/svelte/guides/introduction/) - [Installation](/svelte/guides/installation/) +- [Comparison](/svelte/guides/comparison/) - [LLMs.txt](/svelte/guides/llms-txt/) ## Main concepts diff --git a/website/src/routes/(docs)/vue/guides/(get-started)/comparison/index.mdx b/website/src/routes/(docs)/vue/guides/(get-started)/comparison/index.mdx new file mode 100644 index 00000000..1730d366 --- /dev/null +++ b/website/src/routes/(docs)/vue/guides/(get-started)/comparison/index.mdx @@ -0,0 +1,59 @@ +--- +title: Comparison +description: >- + A concise comparison of Formisch with VeeValidate, FormKit, and TanStack + Form for Vue across TypeScript inference, validation, and reactivity, with + a short decision guide. +contributors: + - fabian-hiller +--- + +import { Link } from '~/components'; + +# Comparison + +Formisch is one of several form libraries available for Vue. The three most common alternatives are [VeeValidate](https://vee-validate.logaretm.com), [FormKit](https://formkit.com), and [TanStack Form](https://tanstack.com/form/latest). This page is meant as a quick reference for picking the right tool. + +## At a glance + +| | **Formisch** | VeeValidate | FormKit | TanStack Form | +| ---------------------- | --------------------------------------- | ----------------------------- | ------------------------------------- | --------------------------------------- | +| Type source | Inferred from schema | Inferred from schema | Declared manually | Inferred from `defaultValues` | +| Validation location | Defined in schema | Validator rules or schema | Per-input prop or form schema | Per-validator config | +| Validation timing | Form-wide `validate` / `revalidate` | Per field, configurable | Per input (`validation-visibility`) | Per-validator trigger | +| Async validation | Built-in via schema | Built-in | Built-in | Built-in `isValidating` | +| Reactivity scope | Per Vue ref subscription | Per Vue ref subscription | Per Vue ref subscription | Per TanStack Store subscription | +| Schema libraries | Valibot | Zod, Yup, Valibot, ArkType, … | Built-in rules; schemas via plugins | Standard Schema | +| UI approach | Headless | Headless | Component-driven (batteries included) | Headless | +| Bundle size (min+gzip) | From ~2.5 kB | ~12 kB | ~25 kB+ | ~15 kB | +| Framework support | React, Preact, Solid, Svelte, Vue, Qwik | Vue 3 (Vue 2 via legacy) | Vue 3 | React, Vue, Solid, Svelte, Lit, Angular | + +The table is intentionally short. It only covers the dimensions that most often drive a library choice in practice. Other differences such as devtools, ecosystem maturity, and community size are real but tend to matter less than how each library handles types, validation, and reactivity. + +## Why Formisch? + +Three reasons to pick Formisch over the alternatives above: + +**One schema, no second source of truth.** A single Valibot schema is everything the form needs: the runtime validator, the source of types, and the description of the form's structure — all at once. There is no separate TypeScript generic to declare, no `defaultValues` object to keep aligned with the schema, no resolver to configure. When the schema changes, every part of the form follows — at compile time and at runtime. + +**The smallest bundle, by a wide margin.** Formisch starts at ~2.5 kB and grows only as you import additional methods like `focus`, `getInput`, and `reset`. That is several times smaller than the alternatives in the table above — and it stays that way because the core is intentionally small and the library is fully tree-shakable, so methods you don't import don't end up in your bundle. + +**Type safety that stays fast.** Types flow from the schema through every API, including deeply nested paths and field arrays. The inference is structured to keep TypeScript editor performance from degrading as schemas grow — which matters in large codebases where heavily-generic form libraries become a friction point. + +## Which library should you use? + +**VeeValidate** is the most widely used Vue form library. It is headless, composables-based, and has strong schema support through Standard Schema. Good fit when you want a flexible logic layer and are comfortable wiring your own components. + +**FormKit** is component-driven and batteries-included. Inputs, layouts, accessibility, and styling come out of the box, with optional declarative form schemas. Best when you want a complete form solution with UI rather than a headless logic layer. + +**TanStack Form** is a good fit when you need fine-grained control over validation timing and built-in async validation handling without building that infrastructure yourself. It is also the natural choice if your team is already invested in the TanStack ecosystem and values a consistent mental model across data fetching, routing, and forms. + +**Formisch** makes the most sense for new projects in TypeScript-heavy codebases, especially when you expect forms to grow in complexity. The schema-first design means there is a single source of truth for types, runtime validation, and form structure, so there is less to keep aligned over time. Reactivity is fine-grained through Vue 3's composition API. The main consideration is that Formisch currently supports only [Valibot](https://valibot.dev) as the schema library. + +## Migrating from VeeValidate + +Migrating from VeeValidate to Formisch is not a drop-in replacement, but the conceptual gap is smaller than with a component-driven library. Both are headless and schema-friendly, so the main work is consolidating per-field validator rules into a single root Valibot schema and replacing VeeValidate's `useForm` / `useField` composables with Formisch's equivalents. The two libraries can coexist in the same application, so you can migrate one form at a time. + +## Next steps + +If you have decided that Formisch is a good fit, install it via the installation guide and start building by defining your form. diff --git a/website/src/routes/(docs)/vue/guides/(get-started)/introduction/index.mdx b/website/src/routes/(docs)/vue/guides/(get-started)/introduction/index.mdx index 041b25cc..1537f520 100644 --- a/website/src/routes/(docs)/vue/guides/(get-started)/introduction/index.mdx +++ b/website/src/routes/(docs)/vue/guides/(get-started)/introduction/index.mdx @@ -65,7 +65,13 @@ In addition, Formisch offers several functions (we call them "methods") that can ## Comparison -What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to Vite, but for forms. +What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow. + +For a side-by-side look at how Formisch compares to VeeValidate, FormKit, and TanStack Form, see the comparison guide. + +## Vision + +My vision for Formisch is to create a framework-agnostic platform similar to Vite, but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework. ## Partners diff --git a/website/src/routes/(docs)/vue/guides/menu.md b/website/src/routes/(docs)/vue/guides/menu.md index e7c50c12..d6df4ea3 100644 --- a/website/src/routes/(docs)/vue/guides/menu.md +++ b/website/src/routes/(docs)/vue/guides/menu.md @@ -4,6 +4,7 @@ - [Introduction](/vue/guides/introduction/) - [Installation](/vue/guides/installation/) +- [Comparison](/vue/guides/comparison/) - [LLMs.txt](/vue/guides/llms-txt/) ## Main concepts