https://github.com/aggroot/hctx

I wrote a tiny 5kb library with a new concept for client-side interactivity: reactive hypermedia contexts embedded in HTML.

It looks like this:

  <div hctx="counter">
    <span hc-effect="render on hc:statechanged">0</span>
    <button hc-action="increment on click">+1</button>
  </div>

It comes with reactive state, stores, and allows you to build your own DSL in HTML.

One feature that stands out is the ability to spread a single context scope across different DOM locations:

    <!-- Header -->
    <nav>
        <div hctx="cart">
            <span hc-effect="renderCount on hc:statechanged">0 items</span>
        </div>
    </nav>

    <!-- Product listing -->
    <div hctx="cart">
        <button hc-action="addItem on click">Add to Cart</button>
    </div>

    <!-- Sidebar -->
    <div hctx="cart">
        <ul hc-effect="listItems on hc:statechanged"></ul>
    </div>

Contexts are implemented via a minimal API, and TypeScript is fully supported.

Curious what you think, feedback is welcomed.