Getting Started

mobx-solid connects MobX observables to SolidJS reactivity. After a one-time setup, you can read MobX state in JSX and Solid computations; when observables change, Solid re-evaluates only the affected parts of the UI.

Current package version: 0.1.0.

Installation

npm install mobx-solid mobx solid-js
# or
pnpm add mobx-solid mobx solid-js

Peer dependencies:

• mobx ^6
• solid-js ^1.6

Quick Start

import { enableObservableTracking } from "mobx-solid";
import { observable } from "mobx";
import { render } from "solid-js/web";

// 1. Call once at the app entry point
enableObservableTracking();

// 2. Create a MobX store
const store = observable({
  count: 0,
  get double() {
    return this.count * 2;
  },
  increment() {
    this.count++;
  },
});

// 3. Read MobX observables in JSX — Solid tracks them via enableExternalSource
function Counter() {
  return (
    <div>
      <p>
        {store.count} × 2 = {store.double}
      </p>
      <button onClick={() => store.increment()}>+</button>
    </div>
  );
}

render(() => <Counter />, document.getElementById("app")!);

What to call

Goal	API
Track MobX everywhere in Solid (recommended)	enableObservableTracking()
Bridge one expression to a Solid accessor (deprecated)	obs(getter)

Most apps only need enableObservableTracking(). obs() is deprecated and will be removed in the next major version — use enableObservableTracking() instead.

Next steps

• How It Works — how the MobX ↔ Solid bridge is built
• Reading Observables — where reads must live to stay reactive
• API Reference