tiny-reactive

Small, framework-agnostic fine-grained reactivity for TypeScript and JavaScript.

tiny-reactive gives you signals, computed values, effects, batching, DOM bindings, template rendering, keyed lists, lifecycle helpers, integrations, and plugins without a virtual DOM.

Install

npm install tiny-reactive

Focused entry points are also available:

import { signal, computed, effect } from 'tiny-reactive/core';
import { bindText } from 'tiny-reactive/dom';
import { html, mount } from 'tiny-reactive/runtime';

Quick start

import { signal, effect } from 'tiny-reactive';

const count = signal(0);

const stop = effect(() => {
  console.log(`Count: ${count()}`);
});

count(1); // Count: 1
stop();

Signals are read by calling them and written by passing a value:

const firstName = signal('Ada');
const lastName = signal('Lovelace');
const fullName = computed(() => `${firstName()} ${lastName()}`);

effect(() => console.log(fullName()));
firstName('Grace');

DOM rendering

import { signal } from 'tiny-reactive';
import { html, mount } from 'tiny-reactive/runtime';

const count = signal(0);
const app = document.querySelector('#app')!;

const dispose = mount(
  () => html`
    <button onclick=${() => count(count() + 1)}>
      Clicked ${count} times
    </button>
  `,
  app
);

// dispose() removes the mounted nodes and reactive resources.

For direct DOM work, use bindings such as bindText, bindAttribute, bindProperty, bindStyle, bindClass, and bindInput.

CDN

The browser global bundle is published as tiny.global.js:

<script src="https://unpkg.com/tiny-reactive/dist/tiny.global.js"></script>
<script>
  const count = TinyReactive.signal(0);
  TinyReactive.effect(() => {
    document.body.textContent = String(count());
  });
</script>

With an ES module CDN:

<script type="module">
  import { signal } from 'https://cdn.jsdelivr.net/npm/tiny-reactive/dist/index.js';
  const count = signal(0);
</script>

Development

npm test -- --run
npm run typecheck
npm run build
npm run bench -- --run
npm audit

Documentation

• Getting started
• Reactivity
• Rendering and DOM
• Integration
• Framework integration
• Plugins
• Building a complete plugin
• Python framework integration
• Performance
• CDN usage
• API cheatsheet
• Runnable examples

License

MIT