What is Tiny Engine?

From a CDN

Include tiny-engine-core via unpkg:

<script src="https://unpkg.com/tiny-engine-core"></script>

Why another micro-framework?

Most modern frameworks ship a lot of runtime even when you don't need it. tiny-engine-core sits in the niche of just enough: when you need a counter, a tab strip, a dropdown, a modal - but you don't want to ship React, Vue, or even Alpine.

It works in a script tag, in an ESM bundle, or alongside any framework. Mount it inside a React component and let tiny-engine handle a small widget without re-rendering your tree.

Hello, capsule

The smallest useful program is a counter. Here's what it looks like:

<button ui-counter ref="root">
  Clicked <span ref="label">0</span> times
</button>

<script type="module">
  import { UI, Capsule } from "https://unpkg.com/tiny-engine-core";

  const Counter = (el, api) => {
    let count = 0;
    api.on(el, "click", () => {
      count++;
      api.refs.label.textContent = count;
    });
  return {};

  UI.register("counter", Counter);
  UI.init();
</script>

Concepts at a glance

Browser support

tiny-engine-core targets evergreen browsers - anything that ships ES2020 and MutationObserver. That covers Chrome, Edge, Firefox, Safari, and modern WebView.