Repo • NPM • Documentation • Live Demo • MobX React Form • Join Discord Channel

MobX React Form DevTools

DevTools for MobX React Form

---

Features

• Real-time form state inspection
• Reactive field monitoring with MobX observables
• Validation error display and debugging
• Resizable, dockable DevTools panel
• Custom theming support
• Multiple form registration and switching

---

Install

npm install --save mobx-react-form-devtools

Demo

Live Demo — Open the DevTools panel on any demo form.

Usage

import MobxReactFormDevTools from 'mobx-react-form-devtools';

// register forms (mobx-react-form Instances)
MobxReactFormDevTools.register({
  loginForm,
  registerForm,
  supportForm,
});

// select form to show into the devtools
MobxReactFormDevTools.select('registerForm');

// open the devtools (closed by default)
MobxReactFormDevTools.open(true);

// render the component
<MobxReactFormDevTools.UI />

Theme

// custom theme colors
MobxReactFormDevTools.theme({
  base00: '#2b303b',
  base01: '#343d46',
  base02: '#4f5b66',
  base03: '#65737e',
  base04: '#a7adba',
  base05: '#c0c5ce',
  base06: '#dfe1e8',
  base07: '#eff1f5',
  base08: '#bf616a',
  base09: '#d08770',
  base0A: '#ebcb8b',
  base0B: '#a3be8c',
  base0C: '#96b5b4',
  base0D: '#8fa1b3',
  base0E: '#b48ead',
  base0F: '#ab7967',
});

Screenshot

Contributing

If you want to contribute to the development, do not hesitate to fork the repo and send pull requests.

And don't forget to star the repo, I will ensure more frequent updates! Thanks!

License

MIT