Features
Every jsKjs feature, with a live demo
40 features across five modules. Every page has a working demo — many backed by real PHP endpoints — plus the exact source that runs it.
Selectors, DOM, traversal, events and fetch-powered AJAX — the jQuery API on native browser features.
14 features
Requests described in HTML attributes. The server returns HTML; jsKjs puts it where you said.
9 features
Reactive state declared on the element: kj-data, kj-text, kj-model, @click, components and stores.
8 features
Tweens, transforms, easing, stagger and timelines on requestAnimationFrame — with Promises.
7 features
Debounce, throttle, deep extend, escaping, UUIDs and the classic $ helpers.
2 features
Selectors & collections
Use $() exactly like jQuery — CSS selectors, context, HTML creation and DOM-ready — powered by native querySelectorAll, with collections that are real JavaScript arrays..
Live demo →CoreDOM manipulation
Insert, move, clone, wrap and remove elements with the jQuery API you know — .append(), .prepend(), .before(), .after(), .clone(), .empty() — on modern DOM primitives..
Live demo →CoreAttributes, properties & data
Read and write HTML attributes, live DOM properties and per-element data.
Live demo →CoreClasses & CSS
Toggle classes and set styles with addClass(), toggleClass() and css() — including CSS custom properties, which jsKjs reads and writes without adding px..
Live demo →CoreGeometry, scroll & visibility
Measure and position elements with width(), height(), offset() and position(), control scrolling with scrollTop(), and show or hide elements without losing their display value..
Live demo →CoreDOM traversal
Walk the DOM with find(), closest(), parent(), parents(), children(), siblings(), next(), prev(), filter(), not() and is() — every result chainable and de-duplicated..
Live demo →CoreEvents
Bind and unbind events with on(), off() and one(), group handlers with namespaces like click.menu, and use shortcut methods — the jQuery event API on native addEventListener..
Live demo →CoreEvent delegation
Handle clicks on thousands of rows — including rows added later — with a single listener using .on(event, selector, handler).
Live demo →CoreCustom events
Decouple your UI with custom events: trigger("cart:add", payload) once and let any number of independent listeners react.
Live demo →CoreAJAX with $.ajax
jQuery's $.ajax rebuilt on fetch: native Promises and async/await, JSON bodies, headers, timeouts with auto-abort, plus success/error callbacks and .done/.fail for migration..
Live demo →Core$.get, $.post & $.getJSON
One-line GET, POST and JSON requests that return Promises: await $.getJSON(url), $.get(url, data), $.post(url, data) — live examples against real endpoints..
Live demo →CoreLoading HTML fragments
Fetch a page and insert only the fragment you need with $(el).load("/page.html #section") — the classic jQuery partial-loading pattern on fetch..
Live demo →CoreForms & serialization
Turn forms into query strings or plain objects with serialize() and serializeObject(), then submit them with $.post — or declaratively with kj-post..
Live demo →CoreTimeouts, aborts & retries
Handle real-world network failure: HTTP errors with status codes, automatic timeouts, manual abort(), and a retry-with-backoff helper — demonstrated against live endpoints..
Live demo →HyperDeclarative requests
Make GET, POST, PUT, PATCH and DELETE requests straight from HTML with kj-get, kj-post and friends — htmx-style hypermedia with zero JavaScript.
Live demo →HyperTargets & swaps
Control exactly where server HTML lands with kj-target and how it is inserted with kj-swap — innerHTML, outerHTML, beforebegin, afterbegin, beforeend, afterend, textContent or none..
Live demo →HyperTriggers & debouncing
Choose when requests fire with kj-trigger: any DOM event plus a debounce like keyup delay:400ms — live search and server-side inline validation without JavaScript..
Live demo →HyperPolling
Keep a panel fresh with kj-trigger="every Ns".
Live demo →HyperLazy loading & infinite scroll
Load content when it scrolls into view with kj-trigger="revealed", or immediately with kj-trigger="load".
Live demo →HyperConfirmations & loading indicators
Ask before destructive requests with kj-confirm and show progress with kj-indicator.
Live demo →HyperSending extra data
Send more than the element itself: kj-include adds another form's fields, kj-vals adds literal JSON values.
Live demo →HyperHistory & deep links
Keep the address bar in sync with AJAX navigation using kj-push-url, and restore state on back/forward with a three-line popstate handler.
Live demo →HyperRequest lifecycle events
Every declarative request emits bubbling lifecycle events — kj:before, kj:after, kj:error and kj:load — so one document-level listener can drive a page-wide progress bar or error toast..
Live demo →PulseReactive state
Declare state on an element with kj-data and every binding inside updates when it changes.
Live demo →PulseText & HTML binding
Bind element content to state with kj-text (always safe) and kj-html (for markup you control).
Live demo →PulseConditional display
Show and hide parts of the page from state with kj-show.
Live demo →PulseTwo-way binding
Bind form controls to state in both directions with kj-model — text, number, range, checkbox, radio and select.
Live demo →PulseEvent directives
Handle events right in your markup with @click and kj-on:, including the .prevent, .stop, .enter and .escape modifiers.
Live demo →PulseAttribute binding
Bind any attribute to state with :attr or kj-bind:attr — src, alt, aria-*, disabled, style.
Live demo →PulseReusable components
Register a component once with $.component(name, factory) and reuse it anywhere with kj-data="name(args)".
Live demo →PulseGlobal stores
Share state between components with $.store(name, data).
Live demo →MotionTweens
Animate any numeric CSS property and transforms (x, y, rotate, scale) with $.to().
Live demo →MotionFrom & fromTo
Animate elements in from a starting state with $.from(), or define both ends with $.fromTo().
Live demo →MotionTimelines
Sequence animations with $.timeline(): steps run in order, "<" runs a step alongside the previous one, "+=0.3" adds a gap, and await tl.play() tells you when it's done..
Live demo →MotionStagger
Offset each element's start with the stagger option for cascades, or compute per-element delays for ripple and grid waves from any point.
Live demo →MotionEasings
Ten built-in easings — linear, ease-in/out, power2, back.out, elastic.out, bounce.out — plotted as curves and playable live.
Live demo →MotionTransforms
Animate x, y, rotate, scale, scaleX, scaleY, skewX and skewY independently — jsKjs composes them into one transform per frame.
Live demo →MotionClassic effects
jQuery's fadeIn, fadeOut, fadeToggle, slideDown, slideUp, slideToggle and animate() — same names, milliseconds and callbacks — rebuilt on the jsKjs Motion engine..
Live demo →UtilitiesDebounce & throttle
See the difference between debounce and throttle in real time: raw, throttled and debounced event lanes driven by your pointer.
Live demo →UtilitiesUtilities
The $ helper belt: $.each, $.map, $.extend (deep, prototype-pollution safe), $.param, $.parseHTML, $.escape, $.uuid, type checks and $.noConflict — run them live..
Live demo →