What is PicoSPA?
PicoSPA is a progressive enhancement toolkit, made of a few small functionalities to make a site more interactive and modern without the need to use a full SPA framework. It is not a framework, it is a set of tools to enhance your MPA.
PicoSPA in a nutshell
<script src="https://cdn.jsdelivr.net/npm/@pic0/spa@2026.1.12/_dist/picospa.min.js"></script>
Inside a <script> block or *.js file you can use it like this.
// Upgrade the `<details>` element
picospa.details.reopen(); // restore open/close state across page (re-)loads
picospa.details.autoOpen(); // open <details> elements linking to current page
picospa.details.scrollOnOpen(); // scroll into view when opened
// Color theme
picospa.colorScheme.restoreLast(); // restore last used color scheme from session storage
picospa.colorScheme.toggle(); // toggles the color scheme between light and dark
// Scroll position
picospa.scroll.restore(); // restore scroll position of the page
// Section tools
picospa.section.addAnchors(); // adds anchors to all `<h1>`, `<h2>`, etc. elements
Why does PicoSPA exist?
SPAs grow for the sake of SPA frameworks it seems. React.js was created to solve a facebook problem, how many of us have this scale of problems?
PicoSPA is a reset. Write a fast rendering MPA website and enhance
the places that benefit from it with PicoSPA functionality, instead of
using an SPA for everything.
This allows:
- you to focus on a speedy backend, you fully control it (not the client it runs on)
- optimize queries, loading times and page size (on the backend)
- take advantage of the amazing speed a browser rendering engines offer (streaming rendering, etc.)
- sprinkle interactivity and UI niceties into the page where useful/fun/needed
- ship less JS over the wire
- be SEO inclusive, accessible and fast from the start
- be flexible to use SPA frameworks for pages or parts of a page where they are right
- score high in Lighthouse by doing nothing (more)
In the end PicoSPA just encourages MPAs and tries to provide the glitter of SPAs without the heavy load and the steep learning curve by leveraging the amazingly fast browser engines of today's world. If that is not enough, MPAs are way more accessible and scale to many more devices due to the lower memory and bandwidth footprint.
Read the various posts by Alex Russell, a person who shaped the web and the browser substantially, his posts underline the above stated.
In short, nobody should start a new project in the 2020s based on React. Full stop.