DEV Community

Rod Vanderzee
Rod Vanderzee

Posted on

Stop Routing, Start Switching, Alpine Turnout 🍦

#showdev #javascript #webdev #frontend

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)

Turnout Playground

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

(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

Top comments (0)