SPAish

SPAish - progressive enhancer for your MPA, make it feel SPAish.

SPAish makes Multi-Page Applications (MPAs) feel a bit more like Single-Page Applications (SPAs) — without changing your architecture.

It's a small, framework-agnostic JavaScript library that allows you to:

• Restore scroll positions across navigations
• Reopen <details> elements after reload
• Toggle and restore color schemes
• Add anchors to headings
• Store all state in sessionStorage
• It adds no dependencies, weighs ~2KB minified

Use it with a <script> tag and enhance your site with just a few lines.

💡 Why?

MPAs often lose state (scroll, UI toggles, etc.) between page loads. SPAs often come with huge frameworks and complexity, size and speed overhead without much gain.
SPAish helps you preserve these micro-interactions without rewriting your site. See how kokoanalytics uses exactly this same approach.

🚀 Getting Started

Include via a script tag at the end of your page, or at least after the DOM nodes referred to have been rendered.

<script src="https://cdn.jsdelivr.net/npm/@pic0/[email protected]/_dist/spaish.min.js"></script>
<script>
  // Restore scroll position of the page, useful e.g. when filtering/sorting data, big forms, comments, threads, ...
  spaish.scroll.restore();
  
  // Reopen the <details> on page changes or when coming back to the page.
  spaish.details.reopen();
  
  // Restore the color scheme, e.g. light or dark mode.
  spaish.colorScheme.restoreLast();
  
  // Add anchors to headings, so you can link to them.
  spaish.section.addAnchors();
</script>

<p>Toggle the color scheme.</p>
<button onclick="spaish.colorScheme.toggle();">Toggle Color Scheme</button>