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.

All options are passed in an object as the second argument to new Swappit(handle, options). Every option defaults to a falsy value — Swappit is zero-config by default and works without any options at all. 
const app = new Swappit('my-app'); // Fully valid — all defaults apply

​
Options Reference

OptionTypeDefaultDescription
logbooleanfalseEnables colorized console logging at 4 severity levels
updateUrlbooleanfalseUpdates the browser address bar URL on each update() call
enableHistorybooleanfalseEnables back/forward browser navigation. Requires updateUrl: true
preloadstring|falsefalseDefault preload mode for links: false, "hover", or "instant"

​
Full Configuration Example

const app = new Swappit('my-app', {
  log: true,
  updateUrl: true,
  enableHistory: true,
  preload: 'hover'
});

​
Option Interactions

enableHistory: true has no effect without updateUrl: true — the popstate listener is only registered when both options are active.
  • updateUrl: true + enableHistory: false — The URL in the address bar is updated on each navigation using history.replaceState(). The history stack is not extended; the back button returns to the page that existed before Swappit started.
  • updateUrl: true + enableHistory: true — Each navigation adds a new entry to the browser history stack via history.pushState(), enabling back and forward buttons.
  • Only one instance can have both updateUrl and enableHistory active at the same time. Creating a second instance with both options enabled will throw an error.

​
Updating Options at Runtime

Use reinit() to change options after the instance is created. Options are merged — only the keys you provide are overwritten; all other options keep their current values. 
app.reinit({
  log: true,
  preload: 'hover'
});
This is particularly useful when the <swappit-instance> custom element is used — it calls reinit() automatically if an instance with the same handle already exists.

​
Logging Levels

When log: true is set, Swappit writes colorized messages to the browser console. Messages are prefixed with Swappit [handle]: and colored by severity:
LevelColorWhen it appears
infoBlue (#3498db)General lifecycle events (instance created, etc.)
successGreen (#2ecc71)Successful fetches, DOM updates, and preloads
warningYellow (#f39c12)Non-fatal issues such as duplicate update regions
errorRed (#e74c3c)Failed fetches and invalid URL errors
Enable logging when debugging unexpected behavior — the output shows exactly what Swappit is doing at each step of the update cycle. 
const app = new Swappit('my-app', { log: true });
// Console: %cSwappit [my-app]: Nueva instancia creada  (blue)

Build docs developers (and LLMs) love

Get started for freeTalk to us