Zero-dependency headless form state manager with micro-kernel plugin architecture
npm install @oxog/formkeeper
---
- 📝 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
``bash`
npm install @oxog/formkeeper
`tsx
import { useForm, useField, FormProvider } from '@oxog/formkeeper/react'
function LoginForm() {
const form = useForm({
initialValues: { email: '', password: '' },
onSubmit: async (values) => {
await api.login(values)
},
})
return (
)
}
function EmailField() {
const { register, error, touched } = useField('email', {
required: 'Email is required',
pattern: { value: /^\S+@\S+$/, message: 'Invalid email' },
})
return (
$3
typescript
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)
``| Feature | FormKeeper | react-hook-form | Formik |
|---------|-----------|-----------------|--------|
| Bundle Size | < 5KB | ~40KB | ~50KB |
| Dependencies | 0 | 0 | 5+ |
| TypeScript | ✅ | ✅ | Partial |
| Vue/Svelte | ✅ | ❌ | ❌ |
| Wizard Plugin | ✅ | ❌ | ❌ |
| Auto-save | ✅ | ❌ | ❌ |
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
- docs/DOCS.md - Complete documentation
- docs/EXAMPLES.md - Code examples
- docs/WEBSITE_SETUP.md - Website development guide
MIT © Ersin KOÇ