# swup
> Versatile and extensible page transition library for server-rendered websites
Latest version **4.10.0** (published 2026-09-03) · MIT license · 0 weekly downloads
## Install
```sh
npm install swup
pnpm add swup
yarn add swup
bun add swup
```
## Health
**Score 75/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 4.10.0 |
| Published | 2026-09-03 |
| First published | 2017-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 688.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 5234 |
| Author | Georgy Marchuk |
| Maintainers | gmrchk, hirasso, daun |
| Keywords | css, page, transition, animation |
## Links
- npm: https://www.npmjs.com/package/swup
- Repository: https://github.com/swup/swup
- Homepage: https://swup.js.org
- Issues: https://github.com/swup/swup/issues
- npm.io page: https://npm.io/package/swup
## Dependencies (2)
- [delegate-it](https://npm.io/package/delegate-it.md) ^6.0.0
- [path-to-regexp](https://npm.io/package/path-to-regexp.md) ^6.2.1
## Alternatives
- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads
## Recent versions
- 4.10.0 (latest) — 2026-09-03
- 4.0.0-rc.31 (next) — 2023-07-25
- 4.9.2 — 2026-06-12
- 4.9.1 — 2026-06-10
- 4.9.0 — 2026-05-08
- 4.8.3 — 2026-02-24
- 4.8.2 — 2025-04-29
- 4.8.1 — 2024-09-28
- 4.8.0 — 2024-09-25
- 4.7.0 — 2024-07-18
- 4.6.1 — 2024-03-25
- 4.6.0 — 2024-02-09
- 4.5.2 — 2024-01-27
- 4.5.1 — 2024-01-08
- 4.5.0 — 2023-12-01
- … 135 more at https://npm.io/package/swup/versions
## README
**swup 4 is released 🎉 Check out the [release notes](https://swup.js.org/announcements/swup-4/) and [upgrade guide](https://swup.js.org/getting-started/upgrading/).**
[](https://www.npmjs.com/package/swup)
[](https://bundlejs.com/?q=swup&treeshake=%5B%7B+default+%7D%5D)
[](https://www.npmjs.com/package/swup)
[](https://github.com/swup/swup/actions/workflows/e2e-tests.yml)
[](https://github.com/swup/swup/blob/main/LICENSE)
# Swup
Versatile and extensible **page transition library** for server-rendered websites.
[Features](#features) •
[Demos](#demos) •
[Plugins](#plugins) •
[Themes](#themes) •
[Documentation](https://swup.js.org/getting-started) •
[Discussions](https://github.com/swup/swup/discussions)
## Overview
Swup adds **page transitions** to server-rendered websites. It manages the complete page load lifecycle
and smoothly animates between the current and next page. In addition, it offers many other
quality-of-life improvements like **caching**, **smart preloading**, native **browser history** and
enhanced **accessibility**.
Make your site feel like a snappy single-page app — without any of the complexity.
## Features
- ✏️ Works out of the box with [minimal markup](https://swup.js.org/getting-started/example/)
- ✨ Auto-detects [CSS transitions](https://swup.js.org/getting-started/how-it-works/) & animations for perfect timing
- 🔗 Updates URLs and preserves native [browser history](https://swup.js.org/options/#animatehistorybrowsing)
- 🏓 Manages the scroll position between pages and anchor links
- 🚀 Uses a [cache](https://swup.js.org/api/cache/) to speed up subsequent page loads
- 📡 Offers [hooks](https://swup.js.org/hooks/) to customize and extend the page load lifecycle
- 🔌 Has a powerful [plugin system](https://swup.js.org/plugins/) and many official and third-party plugins
- 🎨 Provides ready-to-go [themes](https://swup.js.org/themes/) to get started quickly
## Demos
Explore our [interactive demos](https://swup.js.org/getting-started/demos/) to see swup in action.
## Documentation
Visit our [official documentation](https://swup.js.org/getting-started) to learn more.
## Plugins
Swup is small by design. Extended features can be added via [plugins](https://swup.js.org/plugins/):
- Display a [progress bar](https://swup.js.org/plugins/progress-plugin/) while loading
- Enable [smooth scrolling](https://swup.js.org/plugins/scroll-plugin/) between visits
- Update [meta tags and stylesheets](https://swup.js.org/plugins/head-plugin/) after page loads
- Add support for [preloading pages](https://swup.js.org/plugins/preload-plugin/) in the background
- Improve [accessibility](https://swup.js.org/plugins/a11y-plugin/) for screen readers
- Perform your [animations in JS](https://swup.js.org/plugins/js-plugin/) instead of CSS transitions
- Animate [form submissions](https://swup.js.org/plugins/forms-plugin/)
- Get help in [debug mode](https://swup.js.org/plugins/debug-plugin/)
Check out the list of [official](https://swup.js.org/plugins/) and [third-party](https://swup.js.org/third-party-plugins/) plugins.
## Themes
Get started quickly with one of three official themes: [fade](https://swup.js.org/themes/fade-theme/),
[slide](https://swup.js.org/themes/slide-theme/), and [overlay](https://swup.js.org/themes/overlay-theme/).
## Examples
Take a look at the [interactive demos](https://swup.js.org/getting-started/demos/) and
[sites using swup](https://github.com/swup/swup/discussions/333) for more examples.
## Having trouble?
If you're having trouble implementing swup, check out the [Common Issues](https://swup.js.org/getting-started/common-issues/) section of the docs, look at [closed issues](https://github.com/swup/swup/issues?q=is%3Aissue+is%3Aclosed) or create a [new discussion](https://github.com/swup/swup/discussions/new).
## Want to Contribute?
[We're looking for maintainers!](https://github.com/swup/swup/discussions/424) 👀
Become a sponsor on [Open Collective](https://opencollective.com/swup) or support development through
[GitHub sponsors](https://github.com/sponsors/gmrchk).
This project is tested with BrowserStack.
---
_Source: https://npm.io/package/swup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._