DOCSEARCHbyAlgolia
Submit Docs

Formisch

website·Indexed 34 days ago

https://formisch.dev/

A lightweight, schema-first, and fully type-safe form library supporting React, Angular, and Svelte. It features integration with Valibot for schema definition and provides framework-specific adapters for managing field paths, validation, and asynchronous operations.

Tokens
285.6K
Snippets
1.2K
Records
1.7K
Agent score
61%

What's inside Formisch

  1. Overview of migrating from TanStack Form to Formisch

    Migrating from TanStack Form to Formisch is a rewrite of the form layer rather than a drop-in replacement. The primary architectural shift is moving from a configuration where validation is attached per-field (via validators objects) to a schema-first approach where a single Valibot schema defines the form's TypeScript types, runtime validation, and structure. Both libraries can coexist in the same application, allowing for a gradual, form-by-form migration.

  2. Overview of migrating from Modular Forms to Formisch

    Formisch is the official successor to Modular Forms. While both are headless and use render props for field connection, Formisch moves the source of truth to a single Valibot schema. This schema replaces TypeScript type parameters, validate props, and type props. Both libraries can coexist in the same application, allowing for a form-by-form migration.

  3. Overview of Formisch form library

    Formisch is a framework-agnostic form library built around schemas. It uses a schema (specifically Valibot) to provide types and validation for forms. This allows the form logic and schema to remain consistent even when changing the UI or moving between different frontend frameworks. Formisch requires no app-level setup, allowing developers to migrate forms individually.

  4. Overview of Formisch for Preact

    Formisch is a schema-based, headless form library for Preact designed to manage form state and validation. It features a small bundle size (starting at 2.5 kB), type safety with editor autocompletion, and fine-grained DOM updates for high performance. It supports all native HTML form fields and uses Valibot for schema-based validation.

  5. Overview of Formisch for SolidJS

    Formisch is a schema-based, headless form library for SolidJS designed to manage form state and validation. It is type-safe, modular, and fast, with a small bundle size starting at 2.5 kB. It supports all native HTML form fields and uses Valibot for schema-based validation.

  6. Overview of Formisch

    Formisch is a lightweight, schema-based, headless form library that manages form state and validation. It is designed to be framework-agnostic with native performance for UI updates. Key highlights include a small bundle size (starting at 2.5 kB), type safety with editor autocompletion, and support for all native HTML form fields.

  7. Overview of Formisch for Vue

    Formisch is a schema-based, headless form library for Vue designed to manage form state and validation. It features a modular design for a small bundle size (starting at 2.5 kB), fine-grained DOM updates for performance, and full type safety. It uses Valibot for schema-based validation and supports all native HTML form fields.

  8. Overview of Formisch reactivity and performance

    Formisch uses a signal-based reactive model internally to manage form state. This allows for precise, granular updates where only the components reading a specific value re-render when that value changes. This is an implementation detail; developers interact with plain values (e.g., field.input) rather than signals directly. This architecture is particularly beneficial for very large dynamic forms or React Native applications where minimizing re-render overhead is critical. Formisch is framework-agnostic and maintains this same mental model across Angular, Preact, Qwik, React, React Native, SolidJS, Svelte, and Vue.

  9. Overview of migrating from TanStack Form to Formisch

    Migrating from TanStack Form to Formisch is a rewrite of the form layer rather than a drop-in replacement. While component structures often remain similar, the mental model shifts from a state-container approach (defaultValues + per-field validators) to a schema-first approach (Valibot schema as the source of truth for types, validation, and structure).

    Key architectural shifts include:

    • Types: Inferred from the Valibot schema instead of defaultValues.
    • Validation: Centralized in a schema; timing is controlled form-wide via validate and revalidate options instead of per-field triggers.
    • Field Addressing: Uses path arrays (e.g., ['todos', 0, 'label']) instead of interpolated strings.
    • Field Binding: Uses field.props spreading instead of manual wiring of value, onChangeText, and onBlur.
    • Submission: Uses the handleSubmit method to create a press handler.
    • State Access: Direct reading from the form store instead of using subscription selectors like form.Subscribe.
    • Errors: Provided as plain string arrays in field.errors instead of issue objects.

    Both libraries can coexist in the same application, allowing for a gradual, form-by-form migration.

  10. Overview of Formisch for React Native

    Formisch is a schema-based, headless form library for React Native designed to manage form state and validation. It is type-safe, modular (starting bundle size of ~2.5 kB), and optimized for performance by re-rendering only when necessary. It integrates with Valibot for schema-based validation and supports native TextInput fields.

  11. Overview of Formisch for Svelte

    Formisch is a schema-based, headless form library for Svelte designed to manage form state and validation. It features a modular design for a small bundle size (starting at 2.5 kB), fine-grained DOM updates for performance, and full type safety. It uses Valibot for schema-based validation and supports all native HTML form fields.

  12. Overview of Formisch framework-agnostic architecture

    Formisch is a schema-first form library supporting SolidJS, React, Vue, Svelte, Preact, Qwik, and Angular. Unlike most agnostic libraries that use a runtime bridge, Formisch uses a build-time swap. It defines a 'four-function contract' (createSignal, batch, untrack, and createId) in its core. During the build process, a bundler plugin redirects these imports to framework-specific implementations (e.g., index.vue.ts or index.solid.ts). This ensures that form state uses the framework's native reactivity primitives (like Vue's shallowRef or Svelte's $state), eliminating runtime abstraction taxes and allowing integration with native framework scheduling and batching.