PHPackages symfony/ux-swup - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. symfony/ux-swup ActiveSymfony-bundle[Utility & Helpers](/categories/utility) symfony/ux-swup =============== Swup integration for Symfony v2.34.0(1mo ago)33147.8k↑15.6%21MITTypeScriptPHP >=8.1 Since Dec 3Pushed 1mo ago6 watchersCompare [ Source](https://github.com/symfony/ux-swup)[ Packagist](https://packagist.org/packages/symfony/ux-swup)[ Docs](https://symfony.com)[ Fund](https://symfony.com/sponsor)[ GitHub Sponsors](https://github.com/fabpot)[ RSS](/packages/symfony-ux-swup/feed)WikiDiscussions 2.x Synced 1mo ago READMEChangelog (2)DependenciesVersions (59)Used By (1) Symfony UX Swup =============== [](#symfony-ux-swup) Warning **Deprecated**: This package has been **deprecated** in 2.x and will be removed in the next major version. To keep the same functionality in your Symfony application, follow these migration steps: 1. Install the `swup` library and its plugins: ``` # If using Symfony AssetMapper: php bin/console importmap:require swup @swup/fade-theme @swup/slide-theme @swup/forms-plugin @swup/debug-plugin # If using NPM (e.g.: with Webpack Encore): npm install swup @swup/fade-theme @swup/slide-theme @swup/forms-plugin @swup/debug-plugin ``` 2. Add the following code to your app: `assets/controllers/swup_controller.js```` import { Controller } from '@hotwired/stimulus'; import Swup from 'swup'; import SwupFadeTheme from '@swup/fade-theme'; import SwupSlideTheme from '@swup/slide-theme'; import SwupFormsPlugin from '@swup/forms-plugin'; import SwupDebugPlugin from '@swup/debug-plugin'; export default class extends Controller { static values = { containers: Array, mainElement: String, animateHistoryBrowsing: Boolean, animationSelector: String, cache: Boolean, linkSelector: String, theme: String, debug: Boolean, }; connect() { const dataContainers = this.containersValue; const mainElement = this.mainElementValue || dataContainers[0] || '#swup'; const allElements = [mainElement].concat(dataContainers); const containersList = allElements.filter((item, index) => { return allElements.indexOf(item) === index; }); const options = { containers: containersList, plugins: [ 'slide' === this.themeValue ? new SwupSlideTheme({ mainElement: mainElement }) : new SwupFadeTheme({ mainElement: mainElement }), new SwupFormsPlugin(), ], }; if (this.hasMainElementValue) { options.mainElement = this.mainElementValue; } if (this.hasAnimateHistoryBrowsingValue) { options.animateHistoryBrowsing = this.animateHistoryBrowsingValue; } if (this.hasAnimationSelectorValue) { options.animationSelector = this.animationSelectorValue; } if (this.hasCacheValue) { options.cache = this.cacheValue; } if (this.hasLinkSelectorValue) { options.linkSelector = this.linkSelectorValue; } if (this.debugValue) { options.plugins.push(new SwupDebugPlugin()); } this.dispatchEvent('pre-connect', { options }); const swup = new Swup(options); this.dispatchEvent('connect', { swup, options }); } dispatchEvent(name, payload) { this.dispatch(name, { detail: payload, prefix: 'swup' }); } } ``` 3. Replace the `symfony--ux-swup` occurrences in your templates with `swup`, for example: ``` - + ``` 4. Remove `symfony/ux-swup` from your dependencies: ``` composer remove symfony/ux-swup ``` You're done! --- Symfony UX Swup is a Symfony bundle integrating [Swup](https://swup.js.org/) in Symfony applications. It is part of [the Symfony UX initiative](https://ux.symfony.com/). Swup is a complete and easy to use page transition library for Web applications. It creates a Single Page Application feel to Web applications without having to change anything on the server and without bringing the complexity of a React/Vue/Angular application. **This repository is a READ-ONLY sub-tree split**. See to create issues or submit pull requests. Sponsor ------- [](#sponsor) The Symfony UX packages are [backed](https://symfony.com/backers) by [Mercure.rocks](https://mercure.rocks). Create real-time experiences in minutes! Mercure.rocks provides a realtime API service that is tightly integrated with Symfony: create UIs that update in live with UX Turbo, send notifications with the Notifier component, expose async APIs with API Platform and create low level stuffs with the Mercure component. We maintain and scale the complex infrastructure for you! Help Symfony by [sponsoring](https://symfony.com/sponsor) its development! Resources --------- [](#resources) - [Documentation](https://symfony.com/bundles/ux-swup/current/index.html) - [Report issues](https://github.com/symfony/ux/issues) and [send Pull Requests](https://github.com/symfony/ux/pulls)in the [main Symfony UX repository](https://github.com/symfony/ux) ### Health Score 61 — FairBetter than 99% of packages Maintenance88 Actively maintained with recent releases Popularity42 Moderate usage in the ecosystem Community26 Small or concentrated contributor base Maturity76 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~33 days Recently: every ~27 days Total 59 Last Release 57d ago Major Versions 1.x-dev → v2.0.12021-12-09 v2.31.0 → 3.x-dev2025-12-02 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/47313?v=4)[Fabien Potencier](/maintainers/fabpot)[@fabpot](https://github.com/fabpot) --- Top Contributors [![Kocal](https://avatars.githubusercontent.com/u/2103975?v=4)](https://github.com/Kocal "Kocal (52 commits)")[![weaverryan](https://avatars.githubusercontent.com/u/121003?v=4)](https://github.com/weaverryan "weaverryan (42 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (9 commits)")[![tgalopin](https://avatars.githubusercontent.com/u/1651494?v=4)](https://github.com/tgalopin "tgalopin (8 commits)")[![nicolas-grekas](https://avatars.githubusercontent.com/u/243674?v=4)](https://github.com/nicolas-grekas "nicolas-grekas (6 commits)")[![smnandre](https://avatars.githubusercontent.com/u/1359581?v=4)](https://github.com/smnandre "smnandre (5 commits)")[![bocharsky-bw](https://avatars.githubusercontent.com/u/3317635?v=4)](https://github.com/bocharsky-bw "bocharsky-bw (2 commits)")[![dunglas](https://avatars.githubusercontent.com/u/57224?v=4)](https://github.com/dunglas "dunglas (2 commits)")[![fabpot](https://avatars.githubusercontent.com/u/47313?v=4)](https://github.com/fabpot "fabpot (1 commits)")[![iamvar](https://avatars.githubusercontent.com/u/7314366?v=4)](https://github.com/iamvar "iamvar (1 commits)")[![javiereguiluz](https://avatars.githubusercontent.com/u/73419?v=4)](https://github.com/javiereguiluz "javiereguiluz (1 commits)")[![jmsche](https://avatars.githubusercontent.com/u/3929498?v=4)](https://github.com/jmsche "jmsche (1 commits)")[![kbond](https://avatars.githubusercontent.com/u/127811?v=4)](https://github.com/kbond "kbond (1 commits)")[![ker0x](https://avatars.githubusercontent.com/u/5331654?v=4)](https://github.com/ker0x "ker0x (1 commits)")[![MrAnyx](https://avatars.githubusercontent.com/u/44176707?v=4)](https://github.com/MrAnyx "MrAnyx (1 commits)")[![noniagriconomie](https://avatars.githubusercontent.com/u/13205768?v=4)](https://github.com/noniagriconomie "noniagriconomie (1 commits)")[![samnela](https://avatars.githubusercontent.com/u/1852108?v=4)](https://github.com/samnela "samnela (1 commits)")[![94noni](https://avatars.githubusercontent.com/u/1358361?v=4)](https://github.com/94noni "94noni (1 commits)")[![yassinefikri](https://avatars.githubusercontent.com/u/49125227?v=4)](https://github.com/yassinefikri "yassinefikri (1 commits)")[![cedriclombardot](https://avatars.githubusercontent.com/u/651484?v=4)](https://github.com/cedriclombardot "cedriclombardot (1 commits)") --- Tags javascriptsymfonysymfony-uxuxsymfony-ux ### Embed Badge ![Health badge](/badges/symfony-ux-swup/health.svg) ``` [![Health](https://phpackages.com/badges/symfony-ux-swup/health.svg)](https://phpackages.com/packages/symfony-ux-swup) ``` ### Alternatives [symfony/ux-turbo Hotwire Turbo integration for Symfony 3906.8M47](/packages/symfony-ux-turbo)[symfony/ux-chartjs Chart.js integration for Symfony 1003.2M18](/packages/symfony-ux-chartjs)[symfony/ux-react Integration of React in Symfony 371.4M3](/packages/symfony-ux-react)[kreyu/data-table-bundle Streamlines creation process of the data tables 11299.6k](/packages/kreyu-data-table-bundle)[symfony/ux-vue Integration of Vue.js in Symfony 35834.3k4](/packages/symfony-ux-vue)[symfony/ux-lazy-image Lazy image loader and utilities for Symfony 36335.2k](/packages/symfony-ux-lazy-image) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)