← Back to Gallery / htmx-like / 05: Boosted Links

Boosted Links & Forms

Automatic AJAX navigation for links and forms
The "Boosted" pattern intercepts regular link clicks and form submissions, converting them to AJAX requests. This provides SPA-like navigation without rewriting your entire application.

Like htmx's hx-boost but using hyperscript behaviors!
boosted AJAX links htmx-like SPA navigation
How it works: When you click a link inside a boosted container, LokaScript intercepts the click, fetches the content via AJAX, swaps it into the target area, and updates the URL. No page reload!

Demo 1: Manual Boosted Pattern

Click the navigation links - they load content without page reload:

Home Page

Welcome! This content was loaded via AJAX.

The URL updated but the page did not reload.

Demo 2: Boosted Form Submission

Form submission via AJAX with result display:

Enter a search term and submit

Boosted Behavior Features

Link Interception

Catches clicks on links and fetches via AJAX

Form Handling

Submits forms via AJAX (GET or POST)

History Management

Updates URL with pushState

View Transitions

Optional smooth CSS animations

Smart Detection

Skips external links, downloads, new tabs

Modifier Keys

Respects Ctrl/Cmd+click for new tab

The Code

Manual Boosted Pattern (Hyperscript):

<!-- Each link handles its own AJAX loading --> <a href="/page" _="on click halt the event add .hx-swapping to #content fetch the @href of me as html swap #content with it using view transition push url the @href of me remove .hx-swapping from #content"> Page Link </a>

Boosted Form:

<form _="on submit halt the event set formData to new FormData(me) set params to new URLSearchParams(formData) fetch `/search?${params}` as html swap #results with it replace url `/search?${params}`"> <input name="q" /> <button type="submit">Search</button> </form>

Programmatic Boosted Behavior:

// Using the pre-built Boosted behavior (JavaScript) import { createBoosted } from '@lokascript/core/behaviors'; const boost = createBoosted({ container: document.querySelector('nav'), target: '#content', strategy: 'morph', pushUrl: true, useViewTransition: true, });

Hyperscript Behavior Definition:

behavior Boosted(target, pushHistory) init if no target then set target to document.body end if no pushHistory then set pushHistory to true end end on click from <a[href]/> in me -- Skip if modifier keys pressed if event.metaKey or event.ctrlKey then exit end halt the event add .hx-swapping to target fetch the @href of the target as html swap target with it remove .hx-swapping from target if pushHistory then push url the @href of the target end end end

How it works:

htmx Comparison:

htmx LokaScript
<body hx-boost="true"> Manual per-link or behavior pattern
Automatic link interception Explicit control per link/form

When to use boosting:

Smart behaviors (automatic):

← Previous: Multi-Target Swaps Next: Partial Validation →