MobX FormKit DevTools

DevTools for MobX FormKit — a browser extension (Chrome / Firefox / Edge) plus an in-app dock SDK.

[!NOTE] The devtools are opt-in: they only activate on pages that import mobx-formkit/devtools.

Prerequisites

The page under inspection must install the devtools hook. Import it before creating your forms (e.g. at the top of the client entry):

import 'mobx-formkit/devtools';

Build

npm install
npm run build:ext

This produces the unpacked extensions in extension/dist/{chrome,firefox,edge}.

Install

Chrome

1. Open chrome://extensions.
2. Enable Developer mode (top-right toggle).
3. Click Load unpacked.
4. Select extension/dist/chrome.

Edge

1. Open edge://extensions.
2. Enable Developer mode.
3. Click Load unpacked.
4. Select extension/dist/edge.

Firefox

1. Open about:debugging#/runtime/this-firefox.
2. Click Load Temporary Add-on….
3. Select extension/dist/firefox/manifest.json.

Dev-mode shortcut (build + launch in one command): npm run dev:chrome · npm run dev:firefox · npm run dev:edge

How to use

1. Open a page that imports mobx-formkit/devtools.
2. Open DevTools (F12 / Cmd+Opt+I).
3. Go to the "MobX FormKit" panel (overflow menu » if hidden).
4. Pick a form from the selector and inspect it:
   • Form — form-level props
   • Options — toggle boolean form options (search + grouped)
   • Values — current field values
   • Fields — full field snapshots
   • Helpers — errors, labels, placeholders, defaults, rules, bindings, …
   • Controls: Submit / Validate / Reset / Clear

The panel updates live (per-form) and shows a connection status dot in the top-right corner.

In-app dock (SDK)

The in-app dock is shipped per engine — React is exposed via the /react subpath.

npm i mobx-formkit-devtools

import DevTools from 'mobx-formkit-devtools/react';
import forms from './forms';

DevTools.register(forms);   // register your forms ({ name: form })
DevTools.select('login');   // select a form (optional)
DevTools.open(true);        // open the dock

function App() {
  return (
    <>
      <DevTools.UI />        {/* render the dock once, at the app root */}
      {/* your app */}
    </>
  );
}

API:

• DevTools.UI — the dock component (render it once, at the app root).
• DevTools.register(forms) — register an object of forms ({ name: form }).
• DevTools.select(key) — select a form by key.
• DevTools.open(flag) — open/close the dock.
• DevTools.Options — the form-options component.
• DevTools.theme({ … }) — override the color theme.

The React SDK expects these peer dependencies (install them alongside):

• react / react-dom
• mobx (^6.12 || ^7)
• mobx-react
• mobx-formkit (the form library; the legacy mobx-react-form name is also supported)

License

MIT