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 a good interactive sites with little JS and more manageable code.
TwinSpark 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.
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 graduallly, 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-traditional event triggers, or morphing.
- Extensibility - you can easily register new directives the same way those in core are registered.
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