MobX Formkit

August 16, 2026 · View on GitHub

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

MobX Formkit — Demo

Interactive demo app for mobx-formkit

NPM NPM Version

Live Demo

https://foxhound87.github.io/mobx-formkit-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-formkit, 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 MKF_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-formkit 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-formkit 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-formkit-api
npx skills add https://github.com/foxhound87/skills --skill mobx-formkit-validation
npx skills add https://github.com/foxhound87/skills --skill mobx-formkit-bindings

Project Structure

mobx-formkit-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