Repo • Documentation • Live Demo • Demo Code • NPM • Skills • Tutorial • Join Discord Channel

MobX React Form — Demo

Interactive demo app for mobx-react-form

---

Live Demo

https://foxhound87.github.io/mobx-react-form-demo

Browse interactive examples covering flat & nested fields, validation plugins (DVR, VJF, ZOD), async validation, Material UI, Ant Design, React Aria, Headless UI, React Select, React Widgets, sortable lists, file upload, wizards, computed fields, and more.

---

Features Demonstrated

• Validation Plugins — DVR (validatorjs), VJF (vanilla functions), ZOD schemas, async validation
• Flat & Nested Fields — unified mode, separated mode, mixed mode, deep nesting
• Event Hooks — onInit, onChange, onFocus, onBlur, onSubmit, onSuccess, onError
• Observers & Interceptors — reactive field observation, mutation interception
• Computed Fields — reactive derived values, autorun-based calculations
• Multi-step Wizard — nested groups, per-step validation, review screen
• Sortable Lists — drag-and-drop reordering with @dnd-kit
• File Upload — drag-and-drop zones, FileList access, validation
• Dynamic Fields — arrays, nested composition, conditional fields
• UI Integrations — Material UI, Ant Design, React Aria, Headless UI, React Select, React Widgets, Vanilla HTML
• Forms Composer — orchestrate multiple forms, batch validate/submit/clear/reset

---

Quick Start

Prerequisites

• Node.js >= 18
• Git (with SSH keys configured for GitHub)

Setup

# Add submodules (mobx-react-form, devtools, docs)
npm run submodules:add

# Fetch submodules
npm run submodules:fetch

# Install submodule dependencies
npm run submodules:install

# Install project dependencies
npm install --legacy-peer-deps

# Start development server
npm run dev

Note: Submodules are optional if you're only running the demo. Set REACT_DEV=1 or use MRF_SOURCE=node_modules to use the published npm packages directly.

MobX version: the demo runs on MobX 7 (mobx@^7, mobx-react@^10) by default. Both mobx-react-form and the demo support MobX 6 & 7. To verify the MobX 6 path run npm run verify:mobx6 (or npm run verify:mobx7 to re-check the default).

---

AI Agent Skills

🤖 AI Agent Skills — Reusable instructions for AI coding assistants (Cursor, Windsurf, Claude Code, Codebuff, Copilot, etc.) to generate correct mobx-react-form code.

# Install all skills
npx skills add https://github.com/foxhound87/skills --all

# Or install individual skills
npx skills add https://github.com/foxhound87/skills --skill mobx-react-form-api
npx skills add https://github.com/foxhound87/skills --skill mobx-react-form-validation
npx skills add https://github.com/foxhound87/skills --skill mobx-react-form-bindings

---

Project Structure

mobx-react-form-demo/
├── pages/             # Vike page routes
├── src/
│   ├── components/    # React components (Nav, Welcome, forms, etc.)
│   ├── forms/         # Form definitions and configurations
│   ├── menu.ts        # Demo navigation menu
│   └── style.css      # Global styles
├── modules/           # Git submodules (lib, devtools, docs)
├── scripts/           # Build and utility scripts
└── patches/           # Dependency patches

---

Deployment

The demo is built with Vite + Vike and deployed to GitHub Pages:

npm run deploy

This prerenders all 30+ demo pages as static HTML and pushes to the gh-pages branch.

---

Contributing

1. Fork the repository
2. Make your changes
3. Ensure the demo runs: npm run dev
4. Commit and open a pull request

When adding new demo forms, follow the existing pattern in src/forms/ and register the demo in src/menu.ts.

License

MIT