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.
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>
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
- 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
Send pull request or shoot an email to add your site here.