Stop Routing, Start Switching, Alpine Turnout 🍦

Rod Vanderzee — Wed, 15 Apr 2026 17:15:04 +0000

Stop Routing, Start Switching

Most SPA routers are heavy, complex, and require you to define your entire site structure in a separate JavaScript file. Alpine Turnout takes a different approach.

It treats your routes like a Switch.

By using the x-route directive, you tell Alpine exactly which elements should be active based on the current path. No config files, no heavy boilerplate—just reactive markup.

What makes it "Creamy"?

The goal of Turnout was to make the transition between "Multi-Page" and "Single-Page" feel seamless.

The Global Interceptor: You don't need to change your <a> tags. Turnout listens for clicks globally and handles the navigation state automatically.
Automatic Scope Injection: If your route is /user/:id, the :id is automatically available inside your Alpine component scope. No extra fetching or parsing required.
Persistent: Going to your other routes leaves input fields not empty handed but they remain just the way you left them.
Smart Scroll Memory: When you "turn back," the plugin remembers exactly where you were scrolling. It’s fluid and organic.
Built-in 404s: It even handles the "End of the line" for you if a user wanders off-track.

I believe a demo is worth a thousand lines of code. I built a dedicated playground to showcase exactly how these transitions feel:

👉 Turnout Playground (Live Demo)

Quick Start

Getting started is simple, just add this in the head of your HTML:

<script src="//unpkg.com/alpine-turnout" defer></script>
<script src="//unpkg.com/alpinejs" defer></script>

Then, in your markup, do this:

<main>
  <div x-route="/" x-title="Home">
    <h1>Welcome to the Station</h1>
  </div>

  <div x-route="/profile/:name" x-title="User Profile">
    <h1>Profile of <span x-text="name"></span></h1>
  </div>
</main>

(If you do not have x-data declared yet, put it in body tag)

Launch your site with npx vite or try this code in the playground

Why I built this

I wanted the benefits of an SPA without losing the "HTML-first" soul of Alpine.js. Turnout is tiny, fast, and stays out of your way until you need to switch views.

I’d love for you to try it out, star the repo, or give me some feedback on the "switch" logic!

Test the Playground: Does it feel as smooth as intended?
Break the code: Try it in your edge cases.
Contribute: Check out the GitHub Repo.

#alpinejs #javascript #webdev #frontend

DEV Community: Rod Vanderzee

Stop Routing, Start Switching, Alpine Turnout 🍦