Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/soyleninjs/swappit/llms.txt

Use this file to discover all available pages before exploring further.

Swappit has a built-in content cache. Preloading fetches a URL and stores the parsed HTML document without updating the DOM. When the user then clicks a link, the swap happens instantly from cache — no waiting for a network round trip.

​
Preload Modes

Swappit supports three preload modes that control when a URL is fetched relative to user interaction:

false (default)

Content is fetched only when the user clicks the link. No pre-fetching occurs.

hover

Content is fetched on mouseenter (desktop) or touchstart (mobile). Ideal for secondary pages.

instant

Content is fetched as soon as the page initializes, before any user interaction. Best for high-priority destinations.

​
Global Preload Default

Set a default preload mode for all links managed by an instance at construction time: 
const app = new Swappit('app', { preload: 'hover' });
Every link with data-swappit-handle="app" will now preload on hover unless overridden individually. Override the global default on any individual link using the data-preload attribute: 
<!-- Inherits global default (hover in this example) -->
<a href="./page.html" data-swappit-handle="app">Regular Page</a>

<!-- Override to instant for this specific link -->
<a href="./page.html" data-swappit-handle="app" data-preload="instant">Fast Page</a>

<!-- Disable preload for this link regardless of global default -->
<a href="./page.html" data-swappit-handle="app" data-preload="">No Preload</a>
The data-preload attribute on a link always takes precedence over the instance’s global preload option. Only the exact values "instant" and "hover" are recognized — any other value is treated as no preload.

​
Programmatic Preload with preloadContents()

Use preloadContents() to populate the cache ahead of time from JavaScript: 
await app.preloadContents([
  './header.html',
  './sidebar.html',
  './content.html'
]);

// All three URLs are now cached — update() will use cache by default
app.update('./content.html');
preloadContents() fetches all URLs in parallel using Promise.allSettled(), so a single failing URL does not block the others. It also deduplicates the URL list automatically using Set before fetching — passing the same URL twice is safe. After the batch completes, Swappit logs a summary (when log: true): 
Swappit [app]: Precarga completada: 3 exitosas, 0 fallidas

​
Cache Invalidation

By default, update() uses the cache if the URL has already been fetched. Pass false as the second argument to force a fresh download: 
app.update('./page.html');        // Uses cache if available
app.update('./page.html', false); // Forces a new network request
You can also control cache behavior per link with the data-use-cache attribute: 
<!-- Always force a fresh download when this link is clicked -->
<a href="./page.html" data-swappit-handle="app" data-use-cache="false">Always Fresh</a>

<!-- Explicit cache (same as default) -->
<a href="./page.html" data-swappit-handle="app" data-use-cache="true">Cached</a>
Use preload: 'instant' for the most critical navigation destinations (e.g., the main content area or a dashboard) so the first click feels instantaneous. Use preload: 'hover' for secondary pages — it provides a meaningful head start while the user moves their cursor, without wasting bandwidth on pages they never visit.

Build docs developers (and LLMs) love

Get started for freeTalk to us