Rod Vanderzee

Alpine Turnout - Zero-config route-switch for Alpine.js

byβ€’
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.netli...

Add a comment

Replies

Best
Rod Vanderzee
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...