Transform any website into a Single Page Application with seamless navigation, URL synchronization, and modern web app behavior.
SPA.js converts traditional multi-page websites into smooth, app-like experiences without requiring any backend changes or framework rewrites. Just include one script and your site instantly gains SPA superpowers.
Traditional websites suffer from:
- Page refreshes that break user flow
- Lost scroll position on navigation
- Slow loading between pages
- Jarring user experience compared to modern web apps
SPA.js creates a seamless single-page experience by:
- Eliminating page refreshes - Navigation happens instantly
- Maintaining browser history - Back/forward buttons work perfectly
- Synchronizing everything - URLs, titles, favicons stay in perfect sync
- Zero configuration - Works with any existing website
- Instant Navigation - No more page refreshes or loading states
- Perfect URL Sync - Browser address bar stays current with content
- Browser History - Back/forward buttons work as expected
- Title & Favicon Updates - Full metadata synchronization
- External Link Handling - Smart detection and proper redirects
- Zero Dependencies - Pure vanilla JavaScript
- Tiny Footprint - Only ~2KB minified
<scriptsrc="https://cdn.jsdelivr.net/gh/AetherCodez/SPA.js/spa.min.js"></script># Download to your project
curl -O https://raw.githubusercontent.com/AetherCodez/SPA.js/main/spa.min.jsAdd one line to any webpage (required on all pages):
<!DOCTYPE html><html><head><title>My Website</title></head><body><!-- Your existing content --><scriptsrc="spa.min.js"></script></body></html>That's it! Your website now behaves like a modern SPA.
SPA.js uses a clever iframe-based architecture:
- Auto-Detection - Detects if running in the main window or iframe context
- Seamless Wrapping - Creates a fullscreen iframe container for content
- Navigation Interception - Captures internal link clicks
- State Synchronization - Keeps the parent and iframe perfectly in sync
- History Management - Maintains the proper browser history stack
The result? Users experience seamless navigation while maintaining all the benefits of traditional web architecture.
- Blog platforms into app-like experiences
- Documentation sites with instant navigation
- E-commerce sites with smooth browsing
- Corporate websites with a modern feel
- Website preview systems
- Content management interfaces
- Educational platform integrations
- Dashboard embedded applications
- You want SPA benefits without a framework migration
- You need to modernize a legacy website quickly
- You're building tools that embed external content
- You want a seamless multi-page experience
- Chrome/Edge 60+
- Firefox 55+
- Safari 11+
Requires modern browsers with postMessage and the History API.
SPA.js uses iframe sandboxing with minimal required permissions:
allow-scripts- JavaScript executionallow-same-origin- Same-origin communicationallow-forms- Form submissionsallow-popups- Popup handling
External links are automatically detected and safely redirected.
Want to see how the magic works? Check out the non-minified version:
- spa.js - Full source code with comments
- spa.min.js - Production-ready minified version
The source code is clean, well-commented, and easy to follow if you want to understand the iframe-based SPA transformation technique.
git clone https://github.com/AetherCodez/SPA.js.git
cd SPA.js
# Source: spa.js (readable)# Production: spa.min.js (minified)- Fork the repository
- Create a feature branch (
git checkout -b feature/improvement) - Commit your changes (
git commit -m 'Add improvement') - Push your branch (
git push origin feature/improvement) - Open a Pull Request
MIT License - see LICENSE for details.
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Star this repo if it helped you!
Transform your website into a modern web app experience in seconds.