# pjax-router

> Pjax Router for static websites.

Latest version **2.2.1** (published 2026-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install pjax-router
pnpm add pjax-router
yarn add pjax-router
bun add pjax-router
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.2.1 |
| Published | 2026-02-07 |
| First published | 2017-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.0.0 |
| Dependencies | 0 |
| Unpacked size | 104.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Yomotsu |
| Maintainers | yomotsu |

## Links

- npm: https://www.npmjs.com/package/pjax-router
- Repository: https://github.com/yomotsu/PjaxRouter
- Homepage: https://github.com/yomotsu/PjaxRouter#readme
- Issues: https://github.com/yomotsu/PjaxRouter/issues
- npm.io page: https://npm.io/package/pjax-router

## Recent versions

- 2.2.1 (latest) — 2026-02-07
- 2.2.0 — 2026-02-07
- 2.1.1 — 2026-02-06
- 2.1.0 — 2026-02-06
- 2.0.0 — 2026-02-05
- 1.0.1 — 2018-10-18
- 1.0.0 — 2018-10-18
- 0.3.2 — 2017-11-26
- 0.3.1 — 2017-11-25
- 0.3.0 — 2017-11-13
- 0.2.0 — 2017-11-12
- 0.1.2 — 2017-11-05
- 0.1.1 — 2017-03-27
- 0.1.0 — 2017-03-26
- 0.0.1 — 2017-03-20
- … 1 more at https://npm.io/package/pjax-router/versions

## README

# PjaxRouter

Pjax Router for static websites.

[![Latest NPM release](https://img.shields.io/npm/v/pjax-router.svg)](https://www.npmjs.com/package/pjax-router)
![MIT License](https://img.shields.io/npm/l/pjax-router.svg)

## demos

- [basic](https://yomotsu.github.io/PjaxRouter/examples/index.html)

## Usage

Both standalone lib and NPM package are available.

### Standalone

```html
<script src="./js/PjaxRouter.js"></script>
```

### NPM

```
$ npm install --save pjax-router
```
then
```javascript
import PjaxRouter from 'pjax-router';
```

---

```javascript
var router = new PjaxRouter( {
	// trigger for Pjax link
	triggers: [ 'a' ],
	// trigger for Pjax form (supports both GET and POST)
	formTriggers: [ 'form[data-pjax]' ],
	// ignore selectors for Pjax link
	ignores: [ 'a.ignore' ],
	// replace target areas
	selectors: [ 'title', '.sandbox1', '.sandbox2' ],
	// callback for page transition. called when ajax has done
	switches: {
		'title': function ( newEl, oldEl ) {

			document.title = newEl.innerHTML;

		},
		'.sandbox1': function ( newEl, oldEl ) {

			document.querySelector('.sandbox1').innerHTML = newEl.innerHTML;

		},
		'.sandbox2': function ( newEl, oldEl ) {

			document.querySelector('.sandbox2').innerHTML = newEl.innerHTML;

		}
	}
} );

// events
router.on( 'beforeload',   function () { console.log( 'beforeload' );   } );
router.on( 'load',         function () { console.log( 'load' );         } );
router.on( 'beforeswitch', function () { console.log( 'beforeswitch' ); } );
router.on( 'afterswitch',  function () { console.log( 'afterswitch' );  } );
router.on( 'error',        function () { console.log( 'error' );        } );
```
## Form Support

PjaxRouter supports form submissions with various HTTP methods (GET, POST, PUT, PATCH, DELETE, etc.) via PJAX. Forms matching the `formTriggers` selector will be intercepted and submitted without a full page reload.

- **GET/HEAD**: Parameters are added to the URL query string
- **POST/PUT/PATCH/DELETE**: Data is sent as FormData in the request body

### Example

```html
<!-- GET form: parameters will be added to URL -->
<form action="/search" method="GET" data-pjax>
	<input type="text" name="q" placeholder="Search...">
	<button type="submit">Search</button>
</form>

<!-- POST form: data will be submitted as FormData -->
<form action="/submit" method="POST" data-pjax>
	<input type="text" name="name" required>
	<input type="email" name="email" required>
	<button type="submit">Submit</button>
</form>

<!-- Other methods (PUT, PATCH, DELETE) are also supported -->
<!-- Note: HTML forms natively only support GET and POST, -->
<!-- but you can override with JavaScript if needed -->
```

```javascript
var router = new PjaxRouter({
	triggers: ['a[data-pjax]'],
	formTriggers: ['form[data-pjax]'],  // Enable form PJAX
	selectors: ['#content'],
	switches: {
		'#content': function(newEl, oldEl) {
			oldEl.innerHTML = newEl.innerHTML;
		}
	}
});
```

---
_Source: https://npm.io/package/pjax-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._