Alpine Turnout is a reactive "route-switch" for Alpine.js that makes SPA navigation feel creamy. Forget heavy config files; use the x-route directive to toggle UI states based on the URL. Highlights: ๐ฆ Persistent: Input fields remain. ๐ฆ Zero-Config: Automatically intercepts local links. ๐ฆ Smart Scope: URL params (like :id) are injected into your components. ๐ฆ Scroll Memory: Remembers your position for fluid back/forward navigation. Feel the flow: https://turnout-playground.netlify.app/
No reviews yetBe the first to leave a review for Alpine Turnout
Maker
๐
Hey Product Hunt! ๐
I'm the maker of Alpine Turnout.
I love building with Alpine.js because it keeps logic in the markup. However, routing in Alpine usually feels like a trade-off: you either stick to standard page reloads or adopt a heavy router that over-complicates your project.
I built Alpine Turnout to be a "Route Switch." It uses a declarative x-route directive to reactively toggle UI sections based on the URL.
The "State Persistence" Advantage
One of the biggest frustrations with traditional routers is that they often unmount components, causing you to lose user input. With Turnout, because we are switching visibility and state:
Input Persistence: Form fields, textareas, and checkboxes stay exactly as the user left them when switching between routes.
Zero-Config: It globally intercepts local linksโno need to manually handle click events on every anchor tag.
Scroll Restoration: It automatically caches and restores your scroll position for every path, making "back" and "forward" navigation seamless.
Parameter Injection: URL segments (like /post/:id) are injected directly into your Alpine scope automatically.
Check out the Live Playground to see the navigation and input persistence in action:
๐ https://turnout-playground.netli...
Iโm excited to hear your thoughts! Iโll be here all day to answer questions about the implementation or future roadmap.
Repo: https://github.com/rodezee/alpin...