# turbolinks/turbolinks

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/turbolinks-turbolinks).**

12,591 stars · 609 forks · TypeScript · MIT · archived

## Links

- GitHub: https://github.com/turbolinks/turbolinks
- awesome-repositories: https://awesome-repositories.com/repository/turbolinks-turbolinks.md

## Description

Turbolinks is a JavaScript library that accelerates HTML page transitions by replacing the page body via network requests instead of performing full browser refreshes. It functions as a client-side navigation manager that intercepts link clicks and controls the page visit lifecycle to simulate a single-page application experience.

The library synchronizes the browser URL and history stack with partial page updates and utilizes a caching mechanism to store visited page states. This allow for instant previews and restoration of state when navigating backward or forward. It also includes a tool for transferring specific UI elements across transitions by matching identifiers to maintain element persistence.

The project covers navigation lifecycle management, including the ability to intercept visits and configure custom headers. It provides a customizable progress bar for asynchronous loads and monitors asset versioning to trigger full page reloads when scripts or styles are updated. Navigation scope can be configured to restrict partial updates to specific root paths or origins.

## Tags

### User Interface & Experience

- [Partial Page Refreshers](https://awesome-repositories.com/f/user-interface-experience/partial-page-refreshers.md) — Replaces the page body via XHR network requests instead of performing full browser refreshes.
- [Persistent UI Components](https://awesome-repositories.com/f/user-interface-experience/persistent-ui-components.md) — Keeps specific UI elements active across navigation by matching identifiers and transferring them to the subsequent page. ([source](https://cdn.jsdelivr.net/gh/turbolinks/turbolinks@master/README.md))
- [Cross-Page Element Persistence](https://awesome-repositories.com/f/user-interface-experience/component-lifecycle-hooks/dom-persistence/cross-page-element-persistence.md) — Keeps specific UI elements active across page transitions by matching identifiers and transferring them to new views.
- [UI State Persistence](https://awesome-repositories.com/f/user-interface-experience/ui-state-persistence.md) — Keeps specific UI elements active and consistent across different pages to prevent flickering or loss of user state.

### Software Engineering & Architecture

- [Navigation Acceleration](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/page-navigation-prefetching/navigation-acceleration.md) — Accelerates page navigation by replacing the page body using network requests and browser history. ([source](https://cdn.jsdelivr.net/gh/turbolinks/turbolinks@master/README.md))
- [Single Page Applications](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/application-architecture-patterns/single-page-applications.md) — Simulates the speed of a single page app by replacing the page body instead of performing full browser refreshes.

### Web Development

- [Browser History Management](https://awesome-repositories.com/f/web-development/browser-history-management.md) — Synchronizes the browser URL and history stack with partial page updates to maintain standard navigation behavior.
- [Navigation Hooks](https://awesome-repositories.com/f/web-development/browser-navigation-utilities/navigation-hooks.md) — Provides a sequence of lifecycle hooks from visit to render, allowing developers to intercept or modify navigation.
- [Client-Side Page Caching](https://awesome-repositories.com/f/web-development/client-side-page-caching.md) — Stores copies of visited pages to provide instant previews during navigation and restore state when moving backward or forward. ([source](https://cdn.jsdelivr.net/gh/turbolinks/turbolinks@master/README.md))
- [Navigable Lifecycles](https://awesome-repositories.com/f/web-development/document-navigation/navigable-lifecycles.md) — Triggers sequential events from click to render, allowing the interception of visits and post-load script execution. ([source](https://cdn.jsdelivr.net/gh/turbolinks/turbolinks@master/README.md))
- [Navigation Preview Caching](https://awesome-repositories.com/f/web-development/navigation-preview-caching.md) — Stores visited page states to provide instant previews when users navigate backward or forward.
- [Page State Snapshots](https://awesome-repositories.com/f/web-development/page-state-snapshots.md) — Stores a copy of the previous page state to allow instant backward navigation without new network requests.
- [Page Transition Controls](https://awesome-repositories.com/f/web-development/page-transition-controls.md) — Accelerates navigation by replacing page bodies via network requests instead of full browser refreshes.
- [Client-Side Navigation Management](https://awesome-repositories.com/f/web-development/routing-systems/routing/frontend-navigation-systems/client-side-navigation-management.md) — Intercepts browser clicks to manage custom headers and execute specific scripts during the page loading lifecycle.
- [Version-Triggered Reloads](https://awesome-repositories.com/f/web-development/asset-versioning/version-triggered-reloads.md) — Triggers full page reloads when asset version mismatches are detected to ensure the latest scripts and styles are loaded.
- [Navigation Scope Controls](https://awesome-repositories.com/f/web-development/navigation-scope-controls.md) — Provides configuration to restrict partial page updates to specific root paths or origins. ([source](https://cdn.jsdelivr.net/gh/turbolinks/turbolinks@master/README.md))
- [Page Speed Optimizations](https://awesome-repositories.com/f/web-development/page-speed-optimizations.md) — Speeds up the transition between pages by caching visited content and managing network requests for body updates.

### Testing & Quality Assurance

- [UI Element Persistence](https://awesome-repositories.com/f/testing-quality-assurance/ui-element-interactions/dom-element-id-mapping/ui-element-persistence.md) — Matches elements by their ID across page loads to keep specific UI components active and consistent during transitions.
