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 lets you replace targeted sections of your HTML page by fetching new content from a URL and swapping only the elements that match — no full-page reload, no SPA complexity. Add a single <script> tag, annotate your elements with data- attributes, and you’re done.

Installation

Add Swappit via npm, CDN, or direct download in under a minute.

Quickstart

Build your first partial page update with a working example.

API Reference

Explore the full constructor, instance methods, static methods, and events.

Guides

Deep-dives into configuration, preloading, history navigation, and more.

​
Why Swappit?

Modern web experiences often need only a sliver of a page to change — a content area, a sidebar, a product listing. Full page reloads feel slow; a full SPA feels like overkill. Swappit sits in the middle: fetch a URL, find elements that share the same handle-based data- attributes, and swap them in place.

Zero Dependencies

Pure vanilla JavaScript. No frameworks, no build step required.

Three Usage Patterns

JavaScript API, declarative links with data-swappit-handle, or the <swappit-instance> custom element.

Smart Preloading

Prefetch on hover or instantly — globally or per link — for instant-feel navigation.

History Support

Full browser back/forward button support via the History API.

Event System

Rich lifecycle events: update:before, update:after, update:error, historyUpdate, reinit, and destroy.

DOM Observer

Automatically detects and configures new links added to the DOM dynamically.

​
Get Started in 3 Steps

1

Install Swappit

Include the script from npm or CDN:
<script src="https://cdn.jsdelivr.net/npm/@soyleninjs/swappit/swappit.min.js"></script>
2

Mark your update regions

Add data-[handle]-update attributes to the elements you want to swap:
<div data-app-update="content">Original content</div>
3

Create an instance and update

Instantiate Swappit and call update() with a URL:
const app = new Swappit('app');
app.update('./new-content.html');
The target URL must return an HTML page that contains elements with the same data-[handle]-update attribute names. Only matching regions are swapped — everything else is ignored.

Build docs developers (and LLMs) love

Get started for freeTalk to us