Integration with SolidJS

Observable comes with a built-in binding for SolidJS through a global integration function.

enableObservable

The enableObservable() function enables automatic reactivity between Observables and SolidJS components. Once enabled, any Solid component that accesses Observables will automatically re-render when those Observables change.

Since the integration is built on the same reactivity system as autorun, it benefits from the same optimizations — like dependency tracking and batching updates. This means applications using Observable are highly optimized by default, leveraging Solid's fine-grained reactivity.

Syntax

import { enableObservable } from 'kr-observable/solidjs';

enableObservable(debug?);

Arguments

debug (Optional): A Boolean flag. When true, enables debug mode.
Debug Mode provides detailed console logging, showing:

• Which components accessed which observables
• What changes triggered re-renders
• When components are disposed

Return value

void

Example

// main.jsx
import { render } from 'solid-js/web';
import { enableObservable } from 'kr-observable/solidjs';
import App from './App';

// Enable integration once, at the root
enableObservable(); 

const root = document.getElementById('root');
render(() => <App />, root);

import { makeObservable } from 'kr-observable';

// Create an observable state
const appState = makeObservable({
  count: 0,
  increase() {
    ++this.count;
  },
  decrease() {
    --this.count;
  },
});

function Counter() {
  return (
    <div>
      <button onClick={appState.decrease}>-</button>
      <div>{appState.count}</div>
      <button onClick={appState.increase}>+</button>
    </div>
  );
}

export default Counter;

Try it on stackblitz.com