https://github.com/open-circle/formisch
The modular and type-safe form library for any framework
https://github.com/open-circle/formisch
Last synced: about 1 month ago
JSON representation
The modular and type-safe form library for any framework
- Host: GitHub
- URL: https://github.com/open-circle/formisch
- Owner: open-circle
- License: mit
- Created: 2025-04-05T03:46:25.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-02-19T14:07:34.000Z (4 months ago)
- Last Synced: 2026-02-19T17:36:00.732Z (4 months ago)
- Language: TypeScript
- Homepage: https://formisch.dev
- Size: 2.63 MB
- Stars: 614
- Watchers: 5
- Forks: 15
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# 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-solid)!
Supported frameworks: [Preact][formisch-preact], [Qwik][formisch-qwik], [React][formisch-react], [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 SolidJS a form starts with the `createForm` primitive. It initializes your form's store based on the provided Valibot schema and infers its types. Next, wrap your form in the `` component. It's a thin layer around the native `` element that handles form validation and submission. Then, you can access the state of a field with the `useField` primitive or the `` component to connect your inputs.
```tsx
import { createForm, Field, Form } from '@formisch/solid';
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 = createForm({
schema: LoginSchema,
});
return (
console.log(output)}>
{(field) => (
{field.errors && {field.errors[0]}}
)}
{(field) => (
{field.errors && {field.errors[0]}}
)}
Login
);
}
```
In addition, Formisch offers several functions (we call them "methods") that can be used to read and manipulate the form state. These include `focus`, `getErrors`, `getAllErrors`, `getInput`, `insert`, `move`, `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!
## 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-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-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