kr-observable

Observable

Adds reactivity power to your JavaScript 😎

• Easy to use and provides a great developer experience;
• Supports classes and plain objects;
• Supports subclassing;
• Works in all runtimes (Node.js, Web, e.t.c);
• Well typed;
• 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