Swup is an open-source TypeScript page transition library for developers who want animated, single-page-app-style navigation on server-rendered websites without adopting a client-side framework.

What it is

Swup is a small, MIT-licensed JavaScript library that takes over the complete page load lifecycle of a traditional, server-rendered site. When a visitor follows a link, Swup fetches the next page, swaps in the new content, and animates the change between the current and next page, while updating the URL and preserving native browser history. It lives in the front-end JavaScript ecosystem of server-rendered sites — the plain HTML-and-templates world rather than the React or Vue world — and it installs alongside existing markup with minimal changes, auto-detecting CSS transitions and animations so timing falls into place without extra wiring.

The concrete problem it solves is that server-rendered websites reload the entire document on every navigation, which produces a jarring full-page flash and loses the smooth, app-like continuity visitors expect from modern sites. Swup replaces that full document reload with animated content swapping, and layers on quality-of-life behaviour: a cache to speed up subsequent page loads, smart preloading, scroll position management between pages and anchor links, and enhanced accessibility for screen readers. The result is a site that feels snappy like a single-page app without taking on the build complexity of one.

Key capabilities

• Works out of the box with minimal markup and auto-detects CSS transitions and animations for correct timing.
• Updates URLs and preserves native browser history, with the animateHistoryBrowsing option controlling history-driven animation.
• Manages scroll position between pages and anchor links so navigation lands where the visitor expects.
• Uses a built-in cache to speed up subsequent page loads, alongside smart preloading of pages in the background.
• Exposes hooks to customise and extend the page load lifecycle at any point.
• Provides a plugin system with official plugins including ProgressPlugin, ScrollPlugin, HeadPlugin, PreloadPlugin, A11yPlugin, JsPlugin, FormsPlugin, and DebugPlugin.
• Ships three ready-to-go official themes — fade, slide, and overlay — for quick starting points.

Who uses it and how

• Teams maintaining server-rendered sites who want animated navigation without migrating to a client-side framework.
• Developers extending behaviour incrementally through plugins, for example adding a progress bar, smooth scrolling, meta tag and stylesheet updates after page load, or JavaScript-based animations instead of CSS transitions.
• Site owners handling form submissions and anchor navigation, using the forms plugin to animate submissions and letting Swup manage scroll position between pages.
• Designers prototyping transitions quickly with one of the three official themes, then reviewing interactive demos and the community's sites-using-Swup discussion for reference implementations.
• Users debugging integration problems through the debug plugin, the Common Issues documentation section, closed issues, and GitHub discussions.

Getting started

Swup is published to npm as swup and is installed from there, with the getting-started guide, example markup, demos, and upgrade guide for Swup 4 hosted at https://swup.js.org/getting-started.

How it compares

This registry provides no list of paid products that Swup replaces, and the supplied facts name no comparable libraries, so Swup stands alone on this page. Its own positioning is that it delivers single-page-app-like transitions for server-rendered sites without the complexity of adopting a framework.

When to use it — and when not to

Swup is a front-end library rather than a hosted service, so there is no database, storage, or SMTP to operate, but you are responsible for wiring it into your templates, managing plugins and themes, and diagnosing integration problems yourself when issues arise. It is not the right choice for a project that has already committed to a client-side framework's router, or for a site where plain full-page navigation is acceptable and animation adds no value. The core README is deliberately terse — most detail lives on the external documentation site — so evaluation requires following links out to swup.js.org rather than reading everything in the repository.