# Introduction

Formisch is a schema-based, headless form library for Svelte. 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 <Link href="/playground/">playground</Link>!

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

Every form starts with the <Link href="/svelte/api/createForm/">`createForm`</Link> rune. It initializes your form's store based on the provided Valibot schema and infers its types. Next, wrap your form in the <Link href="/svelte/api/Form/">`<Form />`</Link> 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 <Link href="/svelte/api/useField/">`useField`</Link> rune or the <Link href="/svelte/api/Field/">`<Field />`</Link> component to connect your inputs.

```svelte
<script lang="ts">
  import { createForm, Field, Form } from '@formisch/svelte';
  import * as v from 'valibot';

  const LoginSchema = v.object({
    email: v.pipe(v.string(), v.email()),
    password: v.pipe(v.string(), v.minLength(8)),
  });

  const loginForm = createForm({
    schema: LoginSchema,
  });
</script>

<Form of={loginForm} onsubmit={(output, event) => console.log(output)}>
  <Field of={loginForm} path={['email']}>
    {#snippet children(field)}
      <div>
        <input {...field.props} value={field.input} type="email" />
        {#if field.errors}
          <div>{field.errors[0]}</div>
        {/if}
      </div>
    {/snippet}
  </Field>
  <Field of={loginForm} path={['password']}>
    {#snippet children(field)}
      <div>
        <input {...field.props} value={field.input} type="password" />
        {#if field.errors}
          <div>{field.errors[0]}</div>
        {/if}
      </div>
    {/snippet}
  </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 <Link href="/methods/api/focus/">`focus`</Link>, <Link href="/methods/api/getAllErrors/">`getAllErrors`</Link>, <Link href="/methods/api/getErrors/">`getErrors`</Link>, <Link href="/methods/api/getInput/">`getInput`</Link>, <Link href="/methods/api/handleSubmit/">`handleSubmit`</Link>, <Link href="/methods/api/insert/">`insert`</Link>, <Link href="/methods/api/move/">`move`</Link>, <Link href="/methods/api/remove/">`remove`</Link>, <Link href="/methods/api/replace/">`replace`</Link>, <Link href="/methods/api/reset/">`reset`</Link>, <Link href="/methods/api/setErrors/">`setErrors`</Link>, <Link href="/methods/api/setInput/">`setInput`</Link>, <Link href="/methods/api/submit/">`submit`</Link>, <Link href="/methods/api/swap/">`swap`</Link> and <Link href="/methods/api/validate/">`validate`</Link>. 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. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to <a href="https://vite.dev/" target="_blank" rel="noreferrer">Vite</a>, but for forms.

## Partners

Thanks to our partners who support the development! <a href={import.meta.env.PUBLIC_GITHUB_SPONSORS_URL} target="_blank" rel="noreferrer">Join them</a> and contribute to the sustainability of open source software!

<p>
  <img
    src={`${import.meta.env.PUBLIC_GITHUB_URL}/blob/main/partners.webp?raw=true`}
    alt="Partners of Formisch"
  />
</p>

## Feedback

Find a bug or have an idea how to improve the library? Please fill out an <a href={`${import.meta.env.PUBLIC_GITHUB_URL}/issues/new`} target="\_blank" rel="noreferrer">issue</a>. Together we can make forms even better!

## License

This project is available free of charge and licensed under the <a href={`${import.meta.env.PUBLIC_GITHUB_URL}/blob/main/LICENSE.md`} target="\_blank" rel="noreferrer">MIT license</a>.