Taxi.js

Taxi is a 🤏 small and 🐊 snappy js library for adding slick PJAX navigation and beautiful transitions to your website.

It was designed as a drop-in replacement (with enhancements) for Highway.js, which is sadly no longer maintained.

Improvements over Highway:

  • URL-based routing
    Perfect for working with WebGL websites, you can now specify unique transitions for every possible navigation.
  • Page cache management
    Perfect for archives and search result pages, you can now preserve changes made to the DOM by user interaction.
  • Ability to preload URLs
    First-class support for adding pages to the cache ahead of schedule.
  • Blocks navigation during an active transition
    Stop users from performing state-breaking navigation by default.
  • Auto-run javascript on the new page
    If you are using a CMS or splitting your JS into page-specific modules, we have you covered.
  • Previous page's content is automatically removed (you can opt out of this if you like)
    Clean code, clean mind.
  • Click events on links can be intercepted via stopPropagation without hacks
    This finally works as you expect.

Differences to Highway

  • Different public API
    Check it out on the API & events reference.
  • Different data attributes
    data-taxi, data-taxi-view, and data-taxi-ignore are to be used instead of data-router-wrapper, data-router-view, and data-router-disabled respectively. See how to use for more.
  • attach and detach are no longer methods
    Link clicks are listened to via delegation so these are no longer needed.
  • redirect is now navigateTo
    It always felt weird as a method name, and now it doesn't.
  • Renderers now have an initialLoad method
    Nice and simple.
  • Old content is automatically removed during a transition
    You can opt of this behaviour if you like via the allowInterruption option.

Contributors

Made with ❤️ by Jake Whiteley, and feedback from the Okay Dev community.

What's next: