FormKeeper

🚀 Features

• 📝 Headless - Bring your own UI
• ⚡ Tiny - Under 5KB minified + gzipped
• 🔌 Zero Dependencies - No runtime dependencies
• 🎯 Type-Safe - Full TypeScript support with generics
• ✅ Validation - Sync and async validation
• 🌳 Nested Fields - Deep object support
• 📋 Array Fields - Dynamic field lists
• 🧙 Wizard - Multi-step forms (plugin)
• 💾 Auto-save - Draft persistence (plugin)
• ⚛️ React/Vue/Svelte - First-class adapters

📦 Installation

npm install @oxog/formkeeper

🎯 Quick Start

React

import { useForm, useField, FormProvider } from '@oxog/formkeeper/react'

function LoginForm() {
  const form = useForm({
    initialValues: { email: '', password: '' },
    onSubmit: async (values) => {
      await api.login(values)
    },
  })

  return (
    <FormProvider form={form}>
      <form onSubmit={form.handleSubmit}>
        <EmailField />
        <PasswordField />
        <button type="submit" disabled={form.formState.isSubmitting}>
          Login
        </button>
      </form>
    </FormProvider>
  )
}

function EmailField() {
  const { register, error, touched } = useField('email', {
    required: 'Email is required',
    pattern: { value: /^\S+@\S+$/, message: 'Invalid email' },
  })

  return (
    <div>
      <input {...register()} type="email" />
      {touched && error && <span>{error}</span>}
    </div>
  )
}

Vanilla JS

import { createForm } from '@oxog/formkeeper'

const form = createForm({
  initialValues: { email: '', password: '' },
  onSubmit: async (values) => {
    await api.login(values)
  },
})

const emailInput = document.querySelector('#email')
const { onChange, onBlur } = form.register('email', { required: true })

emailInput.addEventListener('change', onChange)
emailInput.addEventListener('blur', onBlur)

document.querySelector('form').addEventListener('submit', form.handleSubmit)

📊 Comparison

| Feature | FormKeeper | react-hook-form | Formik | |---------|-----------|-----------------|--------| | Bundle Size | < 5KB | ~40KB | ~50KB | | Dependencies | 0 | 0 | 5+ | | TypeScript | ✅ | ✅ | Partial | | Vue/Svelte | ✅ | ❌ | ❌ | | Wizard Plugin | ✅ | ❌ | ❌ | | Auto-save | ✅ | ❌ | ❌ |

📚 Documentation

Visit formkeeper.oxog.dev for full documentation including:

• 📖 Complete Guides - Getting started, core concepts, and tutorials
• 🔍 API Reference - Detailed API documentation
• 💡 Examples - Real-world usage examples
• 🎮 Playground - Try FormKeeper live in your browser

Local Documentation

• docs/DOCS.md - Complete documentation
• docs/EXAMPLES.md - Code examples
• docs/WEBSITE_SETUP.md - Website development guide

📄 License

MIT © Ersin KOÇ