Usually requests happen on natural events: submit on forms and click elsewhere. You can use ts-trigger="<event-type>" to change that behavior.

Syntax is also a bit more complex than just event-type, it allows some modifiers:

Any regular DOM events are supported: mouseover, change, blur, etc. There are some additional event types:

Event Description
load Trigger on document load or when element appears on screen (if document is already loaded).
scroll Trigger when window is scrolled.
windowScroll Trigger when the target element is scrolled.
outside Trigger on click outside of the element.
remove Trigger when the element is removed. Uses MutationObserver.
childrenChange Trigger when children are added to or removed from the element. Uses MutationObserver.
empty childrenChange, but element left with no children
notempty childrenChange, but element has at least 1 child.
visible At least 1% of the element appeared in the viewport. Uses IntersectionObserver.
invisible Element moved off the screen. Uses IntersectionObserver.
closeby At least 1% of the element is closer than window.innerHeight / 2 to the viewport. Uses IntersectionObserver.
away Inverse of closeby. Uses IntersectionObserver.


Triggering Requests #

Usually requests are triggered on natural interrupts: submit on forms and clicks elsewhere, but sometimes you want more, like triggering on being seen or hovered:


Hover me!

Visibility #

Doing something when element is almost visible makes it possible to implement lazy loading and various analytical events


You'll probably see this text after around 5 seconds or so. Click "Reset" to see loader again.

This sentence will log some message when it becomes invisible (moves out of browser viewport, and, actually, on load as well).

Click Outside #

Popups, modals, menus and some other elements can make use of click happened outside. It could be done with markup and underlying element, but why bother if you have straightforward trigger.

This trigger is ideally used with modifier once, since you're probably going to remove that modal you calling it on - using once will clean up your listeners so you won't get memory leaks.


Dynamic Form Validation (advanced)#

Form validation is a common task, and TwinSpark allows to consolidate validation logic on the server. Surprisingly, it could be difficult, but ts-swap="morph" strategy allows us to just return whole new form with errors and not mess up with focus.

Important bits


Solve this problem with odd numbers

= 14

On Removal (advanced)#

It is useful to do something when node is removed (especially if that's some child or even non-related node triggering that removal). It's possible, but not recommended to use often since performance characteristics of the code are not well understood.


When this paragraph is removed by clicking button, it will resurrect itself.