**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/).**
[![npm version](https://img.shields.io/npm/v/swup.svg)](https://www.npmjs.com/package/swup)
[![Bundle size](https://img.shields.io/bundlejs/size/swup?exports=default%20as%20Swup&label=size)](https://bundlejs.com/?q=swup&treeshake=%5B%7B+default+%7D%5D)
[![npm downloads](https://img.shields.io/npm/dt/swup.svg)](https://www.npmjs.com/package/swup)
[![Test status](https://img.shields.io/github/actions/workflow/status/swup/swup/e2e-tests.yml?branch=master&label=tests)](https://github.com/swup/swup/actions/workflows/e2e-tests.yml)
[![License](https://img.shields.io/github/license/swup/swup.svg)](https://github.com/swup/swup/blob/master/LICENSE)
Swup
Versatile and extensible page transition library for server-rendered websites.
Features •
Demos •
Plugins •
Themes •
Documentation •
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
- ✨ Auto-detects CSS transitions & animations for perfect timing
- 🔗 Updates URLs and preserves native browser history
- 🏓 Manages the scroll position between pages and anchor links
- 🚀 Uses a cache to speed up subsequent page loads
- 📡 Offers hooks to customize and extend the page load lifecycle
- 🔌 Has a powerful plugin system and many official and third-party plugins
- 🎨 Provides ready-to-go themes to get started quickly
Demos
Explore our interactive demos to see swup in action.
Documentation
Visit our official documentation to learn more.
Plugins
Swup is small by design. Extended features can be added via plugins:
Check out the list of official plugins and third-party integrations.
Themes
Get started quickly with one of three official themes: fade,
slide, and overlay.
Examples
Take a look at the interactive demos and
sites using swup for more examples.
Having trouble?
If you're having trouble implementing swup, check out the Common Issues section of the docs, look at closed issues or create a new discussion.
Want to Contribute?
We're looking for maintainers! 👀
Become a sponsor on Open Collective or support development through
GitHub sponsors.
This project is tested with BrowserStack.