Form Guardian

Universal form autosave library. Works with any form library or vanilla HTML forms. No framework dependencies.

🚀 Quick Start

Choose your framework and get started in minutes:

React

Installation

npm install @form-guardian/react

Usage

import { useFormAutosave } from '@form-guardian/react';

function MyForm() {
  const { formRef, hasDraft, clearDraft } = useFormAutosave('my-form', {
    autoRestore: true,
  });

  return (
    <form ref={formRef} onSubmit={async (e) => {
      e.preventDefault();
      await clearDraft();
      // Submit...
    }}>
      {hasDraft && <div>💾 Draft saved</div>}
      <input name="name" placeholder="Name" />
      <input name="email" type="email" placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  );
}

Learn more →

Vanilla JS

Installation

npm install @form-guardian/dom

Usage

<script type="module">
  import { attachFormAutosave } from '@form-guardian/dom';

  const form = document.getElementById('my-form');
  const autosave = attachFormAutosave({
    formId: 'my-form',
    root: form,
    autoRestore: true,
  });

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    await autosave.clear();
    // Submit...
  });
</script>

<form id="my-form">
  <input name="name" placeholder="Name" />
  <input name="email" type="email" placeholder="Email" />
  <button type="submit">Submit</button>
</form>

Learn more →

Vue

Installation

npm install @form-guardian/dom

Usage

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { attachFormAutosave } from '@form-guardian/dom';

const formRef = ref(null);
let autosave;

onMounted(() => {
  autosave = attachFormAutosave({
    formId: 'my-form',
    root: formRef.value,
    autoRestore: true,
  });
});

onBeforeUnmount(() => {
  autosave?.destroy();
});

const handleSubmit = async () => {
  await autosave.clear();
  // Submit...
};
</script>

<template>
  <form ref="formRef" @submit.prevent="handleSubmit">
    <input name="name" placeholder="Name" />
    <input name="email" type="email" placeholder="Email" />
    <button type="submit">Submit</button>
  </form>
</template>

Learn more →

Angular

Installation

npm install @form-guardian/dom

Usage

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { attachFormAutosave } from '@form-guardian/dom';

@Component({
  selector: 'app-my-form',
  template: `
    <form #formElement (ngSubmit)="onSubmit()">
      <input name="name" placeholder="Name" />
      <input name="email" type="email" placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  `
})
export class MyFormComponent implements OnInit, OnDestroy {
  @ViewChild('formElement') formElement!: ElementRef<HTMLFormElement>;
  private autosave;

  ngOnInit() {
    setTimeout(() => {
      this.autosave = attachFormAutosave({
        formId: 'my-form',
        root: this.formElement.nativeElement,
        autoRestore: true,
      });
    });
  }

  ngOnDestroy() {
    this.autosave?.destroy();
  }

  async onSubmit() {
    await this.autosave?.clear();
    // Submit...
  }
}

Learn more →

Svelte

Installation

npm install @form-guardian/dom

Usage

<script>
  import { onMount, onDestroy } from 'svelte';
  import { attachFormAutosave } from '@form-guardian/dom';

  let formElement;
  let autosave;

  onMount(() => {
    autosave = attachFormAutosave({
      formId: 'my-form',
      root: formElement,
      autoRestore: true,
    });
  });

  onDestroy(() => {
    autosave?.destroy();
  });

  async function handleSubmit(event) {
    event.preventDefault();
    await autosave.clear();
    // Submit...
  }
</script>

<form bind:this={formElement} on:submit={handleSubmit}>
  <input name="name" placeholder="Name" />
  <input name="email" type="email" placeholder="Email" />
  <button type="submit">Submit</button>
</form>

Learn more →

Features

• 🌐 Universal - Works with React, Vue, Angular, or vanilla HTML
• 💾 IndexedDB Storage - Reliable draft storage in the browser
• ⚛️ React Hooks - Ready-to-use hooks for React applications
• 🔒 Security - Automatic exclusion of sensitive fields
• ⏰ TTL Support - Automatic draft expiration
• ⚡ Debounce - Performance optimization
• 🛡️ Conflict Prevention - Automatic save blocking during restoration
• 📊 Analytics Events - Comprehensive event system for tracking (onBeforeSave, onAfterSave, onBeforeRestore, onAfterRestore, onDraftExpired)
• ⚙️ Batching - Save changes in batches to reduce IndexedDB load
• 📈 Draft Status Hook - Lightweight useDraftStatus hook for real-time status tracking

Packages

@form-guardian/dom

Universal DOM-based form autosave. Works with any form library or vanilla HTML forms.

Installation:

npm install @form-guardian/dom

Usage:

import { attachFormAutosave } from '@form-guardian/dom';

const form = document.getElementById('my-form');

const autosave = attachFormAutosave({
  formId: 'my-form-id',
  root: form,
  autoRestore: true,
});

form.addEventListener('submit', () => {
  autosave.clear();
});

Features:

• Works with any form library (React, Vue, Angular, vanilla)
• Automatic field detection
• Security: excludes password fields and sensitive data
• Configurable debounce
• TTL support for draft expiration

@form-guardian/react

React hooks and components for form autosave. Built on top of @form-guardian/dom.

Installation:

npm install @form-guardian/react

Peer Dependencies:

• react: ^16.8.0 || ^17.0.0 || ^18.0.0

Usage:

import { useFormAutosave } from '@form-guardian/react';

function MyForm() {
  const { formRef, clearDraft } = useFormAutosave('my-form-id', {
    autoRestore: true,
  });

  return <form ref={formRef}>...</form>;
}

Features:

• React hooks API
• Automatic draft management
• Integration with react-hook-form, Formik, etc.
• Controlled component support

@form-guardian/core

Headless core for draft management. Universal, framework-agnostic.

Installation:

npm install @form-guardian/core

Usage:

import { saveDraftCore, loadDraftCore, clearDraft } from '@form-guardian/core';

// Save draft
await saveDraftCore('form-id', { name: 'John', email: 'john@example.com' });

// Load draft
const draft = await loadDraftCore('form-id');

// Clear draft
await clearDraft('form-id');

Features:

• Framework-agnostic
• IndexedDB storage
• TTL support
• Custom storage backends

How It Works

1. Field Detection: Automatically detects form fields (inputs, textareas, contenteditable)
2. Debounced Saving: Saves draft after user stops typing (configurable delay)
3. IndexedDB Storage: Stores drafts in browser's IndexedDB for persistence
4. Auto-Restore: Optionally restores drafts when form is loaded
5. Security: Automatically excludes password fields and sensitive data

Browser Support

• Modern browsers with IndexedDB support
• Chrome, Firefox, Safari, Edge (latest versions)
• Mobile browsers (iOS Safari, Chrome Mobile)

Learn More

• 📖 Why Form Guardian? - Understand the problem we solve
• 🔍 Comparison - Compare with other solutions
• 🚀 Getting Started - Detailed setup guide
• 🎯 Use Cases - Real-world examples and patterns
• ⚡ Features - Analytics, batching, and more
• ✅ Best Practices - Tips and pitfalls to avoid