v1.6.0 - scan, destroy, hydration, and metrics

A featherweight UI runtime for the open web.

tiny-engine-core is a lightweight JavaScript engine for building declarative HTML capsules - class-based or functional, with a lifecycle-aware runtime, scoped scan and explicit destroy APIs, a global event bus, devtools snapshots, plugins, and a reducer-style store.

Quick start Read the docs

01 · taste it

Twelve lines, one interactive component.

Define a capsule, register it, then sprinkle ui-counter on any element. tiny-engine wires up refs, props, listeners, and devtools snapshots - no build step required.

1.6.0

current release

runtime deps

counter.ts

import { UI, Capsule } from "tiny-engine-core";

class Counter extends Capsule {
  constructor(el, options) {
    super(el, options);
    this.count = 0;
    this.on(this.refs.inc, "click", () => {
      this.count++;
      this.refs.label.textContent = this.count;
    });
  }
}

UI.register("counter", Counter);
UI.init();

02 - what it ships with

A small surface area, a lot of leverage.

A small runtime surface, now with better inspection and extension hooks.

Featherweight

A small zero-dependency runtime. No virtual DOM, no compiler, no framework lock-in.

Class or function capsules

Declarative HTML

Mount from ui-* attributes, drive public methods with data-ui-toggle triggers, and use @directives where they fit.

Runtime snapshots

UI.devtools() and window.__TINY_ENGINE__ expose config, registry, capsules, stores, plugins, warnings, and events.

Reducer store

CapsuleStore uses send/connect plus middleware that can log, transform, or cancel actions.

Plugin system

Install extensions with UI.use(plugin), subscribe to lifecycle hooks, expose helpers, and add diagnostics.

Debug mode

UI.config({ debug, warnings }) gives clearer development-time logging without changing production behavior.

Framework friendly

Mount inside React, Vue, Astro, Svelte - or stand alone. tiny-engine plays nice.