PHPackages                             jarir-ahmed/universal-spa - 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. [Framework](/categories/framework)
4. /
5. jarir-ahmed/universal-spa

ActiveLibrary[Framework](/categories/framework)

jarir-ahmed/universal-spa
=========================

A framework-agnostic Single Page Application (SPA) engine for PHP

v1.1.0(1mo ago)081MITPHPPHP >=7.4.0

Since Jun 6Pushed 1mo agoCompare

[ Source](https://github.com/jarir2020/universal-spa)[ Packagist](https://packagist.org/packages/jarir-ahmed/universal-spa)[ RSS](/packages/jarir-ahmed-universal-spa/feed)WikiDiscussions main Synced 3w ago

READMEChangelogDependencies (1)Versions (3)Used By (1)

Universal SPA Engine (jarir-ahmed/universal-spa)
================================================

[](#universal-spa-engine-jarir-ahmeduniversal-spa)

A lightning-fast, zero-reload Single Page Application (SPA) engine for **any** PHP Framework (Laravel, CodeIgniter, Symfony, Slim, or even raw PHP).

Two Modes
---------

[](#two-modes)

This package empowers you with two distinct approaches:

### 1. HTML Mode (Zero Backend Required)

[](#1-html-mode-zero-backend-required)

In this mode, the frontend JavaScript fetches the full HTML page, parses it in the browser using `DOMParser`, and swaps out the body. **Pros:** Requires ZERO PHP changes. Works with static sites or any backend.

### 2. JSON Mode (Bandwidth Optimized)

[](#2-json-mode-bandwidth-optimized)

In this mode, the PHP backend intercepts the response buffer, parses the HTML, and sends only the required parts (Title, Body, Styles, Scripts, Meta) as a tiny JSON object. **Pros:** Faster network transfer.

Installation
------------

[](#installation)

```
composer require jarir-ahmed/universal-spa
```

Setup (JSON Mode)
-----------------

[](#setup-json-mode)

1. Put this at the very top of your PHP application (e.g., `public/index.php` or as a middleware):

```
\JarirAhmed\UniversalSpa\SpaEngine::start();
```

2. Add `data-spa-content` to your main wrapper in your HTML layout:

```

```

3. Add the `data-spa` attribute to any links you want to feel instant:

```
About Us
```

4. Include the JS script and initialize it:

```

    new JarirSpa({
        mode: 'json' // or 'html'
    });

```

Configuration Options
---------------------

[](#configuration-options)

All options are passed to the `JarirSpa` constructor:

```

    new JarirSpa({
        mode: 'json',                    // 'json' or 'html' (default: 'html')
        contentSelector: '[data-spa-content]', // CSS selector for content container
        progressBar: true,                // Show loading progress bar (default: true)
        transition: true,                 // Enable fade transitions (default: true)
        transitionDuration: 200,          // Transition duration in ms (default: 200)
        progressBarColor: 'linear-gradient(90deg, #4f46e5, #06b6d4)' // Progress bar color
    });

```

Features
--------

[](#features)

- **Framework Agnostic** — Works with Laravel, Symfony, CodeIgniter, Slim, CakePHP, raw PHP
- **Two Modes** — HTML mode (zero backend changes) or JSON mode (bandwidth optimized)
- **Hover Prefetching** — Links are prefetched on hover for instant loads
- **Loading Progress Bar** — Slim animated bar at top during navigation (like YouTube/GitHub)
- **Smooth Page Transitions** — Configurable fade-out/fade-in animations
- **Inline Script Execution** — Scripts inside swapped content are properly re-executed
- **CSS Scoping** — Old page styles are removed and new ones injected on navigation
- **Meta Tag Updates** — Updates `` description and Open Graph tags on navigation
- **Browser History Support** — Back/forward buttons work via pushState/popstate
- **Active Navigation** — Auto-toggles `active` class on SPA links
- **Smart Link Filtering** — Only intercepts `data-spa` links; external links work normally
- **Graceful Fallback** — Falls back to full-page navigation on errors
- **Custom Events** — Dispatches `spa:navigated` event for extensibility
- **Lightweight** — ~10KB JS, ~3KB PHP. No external dependencies.

Layout vs Page Styles/Scripts
-----------------------------

[](#layout-vs-page-stylesscripts)

Mark your layout (persistent) styles and scripts so they're never removed on navigation:

```

    body { font-family: sans-serif; }
    nav { background: #333; }

    .hero { background: blue; }

    new JarirSpa({ mode: 'json' });

```

Events
------

[](#events)

Listen for navigation events:

```
document.addEventListener('spa:navigated', (e) => {
    console.log('Navigated to:', e.detail.url);
    console.log('Page title:', e.detail.title);
    // Re-init your widgets, analytics, etc.
});
```

License
-------

[](#license)

MIT

###  Health Score

37

—

LowBetter than 81% of packages

Maintenance92

Actively maintained with recent releases

Popularity7

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity35

Early-stage or recently created project

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 ~9 days

Total

2

Last Release

39d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/20700f34ff813055154e843bbdbe04d33320c1e6a81bbb3301cad67cb8350fd3?d=identicon)[jarircse16](/maintainers/jarircse16)

---

Tags

htmlnavigationpjaxSPA

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/jarir-ahmed-universal-spa/health.svg)

```
[![Health](https://phpackages.com/badges/jarir-ahmed-universal-spa/health.svg)](https://phpackages.com/packages/jarir-ahmed-universal-spa)
```

###  Alternatives

[htmlmin/htmlmin

HTMLMin Is A Simple HTML Minifier For Laravel 5

1.0k2.0M9](/packages/htmlmin-htmlmin)[cretueusebiu/laravel-nuxt

A Laravel-Nuxt starter project template.

1.1k6.3k](/packages/cretueusebiu-laravel-nuxt)[yiisoft/html

Handy library to generate HTML

58611.3k61](/packages/yiisoft-html)[dmstr/yii2-pages-module

Application sitemap and navigation manager module for Yii 2.0 Framework

3180.0k2](/packages/dmstr-yii2-pages-module)[runn/html

Runn Me! HTML Library

102.0k](/packages/runn-html)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)