kr-observable

Observable

Adds reactivity power to your JavaScript 😎

1. Easy to use and provides a great developer experience;
2. Supports classes and plain objects;
3. Supports subclassing;
4. Works in all runtimes (Node.js, Web, e.t.c);
5. Well typed;
6. Framework-agnostic.

Built in bindings

• React
• Preact
• Solid-js
• Vue

Docs – observable.ru

Example with React

import { makeObservable } from 'kr-observable'
import { observer } from 'kr-observable/react'

const state = makeObservable({ count: 0 })

function App() {
  return (
    <div>
      <button onClick={() => --state.count}>-</button>
      <div>{state.count}</div>
      <button onClick={() => ++state.count}>+</button>
    </div>
  )
}
export default observer(App)

More example and full docs on observable.ru

Performance and memory usage benchmark

js-framework-benchmark

Reactivity benchmark

mol.hyoo.ru