@victorylabs/forms

Declarative, framework-agnostic form state management with first-class URL/storage sync, path-scoped subscriptions, and Standard Schema validation.

A lightweight competitor to react-hook-form with:

• Declarative defineForm config — definitions are pure data, reusable across instances.
• Path-scoped subscriptions — a keystroke in one field doesn't re-render others.
• First-class URL & storage sync — bidirectional, debounced, with adapter precedence.
• Standard Schema first — works with Zod, Valibot, ArkType, Effect, and any compliant validator.
• Per-field debounce / sync mode — configure each field independently.
• Compile-time path validation — typo'd field names fail TypeScript, not runtime.
• Zero-prop accessibility — aria-invalid, aria-describedby, error focus all wired automatically.
• Framework-agnostic core — usable in Node tests, Vue, Svelte (adapters TBD).

Install

pnpm add @victorylabs/forms zod

react and zod are optional peer dependencies — install only what you use.

Quick start

import { defineForm } from '@victorylabs/forms'
import { useForm } from '@victorylabs/forms/react'
import { zodResolver } from '@victorylabs/forms/resolvers/zod'
import { urlSync } from '@victorylabs/forms/sync/url'
import { z } from 'zod'

const searchForm = defineForm({
  resolver: zodResolver(
    z.object({
      query: z.string().default(''),
      page: z.number().int().min(1).default(1),
    }),
  ),
  fields: {
    query: { sync: 'onChange', debounce: 300 },
  },
  sync: [urlSync({ fields: ['query', 'page'], strategy: 'replace' })],
})

export function SearchPage() {
  const form = useForm(searchForm)
  const query = form.field('query')

  return (
    <form {...form.formProps}>
      <input {...query.props} />
      {query.error && <span {...query.errorProps}>{query.error}</span>}
      <button {...form.submitProps}>Search</button>
    </form>
  )
}

Documentation

Full reference at the docs site — overview, API for every export, recipes, and migration guides.

License

MIT