open-circle/formisch

Perfil de open-circle

Última actividad de origen registrada: 20 de agosto de 2026 a las 06:49

Catálogo de SkillsMP actualizado: 17 de octubre de 2026 a las 00:09

skills recopiladas: 12

Estrellas en GitHub: 1205
Forks en GitHub: 36

README del repositorio

Archivo de origen del README: README.md

Leer el README original

Mostrar README completo

# Formisch Formisch is a schema-based, headless form library for JS frameworks. It manages form state and validation. It is type-safe, fast by default and its bundle size is small due to its modular design. Try it out in our [playground](https://stackblitz.com/edit/formisch-playground-react)! Supported frameworks: [Angular][formisch-angular], [Preact][formisch-preact], [Qwik][formisch-qwik], [React][formisch-react], [React Native][formisch-react-native], [SolidJS][formisch-solid], [Svelte][formisch-svelte] and [Vue][formisch-vue]. ## Highlights - Small bundle size starting at 2.5 kB - Schema-based validation with Valibot - Type safety with autocompletion in editor - It's fast – DOM updates are fine-grained - Minimal, readable and well thought out API - Supports all native HTML form fields ## Example In React a form starts with the `useForm` hook. It initializes your form's store based on the provided Valibot schema and infers its types. Next, wrap your form in the `<Form />` component. It's a thin layer around the native `<form />` element that handles form validation and submission. Then, you can access the state of a field with the `useField` hook or the `<Field />` component to connect your inputs. ```tsx import { Field, Form, useForm } from '@formisch/react'; import * as v from 'valibot'; const LoginSchema = v.object({ email: v.pipe(v.string(), v.email()), password: v.pipe(v.string(), v.minLength(8)), }); export default function LoginPage() { const loginForm = useForm({ schema: LoginSchema, }); return ( <Form of={loginForm} onSubmit={(output) => console.log(output)}> <Field of={loginForm} path={['email']}> {(field) => ( <div> <input {...field.props} value={field.input} type="email" /> {field.errors && <div>{field.errors[0]}</div>} </div> )} </Field> <Field of={loginForm} path={['password']}> {(field) => ( <div> <input {...field.props} value={field.input} type="password" /> {field.errors && <div>{field.errors[0]}</div>} </div> )} </Field> <button type="submit">Login</button> </Form> ); } ``` In addition, Formisch offers several functions (we call them "methods") that can be used to read and manipulate the form state. These include `focus`, `getDeepErrorEntries`, `getDeepErrors`, `getDirtyInput`, `getDirtyPaths`, `getErrors`, `getInput`, `handleSubmit`, `insert`, `isDirty`, `isEdited`, `isTouched`, `isValid`, `move`, `pickDirty`, `remove`, `replace`, `reset`, `setErrors`, `setInput`, `submit`, `swap` and `validate`. These methods allow you to control the form programmatically. ## 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, 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 Thanks to our partners who support the development! [Join them](https://github.com/sponsors/fabian-hiller) and contribute to the sustainability of open source software! ![Partners of Formisch](https://github.com/open-circle/formisch/blob/main/partners.webp?raw=true) ## Feedback Find a bug or have an idea how to improve the library? Please fill out an [issue](https://github.com/open-circle/formisch/issues/new). Together we can make forms even better! ## License This project is available free of charge and licensed under the [MIT license](https://github.com/open-circle/formisch/blob/main/LICENSE.md). [formisch-angular]: https://github.com/open-circle/formisch/tree/main/frameworks/angular [formisch-preact]: https://github.com/open-circle/formisch/tree/main/frameworks/preact [formisch-qwik]: https://github.com/open-circle/formisch/tree/main/frameworks/qwik [formisch-react]: https://github.com/open-circle/formisch/tree/main/frameworks/react [formisch-react-native]: https://github.com/open-circle/formisch/tree/main/frameworks/react-native [formisch-solid]: https://github.com/open-circle/formisch/tree/main/frameworks/solid [formisch-svelte]: https://github.com/open-circle/formisch/tree/main/frameworks/svelte [formisch-vue]: https://github.com/open-circle/formisch/tree/main/frameworks/vue

Cargando el README del repositorio…

Skills en este repositorio

Desarrolladores de software Analistas de garantía de calidad de software y probadores Desarrolladores web

3 categorías ocupacionales · 100% clasificado

skill

ocupación

descripción

actualizado

formisch

Desarrolladores de software

Form handling with Formisch, the schema-first and type-safe form library for Angular, Preact, Qwik, React, React Native, Solid, Svelte, and Vue. Use when creating forms, handling form state, validating inputs, working with field arrays, or using @formisch/*…