TwinSpark

Declarative enhancement for HTML: simple, composable, lean. TwinSpark transfers lots of the common logic from JS into a few declarative HTML attributes. This leads to good interactive sites with little JS and more manageable code.

TwinSpark is a battle-tested technology used for years on websites with 100k+ daily active users.

Simple

It's only a handful core attributes (like ts-req, ts-action, ts-trigger) and strives to avoid surprises. Also there are no dependencies on your server-side technology, you can use anything.

Composable

There are plenty of extension points available to suit your needs. You can add more directives like ts-req, add more actions, or change the outgoing requests - whatever your needs are.

Lean

Source is a just 2000 lines of code and only 8KB .min.gz. We believe in less is more.

Code example

Explanation: click on an a element (which is enhanced with a ts-req attribute) issues an XHR request to a server. Then replaces the element with response from a server, and calls ts-req-after, which is an action.

<div>
  <a href="/index"
     ts-req
     ts-req-after="target 'sibling div', remove">
     Update me
  </a>
  <div>I'm just hanging out here</div>
</div>

Demo

Update me

I'm just hanging out here

How to use

Just add file to your server’s static folder or use CDN:

<script src="https://cdn.jsdelivr.net/gh/piranha/twinspark-js@main/dist/twinspark.min.js"></script>

What it is

TwinSpark could be mentally split in three parts:

Page fragment updates facilitated via HTML attributes (no JS needed). This is the core idea.
Morphing - a strategy to update HTML gradually, without breaking state and focus. Makes form validation and animations on HTML changes a breeze.
Actions - incredibly simple promise-enabled language for (limited) client-side scripting. Bring your logic into a single place.

Some reasons why TwinSpark exists despite HTMx and Unpoly (those are similar in approach):

It’s really small (8KB .min.gz).
There is no attribute inheritance — keeps surprises away.
Batching - very useful if you want to use HTTP caching effectively, while maintaining some personalisation for your users.
Bundled - a lot of practical stuff packed in, like actions, or non-native event triggers, or morphing.
Extensibility - you can easily register new directives the same way those in core are registered.

Who is using this

kasta.ua - leading Ukrainian online fashion marketplace
Prophy - Semantic Solutions for Research, Review, and Recruitment
PMPRO - online shop “everything for permanent makeup”
I.N.K.E.D - online shop “everything for tattoo”
Green Owl - CBD online shop

Send pull request or shoot an email to add your site here.

Resources

A tale of webpage speed, or throwing away React - article about how TwinSpark came to be
ecomspark - a little example of TwinSpark in Clojure
ecomspark-flask - same example, but in Python with Flask