🎮 Live Examples

Try Form Guardian in action! All examples are hosted on GitHub and can be run locally or viewed in the repository.

📦 Repository

All examples are available in our GitHub repository:

github.com/Tishkin/form-guardian-examples

Each example runs independently and demonstrates real-world usage patterns.

🚀 Quick Start

# Clone the repository
git clone https://github.com/Tishkin/form-guardian-examples.git
cd form-guardian-examples

# Install dependencies
pnpm install

# Run all examples at once
pnpm dev:all

# Or run specific example
pnpm dev:react     # Port 3001
pnpm dev:nextjs    # Port 3005
pnpm dev:vue       # Port 3002
pnpm dev:svelte    # Port 3003
pnpm dev:angular   # Port 4200
pnpm dev:vanilla   # Port 3004

⚛️ React Examples

Port: 3001
Path: examples/react

What's Included:

1. React Hook Form Integration

   • Controlled forms with validation
   • Auto-restore with setValue
   • Draft status indicator
   • Clear drafts on submit

2. Formik Integration

   • Formik values synchronization
   • Custom restore logic
   • Validation-aware autosave

3. Plain React Forms

   • Uncontrolled components
   • Simple ref-based integration
   • Minimal setup example

Run it:

pnpm dev:react
# Open http://localhost:3001

🔷 Next.js Examples

Port: 3005
Path: examples/nextjs

What's Included:

1. App Router (Next.js 13+)

   • Client components with 'use client'
   • SSR-compatible setup
   • Route-specific forms

2. Server Components Integration

   • Form components in client
   • Data fetching in server components
   • Hydration-safe autosave

3. API Routes Example

   • Draft backup to API
   • Sync local and server drafts

Run it:

pnpm dev:nextjs
# Open http://localhost:3005

📄 Vanilla JavaScript Examples

Port: 3004
Path: examples/vanilla

What's Included:

1. Pure HTML/JS

   • No framework required
   • Direct DOM manipulation
   • ES modules

2. Multi-Step Form

   • Wizard-style form
   • Draft persists across steps
   • Progress tracking

3. Dynamic Fields

   • Add/remove fields dynamically
   • Autosave adapts automatically

Run it:

pnpm dev:vanilla
# Open http://localhost:3004

💚 Vue.js Examples

Port: 3002
Path: examples/vue

What's Included:

1. Vue 3 Composition API

   • setup() with refs
   • Lifecycle hooks integration
   • Reactive draft status

2. Vue 3 Options API

   • Traditional Vue syntax
   • Component lifecycle
   • Method-based approach

3. Vuelidate Integration

   • Form validation
   • Conditional autosave

Run it:

pnpm dev:vue
# Open http://localhost:3002

🔥 Svelte Examples

Port: 3003
Path: examples/svelte

What's Included:

1. SvelteKit Integration

   • Form actions
   • Load functions
   • Progressive enhancement

2. Svelte Stores

   • Store-based state
   • Reactive draft indicator
   • Store subscriptions

3. Basic Svelte

   • Simple bind syntax
   • Lifecycle events
   • Two-way binding

Run it:

pnpm dev:svelte
# Open http://localhost:3003

🅰️ Angular Examples

Port: 4200
Path: examples/angular

What's Included:

1. Reactive Forms

   • FormBuilder integration
   • FormControl autosave
   • Validation awareness

2. Template-Driven Forms

   • NgModel approach
   • ViewChild ref access
   • Change detection

3. Angular Material Forms

   • Material UI components
   • Form field integration
   • Custom error handling

Run it:

pnpm dev:angular
# Open http://localhost:4200

🎯 Common Features Demonstrated

All examples showcase:

✅ Automatic Saving - Save as user types
✅ Draft Restoration - Restore on page load
✅ Draft Management - Clear, check status
✅ Blacklist/Whitelist - Exclude specific fields
✅ TTL Support - Auto-expire old drafts
✅ Batch Saving - Performance optimization
✅ Analytics Events - Track save/restore
✅ Error Handling - Graceful failures

📚 Example Structure

form-guardian-examples/
├── examples/
│   ├── react/              # React + Vite
│   │   ├── src/
│   │   │   ├── examples/   # Hook Form, Formik, Plain
│   │   │   └── App.tsx
│   │   └── package.json
│   ├── nextjs/             # Next.js App Router
│   ├── vanilla/            # Pure JS
│   ├── vue/                # Vue 3
│   ├── svelte/             # SvelteKit
│   └── angular/            # Angular 17+
└── package.json            # Monorepo scripts

🔧 Prerequisites

• Node.js >= 16.0.0
• pnpm >= 8.0.0 (recommended)

Install pnpm:

npm install -g pnpm

💡 Usage Tips

Run Multiple Examples

# Terminal 1
pnpm dev:react

# Terminal 2
pnpm dev:vue

# Or all at once (parallel)
pnpm dev:all

Build for Production

# Build all
pnpm build:all

# Build specific
pnpm build:react
pnpm build:nextjs

Ports Used

Framework	Port
React	3001
Vue	3002
Svelte	3003
Vanilla JS	3004
Next.js	3005
Angular	4200

🎓 Learning Path

Recommended order:

1. Start with Vanilla JS - Understand core concepts
2. Try React - See framework integration
3. Explore Your Framework - Vue, Svelte, or Angular
4. Advanced: Next.js - SSR considerations

🤝 Contributing

Found a bug or want to add an example?

1. Fork the repository
2. Create your feature branch
3. Add your example
4. Submit a pull request

📖 Related Documentation

• Getting Started - Initial setup
• Frameworks - Framework-specific guides
• API Reference - Complete API docs
• Best Practices - Tips and patterns

💬 Need Help?

• Troubleshooting Guide
• GitHub Issues
• Check example source code for inline comments

---

Happy coding! 🚀