-
-
Notifications
You must be signed in to change notification settings - Fork 31
Add Formisch v1 RC blog post #150
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
120 changes: 120 additions & 0 deletions
120
website/src/routes/blog/(posts)/formisch-v1-release-candidate/index.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| --- | ||
|
fabian-hiller marked this conversation as resolved.
|
||
| cover: Formisch v1 RC | ||
| title: 'Formisch v1 RC is now available' | ||
| description: >- | ||
| Formisch, the schema-first, headless, and fully type-safe form library, is now | ||
| a Release Candidate. One Valibot schema drives both validation and your types, | ||
| and the client-side API is feature-complete. Here is how it got here, and how | ||
| you can help us finalize v1. | ||
| published: 2026-06-23 | ||
|
fabian-hiller marked this conversation as resolved.
|
||
| authors: | ||
| - fabian-hiller | ||
| - flySewa | ||
| --- | ||
|
|
||
| import { Link } from '~/components'; | ||
|
|
||
| Formisch is officially in the Release Candidate (RC) phase! 🎉 | ||
|
|
||
| This means the core API and the overall design are now stable. Barring a critical issue, there will be no breaking changes before the 1.0 release. So if you have been waiting for Formisch to stabilize before trying it, now is a good time. We have spent the last few months testing the library against complex edge cases to improve reliability and runtime performance. Your feedback on the current API is the most valuable thing we can get before v1 locks in. | ||
|
|
||
| ## So, what actually is Formisch? | ||
|
|
||
| Formisch is a schema-first, headless, fully type-safe library for managing form state. You describe your form once with a [Valibot](https://valibot.dev/) schema, and that single schema drives both runtime validation and your TypeScript types. You don't need separate type definitions to keep in sync or a resolver to configure. | ||
|
|
||
| ```tsx | ||
| import * as v from 'valibot'; | ||
|
|
||
| const LoginSchema = v.object({ | ||
| email: v.pipe(v.string(), v.email('Please enter a valid email.')), | ||
| password: v.pipe(v.string(), v.minLength(8, 'Your password is too short.')), | ||
| }); | ||
| ``` | ||
|
|
||
| From there you build your UI on top of the schema. Formisch is headless, so you keep full control over your markup and styling. Every field gives you its value, its errors, and the props to wire up your input: | ||
|
|
||
| ```tsx | ||
| import { Field, Form, useForm } from '@formisch/react'; | ||
|
|
||
| export default function LoginForm() { | ||
| const loginForm = useForm({ schema: LoginSchema }); | ||
|
|
||
| return ( | ||
| <Form | ||
| of={loginForm} | ||
| onSubmit={(values) => { | ||
| // `values` is fully typed: { email: string; password: string } | ||
| console.log(values); | ||
| }} | ||
| > | ||
| <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> | ||
| ); | ||
| } | ||
|
fabian-hiller marked this conversation as resolved.
|
||
| ``` | ||
|
|
||
| You can run this exact example on the <Link href="/playground/login/">playground</Link> in your browser, no install required. | ||
|
|
||
| The `path` is fully typed against your schema, so if you rename a field, TypeScript flags every place that no longer matches. Because state lives in fine-grained signals, only the fields that actually change re-render. And thanks to the modular design, the bundle size starts at around 2.5 kB. | ||
|
|
||
| Formisch runs on React, Vue, Solid, Qwik, Svelte, and Preact from a single core, but there is no adapter tax. At build time it swaps in your framework's own reactivity, so you get real React updates, real Solid signals, and native performance with no extra layer in your bundle. | ||
|
|
||
| For a deeper look at the design decisions behind Formisch, read our <Link href="/blog/one-core-six-frameworks/">architecture post</Link>. We explain how the runtime works and why there is no abstraction layer. | ||
|
|
||
| Curious how it compares to popular form libraries? Our comparison guides break down the differences in API design and mental models for <Link href="/react/guides/comparison/">React</Link>, <Link href="/solid/guides/comparison/">Solid</Link>, <Link href="/svelte/guides/comparison/">Svelte</Link>, and <Link href="/vue/guides/comparison/">Vue</Link>. | ||
|
|
||
| ## How we got here | ||
|
|
||
| Formisch did not start as Formisch. It started years ago with a frustration I think every web developer knows: you build a form that should be simple, and it grows into hundreds of lines of repetitive, fragile code. | ||
|
|
||
| My first real answer to that was [Modular Forms](https://modularforms.dev/), which I started in 2022. It was built around one idea: you should only ever ship the form code you actually use. Instead of one giant hook that does everything, the functionality is split into small, tree-shakeable pieces. It started on SolidJS, later came to Qwik and other frameworks, and it taught me what a great forms experience feels like. | ||
|
|
||
| The second piece came a year later, in 2023: [Valibot](https://valibot.dev/), the schema library I built next. Valibot made it possible to describe the shape of your data once and get both runtime validation and static TypeScript types from a single source. That turned out to be the missing foundation. If one schema can drive validation and types, it can drive an entire form. | ||
|
|
||
| Formisch is where those two threads meet. It is basically the rewrite of Modular Forms I had wanted to do for a long time, rebuilt around a schema-first, framework-agnostic core. For a while I wasn't sure it was even technically possible, or worth the enormous amount of work it would take. I built the first version of the core by hand, before coding agents were any help, in late nights after my actual day job. | ||
|
|
||
| Honestly, what kept it alive was a promise. In late 2024 I told [Shai Reznik](https://github.com/shairez) from the Qwik team that I was going to build this, and then I kept telling him, month after month, how it was going. That accountability, and his constant encouragement, is probably the single biggest reason Formisch exists today. The name came out of one of those early chats too. _Formisch_ is a little German pseudo-word: "form" plus the German "-isch" suffix that turns a noun into a describing word. | ||
|
|
||
| It did not come easily. My first architecture was a dead end. I tried to map the form's signal-based store onto a tree structure and ran straight into more edge cases than I could handle. I had to throw it away, go back to research, and start over. It took weeks to crack the part I am most proud of: efficient, per-field signals that work natively across every supported framework. When that finally clicked, Formisch became real. | ||
|
|
||
| The vision behind all of this is bigger than any single library. I want Formisch to be a framework-agnostic platform for forms, basically _like Vite, but for forms_. Form logic should be something you build once and reuse everywhere, instead of rebuilding it for every framework and every layer. The <Link href="/blog/one-core-six-frameworks/">architecture post</Link> goes deep on how that one-core-six-frameworks design actually works. | ||
|
|
||
| ## What's new in the Release Candidate | ||
|
|
||
| Getting to RC was less about adding features and more about hardening the ones already there, now backed by a test suite with 100% coverage: | ||
|
|
||
| - **Hardened nested fields, field arrays, and tuples.** Lots of edge cases around inserting, moving, replacing, resetting, and resizing nested structures — the parts of a form that are easiest to get subtly wrong. | ||
| - **More correct state and focus handling.** Dirty, touched, and the new edited state now behave predictably across resets and field-array operations. On a failed submit, focus moves to the first field that can actually receive it. | ||
| - **New convenience helpers.** Methods like <Link href="/methods/api/isValid/">`isValid`</Link>, <Link href="/methods/api/isDirty/">`isDirty`</Link>, and <Link href="/methods/api/getDeepErrors/">`getDeepErrors`</Link>. There is also an <Link href="/core/api/EmptyInput/">`emptyInput`</Link> config that gives required fields a sensible starting value, so an empty field shows the expected error message. | ||
|
|
||
| If something behaves unexpectedly in your forms, that feedback is the most valuable thing you can give us before v1 locks in. | ||
|
|
||
| ## Give it a try | ||
|
|
||
| Install it for your framework. Here is the React package as an example. Every other framework works the same way, just swap in `@formisch/solid`, `@formisch/vue`, `@formisch/svelte`, `@formisch/preact`, or `@formisch/qwik`: | ||
|
|
||
| ```bash | ||
| npm install @formisch/react valibot | ||
| ``` | ||
|
|
||
| Take a look at the <Link href="/playground/login/">playground</Link>, which runs in your browser with no install, or open a [StackBlitz example](https://stackblitz.com/edit/formisch-playground-react) to get a feel for it. If you find any bugs or something does not work the way you expect, [open an issue](https://github.com/open-circle/formisch/issues) or find us on [Discord](https://discord.gg/tkMjQACf2P). That feedback is exactly what helps us get v1 right. | ||
|
|
||
| If Formisch is useful to you, a [GitHub star](https://github.com/open-circle/formisch) helps others discover the project and signals that this direction is valuable. 🙏 | ||
|
|
||
| A huge thank you to all our early testers and code contributors who helped us refine the API to this point, and to Shai Reznik and the Qwik community for the encouragement along the way. We really appreciate your support. | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.