swup / cli

Create swup plugins and themes in seconds, or validate your website 🚤

swup 4 is released  🎉  Check out the release notes and upgrade guide.

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:

• Display a progress bar while loading
• Enable smooth scrolling between visits
• Update meta tags and stylesheets after page loads
• Add support for preloading pages in the background
• Improve accessibility for screen readers
• Perform your animations in JS instead of CSS transitions
• Animate form submissions
• Get help in debug mode

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.

cli's Issues

Create bundle command

• Create a bundle command
• Bundle JS/TS with microbundle

Update CLI framework

• Update oclif to support ESM & TypeScript
• Preparation for adding new bundle command

npm install @swup/cli fails at node-gyp rebuild

Describe your issue:
Hi there! Just wanted to take the CLI for a spin, but I can't install it. When I run npm install @swup/cli, either globally or locally, I always get this error:

npm ERR! code 1
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
[...more verbose stuff...]

My node version is v14.18.1 and the current package.json of node-gyp looks like it should be compatible. Maybe there is an outdated package in the swup cli dependencies that causes the issue? There are quite a few deprecated warnings before the error occurs:

npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This module has moved and is now available at @hapi/hoek. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
npm WARN deprecated [email protected]: This module has moved and is now available at @hapi/topo. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: Version no longer supported. Upgrade to @latest

Before creating this issue, did you think of...:

• Have you checked closed issues for similar/related problems.
• Have you provided all helpful information available?

I saw that there are quite a few version bump pull requests waiting to be merged, maybe this already would solve this issue?

GitHub action `version-update.yml` is failing

Description of the issue

I can't seem to run the Update package version action, even though it's identical to the equivalent in e.g. fragment plugin where it worked yesterday. Any ideas @daun?

How to reproduce the issue

Run the action manually > it fails