open-circle/formisch

open-circle 프로필

최근 기록된 소스 활동: 2026년 8월 20일 06:49

SkillsMP 카탈로그 업데이트: 2026년 10월 17일 00:09

수집된 skills: 12

GitHub 스타: 1,205
GitHub 포크: 36

저장소 README

README 원본 파일: README.md

README 원본 보기

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-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

저장소 README를 불러오는 중…

이 저장소의 skills

소프트웨어 개발자 소프트웨어 품질 보증 분석가·테스터 웹 개발자

직업 카테고리 3개 · 100% 분류됨

소프트웨어 품질 보증 분석가·테스터

Write unit tests for Formisch packages (packages/core and packages/methods) with proper TypeScript types. Use when creating new tests, fixing type errors in tests, or adding test coverage for core/methods functions.

원문 언어: 영어

2026-05-08

수집된 skill 12개 중 12개를 표시합니다.

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/open-circle/formisch.