The full feature tour

Thirty-seven live demos — eight combined-subsystem showcases plus twenty-nine focused examples, one script tag. GET endpoints hit real static files under /api/ — open the network tab and watch. POST/PUT/DELETE and query-filtered routes are simulated in-page (static hosts can't process them) and labeled accordingly.

✦ Showcase Pulse · Reactivity Hyper · Declarative AJAX AJAX Lab Motion · Animation DOM & Traversal Lab Utilities Console

✦ Showcase · everything combined

Mini-apps, not snippets

Each showcase combines several subsystems — the way you'd actually build things.

S1Split-text hero Motion

Animate everything.

Text split into spans with $.map · $.fromTo per character · stagger · back.out

S2Whack-a-box Motion + Store + Events

score 0 · 15s

$.store scoreboard · delegated clicks · $.fromTo pop-ins · $.timeline().add(fn) finale

S3Mini-shop with fly-to-cart AJAX + Store + Motion + Traversal — real static /api/products.json

🛒 cart: 0

$.getJSON · sort by re-appending DOM · .filter()/.not() live filtering with debounce · clone flies to the badge via .offset() + $.to · shared $.store

S4Animated modal Motion + Events

show/hide · $.fromTo scale+opacity · namespaced document keyup · backdrop delegation

S5Toast notifications Custom events + Motion

$(document).trigger('toast:show', payload) · listener builds + animates · auto-dismiss with fadeOut

S6FAQ accordion Effects + Traversal

slideToggle · .parent().siblings() · .children() · only one panel open at a time

S7Swap-strategy visualizer Hyper — real static files

■ target — watch where each response lands

All kj-swap modes against one target · innerHTML button also demos kj-push-url (check the URL bar)

S8Theme switcher + back-to-top CSS variables + scrollTop

.css('--paper', …) live CSS-variable theming · $(window).scrollTop(0) · the top progress bar is $(window).on('scroll', $.throttle(…))

Pulse · Reactivity

State that lives in your HTML

01Counter

kj-data · @click · kj-text · :disabled binding

02Dropdown

kj-show · :aria-expanded · @keyup.escape

03Two-way binding

VIP member

kj-model on text input + checkbox

04Tabs — registered component

$.component('tabs', …) · init() lifecycle · kj-data="tabs"

05List rendering

@keyup.enter · kj-html + $.escape (XSS-safe)

06Global store — shared state

Two independent components sharing one $.store

Hyper · Declarative AJAX

Requests described in attributes

07Click to fetch real static file

requesting…

kj-get · kj-target · kj-indicator (+ automatic aria-busy)

08Load on page load real static file

Server status: checking…

kj-trigger="load" fired this request before you scrolled here

09Live search simulated — needs a query

kj-trigger="keyup delay:300ms" — filters /api/packages.json

10Form POST simulated

Form auto-serializes; default trigger is submit

11Polling + lifecycle events real static file

…

waiting for first poll…

kj-trigger="every 3s" · kj:after event updates the counter below it

12Delete with confirm simulated

kj-delete · kj-swap="outerHTML" · kj-confirm

13Lazy load on reveal real static file

These comments loaded only when this panel scrolled into view.

Loading when revealed…

kj-trigger="revealed" (IntersectionObserver)

14Feed with append swap real static files

page 1 of 3

Page 1 via kj-swap="beforeend" on load · “Load more” uses $.get + .append()

15kj-include + kj-vals simulated

Sends another form's fields + literal JSON values; the echo shows what arrived

AJAX Lab · Programmatic

The same power from JavaScript

16$.get — random static quote

$.get('../api/quotes/' + n + '.html') — five real files, picked at random

17$.getJSON — render a table

await $.getJSON · $.map · $.escape

18.load() — fragment extraction

Fetches a full page, inserts only the #headlines fragment

19Error handling — a real 404

$.ajax(...).fail(err => …) — err.status from a genuine static-host 404

20timeout & abort simulated slow endpoint

$.ajax({ timeout }) auto-aborts · the returned promise exposes .abort()

21serialize / serializeObject

.serialize() → query string · .serializeObject() → plain object

Motion · Animation

A real tween engine

22Stagger, elastic & timelines

$.to · stagger · $.timeline with '<' positioning

23Easing gallery

All 10 built-in easings + one custom function (last button)

24$.fromTo + chainable .to()

v1.0.0

$.fromTo(badge, { scale: 0 }, { scale: 1, ease: 'elastic.out' })

25Classic effects

The classic jQuery effects, rebuilt on the Motion engine (milliseconds).

fadeToggle(400) · slideToggle(300) · animate({ marginLeft }, 500)

Core · DOM & Traversal Lab

Your muscle memory still works

26Traversal playground

The outlined node is the anchor; each button highlights what the method returns.

root
- branch A
  - leaf A1
  - leaf A2 (anchor)
  - leaf A3
- branch B
  - leaf B1
  - leaf B2 (.special)

is · find · filter · not · closest · parents · siblings · next · prev · children

27Insertion toolkit

■ target element

appendTo/prependTo work too — clone uses $('#sb-target').clone().appendTo()

28Attributes, props & data

.prop('disabled') · .attr() · .removeAttr() · .data() · .removeData() · .hasClass()

29Events lab + todo

event log…

.one() · namespaces · .off('.ns') · .trigger(type, payload) · delegation · .hover()

Utilities Console

Every helper, executed live

raw: 0 · debounced: 0 · throttled: 0

click “Run all utilities” — each line is real output from $.…

$.each · $.map · $.extend · $.param · $.parseHTML · $.trim · $.isArray/isFunction/isPlainObject · $.uuid · $.escape · $.debounce · $.throttle · $.version · width/offset