# hotwired/turbo **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/hotwired-turbo).** 7,343 stars · 479 forks · JavaScript · MIT ## Links - GitHub: https://github.com/hotwired/turbo - Homepage: https://turbo.hotwired.dev - awesome-repositories: https://awesome-repositories.com/repository/hotwired-turbo.md ## Description Hotwire Turbo is a server-driven navigation and HTML streaming framework that intercepts link clicks and form submissions to fetch pages in the background and replace content without full browser reloads. It provides a Turbo Frame component that scopes page regions into independent contexts, enabling partial page updates where only a specific area of the page navigates or loads content. The framework includes a page cache and morph system that stores recently visited pages for instant restoration and applies minimal DOM changes on refresh, preserving scroll position and element state. The framework distinguishes itself through real-time HTML streaming capabilities that deliver live page updates over WebSocket or Server-Sent Events using CRUD-like actions, without requiring custom JavaScript. It offers a hybrid native app bridge that wraps server-rendered HTML in native iOS or Android shells, managing a single WebView across multiple screens for seamless transitions between web and native sections. Turbo also provides a view transition animator that activates animated page transitions using the browser's View Transition API with configurable direction. The framework supports lazy-loading frame content that defers fetching until a frame scrolls into the viewport, link prefetching on hover to reduce perceived navigation latency, and a CSS-based progress bar for visual feedback during navigation. It includes event-driven lifecycle hooks that fire granular events during navigation, rendering, and streaming for custom JavaScript interception, along with observability hooks that expose fetch request and response details. Turbo can be installed via CDN script tag, npm package, or Rails gem, and offers configuration options for disabling Turbo on specific elements, scoping navigation to a path, and extending stream actions with custom behavior. ## Tags ### DevOps & Infrastructure - [Intercepted Navigation Avoiders](https://awesome-repositories.com/f/devops-infrastructure/asset-caching-strategies/cache-busting/version-triggered-full-reloads/intercepted-navigation-avoiders.md) — Intercepts link clicks and form submissions to fetch pages in the background, avoiding full browser reloads. ([source](https://turbo.hotwired.dev/)) - [Broadcast Streams](https://awesome-repositories.com/f/devops-infrastructure/feature-flags/real-time-updates/broadcast-streams.md) — Broadcasts live updates to all connected clients via WebSocket or SSE streams. ([source](https://turbo.hotwired.dev/handbook/streams)) - [Version-Triggered Full Reloads](https://awesome-repositories.com/f/devops-infrastructure/asset-caching-strategies/cache-busting/version-triggered-full-reloads.md) — Provides a mechanism to force a full browser reload when a specific page must bypass Turbo Drive navigation. ([source](https://turbo.hotwired.dev/handbook/drive)) ### Software Engineering & Architecture - [Server-Driven Navigation](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-architectures/server-driven-navigation.md) — Intercepts link clicks and form submissions to fetch pages via fetch and replace the body without full page reloads. - [Lifecycle Event Hooks](https://awesome-repositories.com/f/software-engineering-architecture/lifecycle-event-hooks.md) — Fires granular events during navigation, rendering, and streaming for custom JavaScript interception. - [Navigation Acceleration](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/page-navigation-prefetching/navigation-acceleration.md) — Replaces full page reloads with faster, partial updates when following links and submitting forms. ([source](https://cdn.jsdelivr.net/gh/hotwired/turbo@main/README.md)) - [Custom Action Handlers](https://awesome-repositories.com/f/software-engineering-architecture/custom-action-handlers.md) — Overrides default stream action handlers to add new actions or modify how existing actions render. ([source](https://turbo.hotwired.dev/handbook/streams)) ### Part of an Awesome List - [Persistent Process Navigations](https://awesome-repositories.com/f/awesome-lists/devtools/animation-and-transitions/navigation-transitions/persistent-process-navigations.md) — Keeps the browser process alive across navigations by intercepting links and forms to fetch and replace page content. ([source](https://turbo.hotwired.dev/handbook/introduction)) - [HTML Stream Patchers](https://awesome-repositories.com/f/awesome-lists/devtools/websockets-and-real-time/html-stream-patchers.md) — Delivers HTML updates to the page in real time via WebSocket or SSE using CRUD-like actions. ([source](https://turbo.hotwired.dev/)) - [HTML Streams via WebSocket or SSE](https://awesome-repositories.com/f/awesome-lists/devtools/websockets-and-real-time/location-websocket-streams/html-streams-via-websocket-or-sse.md) — Ships a real-time HTML streaming engine that updates the DOM via WebSocket or SSE without custom JavaScript. - [Frame Escape Navigations](https://awesome-repositories.com/f/awesome-lists/more/a-frame-a-web-framework-for-building-vr-experiences/frame-escape-navigations.md) — Forces full-page navigation when a frame response lacks a matching frame element. ([source](https://turbo.hotwired.dev/handbook/frames)) ### Data & Databases - [Morphing Page Caches](https://awesome-repositories.com/f/data-databases/performance-caching-systems/page-caching-controls/morphing-page-caches.md) — Implements a page cache with morphing diff engine that preserves scroll position and element state on restoration. - [Stream Action DOM Patchers](https://awesome-repositories.com/f/data-databases/record-updating/live-update-subscriptions/stream-action-dom-patchers.md) — Applies CRUD-like DOM actions (append, prepend, replace, etc.) from stream messages over WebSocket or SSE. ([source](https://turbo.hotwired.dev/handbook/introduction)) - [Backend Stream Integrators](https://awesome-repositories.com/f/data-databases/data-source-connectivity-tools/dynamic-data-source-connectors/websocket-sources/backend-stream-integrators.md) — Connects to backend stream sources via WebSocket or EventSource to receive live HTML updates. ([source](https://turbo.hotwired.dev/handbook/streams)) - [Page Caching Controls](https://awesome-repositories.com/f/data-databases/performance-caching-systems/page-caching-controls.md) — Allows opting out of page caching or forcing a full reload via meta tags in the document head. ([source](https://turbo.hotwired.dev/reference/attributes)) ### Graphics & Multimedia - [Automatic Frame Population](https://awesome-repositories.com/f/graphics-multimedia/video-frame-loading/automatic-frame-population.md) — Fetches frame content from a src URL automatically when the frame element appears. ([source](https://turbo.hotwired.dev/handbook/frames)) ### Networking & Communication - [Frame-Scoped Page Regions](https://awesome-repositories.com/f/networking-communication/data-framing/pipeline-framing/frame-scoped-page-regions.md) — Ships a Turbo Frame component that scopes page regions into independent navigation contexts for partial updates. ([source](https://turbo.hotwired.dev/handbook/introduction)) ### User Interface & Experience - [Automatic Behavior Attachments](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-configurations/dom-element-association/automatic-behavior-attachments.md) — Automatically connects JavaScript controllers and actions to DOM elements as they appear from navigation or streams. ([source](https://turbo.hotwired.dev/handbook/building)) - [Server-Side Template Rendering](https://awesome-repositories.com/f/user-interface-experience/dynamic-html-generators/server-side-template-rendering.md) — Uses the same server-rendered templates for both initial load and partial updates. ([source](https://turbo.hotwired.dev/handbook/streams)) - [Fetch-Based Page Replacements](https://awesome-repositories.com/f/user-interface-experience/links/categorization/navigation-hierarchies/breadcrumb-navigations/in-page-navigation-tools/fetch-based-page-replacements.md) — Intercepts same-origin link clicks and form submissions to fetch pages via fetch() and replace content without full reloads. ([source](https://turbo.hotwired.dev/handbook/introduction)) - [Native Webview Embedders](https://awesome-repositories.com/f/user-interface-experience/native-webview-embedders.md) — Wraps server-rendered HTML in a native iOS or Android shell for hybrid app navigation. - [Frame-Scoped Navigations](https://awesome-repositories.com/f/user-interface-experience/ui-component-prototypes/screen-to-screen-navigation-links/frame-to-screen-mapping/frame-scoped-navigations.md) — Scopes navigation to specific frame regions, updating only that area without affecting the rest of the page. - [CSS Selector Target Actions](https://awesome-repositories.com/f/user-interface-experience/action-trigger-components/explicit-action-target-binding/css-selector-target-actions.md) — Applies the same stream action to all elements matching a CSS selector for bulk updates. ([source](https://turbo.hotwired.dev/handbook/streams)) - [Cross-Page Element Persistence](https://awesome-repositories.com/f/user-interface-experience/component-lifecycle-hooks/dom-persistence/cross-page-element-persistence.md) — Marks elements with a data attribute to preserve their state and event listeners when navigating between pages. ([source](https://turbo.hotwired.dev/handbook/building)) - [Loading Progress Bars](https://awesome-repositories.com/f/user-interface-experience/loading-progress-bars.md) — Displays a CSS-based progress bar during navigation to provide visual feedback while a page loads. - [Destructive Action Confirmation Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/alert-dialogs/destructive-action-confirmation-dialogs.md) — Shows a confirmation dialog before submitting forms or following links that perform non-GET requests. ([source](https://turbo.hotwired.dev/reference/attributes)) - [Programmatic Page Visits](https://awesome-repositories.com/f/user-interface-experience/page-headers/page-action-integrations/programmatic-page-visits.md) — Offers a programmatic API to initiate application visits to URLs with advance or replace history actions. ([source](https://turbo.hotwired.dev/reference/drive)) - [Broadcast-Triggered Refreshes](https://awesome-repositories.com/f/user-interface-experience/partial-page-refreshers/broadcast-triggered-refreshes.md) — Triggers a page refresh from the server via a Turbo Stream action, with optional morph or replace behavior. ([source](https://turbo.hotwired.dev/handbook/page_refreshes)) - [Predictive Link Prefetching](https://awesome-repositories.com/f/user-interface-experience/predictive-link-prefetching.md) — Loads a linked page into the cache when the user hovers over it to reduce perceived navigation latency. ([source](https://turbo.hotwired.dev/handbook/drive)) - [Scroll Restoration](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-restoration.md) — Restores saved scroll position when loading pages from cache or network during back/forward navigation. ([source](https://turbo.hotwired.dev/handbook/drive)) - [Refresh Scroll Preservers](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-restoration/scroll-position-maintenance/url-update-scroll-preservers/refresh-scroll-preservers.md) — Preserves scroll position when a page refresh occurs, preventing the page from jumping to the top. ([source](https://turbo.hotwired.dev/handbook/page_refreshes)) - [Frame-to-History Promotion](https://awesome-repositories.com/f/user-interface-experience/ui-component-prototypes/screen-to-screen-navigation-links/frame-to-screen-mapping/frame-to-history-promotion.md) — Updates browser URL and history when frame content changes via a data attribute. ([source](https://turbo.hotwired.dev/handbook/frames)) - [Targeted Frame Navigation](https://awesome-repositories.com/f/user-interface-experience/ui-component-prototypes/screen-to-screen-navigation-links/frame-to-screen-mapping/targeted-frame-navigation.md) — Redirects navigation to a specific frame or full page via target attributes on links or forms. ([source](https://turbo.hotwired.dev/handbook/frames)) - [View Transition Animations](https://awesome-repositories.com/f/user-interface-experience/view-transition-animations.md) — Activates animated page transitions using the browser's View Transition API with configurable direction. ### Web Development - [Cache-First Restoration Visits](https://awesome-repositories.com/f/web-development/cache-restoration-analysis/cache-first-restoration-visits.md) — Provides instant page restoration from an in-memory cache during back/forward navigation. - [Client-Side Page Caching](https://awesome-repositories.com/f/web-development/client-side-page-caching.md) — Stores visited page content in memory to provide instant previews and state restoration. ([source](https://turbo.hotwired.dev/handbook/building)) - [Editable Page Regions](https://awesome-repositories.com/f/web-development/custom-page-frameworks/page-content-injections/editable-page-regions.md) — Splits pages into scoped regions that navigate and load content independently. ([source](https://cdn.jsdelivr.net/gh/hotwired/turbo@main/README.md)) - [Independent Frame Regions](https://awesome-repositories.com/f/web-development/custom-page-frameworks/page-content-injections/editable-page-regions/independent-frame-regions.md) — Splits pages into independent contexts that scope navigation and can be lazily loaded. ([source](https://cdn.jsdelivr.net/gh/hotwired/turbo@main/README.md)) - [Scoped Frame Regions](https://awesome-repositories.com/f/web-development/custom-page-frameworks/page-content-injections/editable-page-regions/scoped-frame-regions.md) — Provides a Turbo Frame component that scopes page regions into independent navigation and content loading contexts. - [Dynamic Fragment Updates](https://awesome-repositories.com/f/web-development/differential-page-update-generation/dynamic-fragment-updates.md) — Replaces only the frame's content with the matching fragment from the server response. ([source](https://turbo.hotwired.dev/handbook/frames)) - [DOM Morphing](https://awesome-repositories.com/f/web-development/dom-morphing.md) — Ships a DOM morphing engine that applies minimal changes to preserve element state and event listeners. - [Dynamic Content Loading](https://awesome-repositories.com/f/web-development/dynamic-content-loading.md) — Loads page content inside dedicated frame elements so navigation affects only that region. ([source](https://turbo.hotwired.dev/reference/frames)) - [Lifecycle-Driven Form Submissions](https://awesome-repositories.com/f/web-development/form-data-serializers/ajax-form-submissions/lifecycle-driven-form-submissions.md) — Handles form submissions via AJAX with lifecycle events and submitter disabling during the request. ([source](https://turbo.hotwired.dev/handbook/drive)) - [Stream-Response Form Submissions](https://awesome-repositories.com/f/web-development/form-processing/asynchronous-form-submissions/stream-response-form-submissions.md) — Responds to form submissions with Turbo Streams messages to update multiple page parts without navigation. ([source](https://turbo.hotwired.dev/handbook/drive)) - [Real-Time HTML Streams](https://awesome-repositories.com/f/web-development/html-streaming/real-time-html-streams.md) — Provides a framework for streaming HTML updates in real time over WebSocket or SSE with CRUD actions. - [Background Page Fetches](https://awesome-repositories.com/f/web-development/in-page-full-page-translators/background-page-fetches.md) — Intercepts link clicks and form submissions to fetch pages in the background and replace content without full browser reloads. ([source](https://turbo.hotwired.dev/handbook/introduction)) - [Navigation Preview Caching](https://awesome-repositories.com/f/web-development/navigation-preview-caching.md) — Caches page states to enable instant visual previews when navigating the browser history. ([source](https://turbo.hotwired.dev/handbook/drive)) - [Frame Lazy Loadings](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations/deferred-loading/media-lazy-loading/frame-lazy-loadings.md) — Loads frame content on demand by fetching a URL and swapping in the matching frame from the response. ([source](https://turbo.hotwired.dev/handbook/introduction)) - [Real-Time DOM Updates](https://awesome-repositories.com/f/web-development/server-side-rendering/real-time-dom-updates.md) — Delivers HTML fragments from server responses to surgically update the DOM without full page reloads. ([source](https://turbo.hotwired.dev/handbook/streams)) - [SSE-Driven DOM Patching](https://awesome-repositories.com/f/web-development/sse-driven-dom-patching.md) — Delivers HTML fragments over WebSocket or SSE to surgically update the DOM without full page reloads. - [Web-Native Integration Bridges](https://awesome-repositories.com/f/web-development/web-native-integration-bridges.md) — Connects server-rendered HTML with native iOS and Android views for seamless transitions between web and native sections. - [HTML Streamers Over WebSocket](https://awesome-repositories.com/f/web-development/websockets/rpc-over-websocket/html-streamers-over-websocket.md) — Streams HTML updates to the page in real time via WebSocket using CRUD-like actions without custom JavaScript. ([source](https://cdn.jsdelivr.net/gh/hotwired/turbo@main/README.md)) - [Proactive Cache Preloaders](https://awesome-repositories.com/f/web-development/cache-restoration-analysis/cache-first-restoration-visits/proactive-cache-preloaders.md) — Preloads linked pages into the cache on hover so the first visit feels instant. ([source](https://turbo.hotwired.dev/handbook/drive)) - [Idempotent Transformations](https://awesome-repositories.com/f/web-development/client-side-page-caching/idempotent-transformations.md) — Ensures HTML transformations are idempotent, preventing duplication when applied after cache restores. ([source](https://turbo.hotwired.dev/handbook/building)) - [Frame Morphing](https://awesome-repositories.com/f/web-development/dom-morphing/frame-morphing.md) — Reloads Turbo Frames using morphing for smooth updates of dynamic content like pagination. ([source](https://turbo.hotwired.dev/handbook/page_refreshes)) - [Asynchronous Form Submissions](https://awesome-repositories.com/f/web-development/form-processing/asynchronous-form-submissions.md) — Follows HTTP 303 redirects from form submissions to update the page without a full reload. ([source](https://turbo.hotwired.dev/handbook/drive)) - [Navigation Scope Controls](https://awesome-repositories.com/f/web-development/navigation-scope-controls.md) — Restricts Turbo Drive navigation to URLs within a specified path, falling back to full page loads for others. ([source](https://turbo.hotwired.dev/handbook/drive)) - [Native Shell Embeddings](https://awesome-repositories.com/f/web-development/progressive-web-apps/native-shell-embeddings.md) — Wraps server-rendered HTML in a native iOS or Android shell, reserving high-fidelity native controls for screens that need them. ([source](https://turbo.hotwired.dev/handbook/introduction)) - [Path-Scoped Navigation](https://awesome-repositories.com/f/web-development/turbo-rails-integration/path-scoped-navigation.md) — Limits Turbo Drive to operate only within a specific URL root for controlled navigation. ([source](https://turbo.hotwired.dev/reference/attributes)) ### Development Tools & Productivity - [Cross-Frame Navigation Routing](https://awesome-repositories.com/f/development-tools-productivity/frame-by-frame-debuggers/cross-frame-navigation-routing.md) — Routes link clicks or form submissions to navigate a different named frame or the full window. ([source](https://turbo.hotwired.dev/reference/frames)) - [Script Loading on Navigations](https://awesome-repositories.com/f/development-tools-productivity/package-managers/dependency/optional-dependency-managers/on-demand-library-loading/script-loading-on-navigations.md) — Loads additional JavaScript files by appending script elements from the page head during navigation. ([source](https://turbo.hotwired.dev/handbook/building)) ### System Administration & Monitoring - [Navigation Event Tracking](https://awesome-repositories.com/f/system-administration-monitoring/navigation-event-tracking.md) — Fires a series of events during navigation to set up JavaScript behavior after every page change. ([source](https://turbo.hotwired.dev/handbook/building)) - [Morph vs Replace Behaviors](https://awesome-repositories.com/f/system-administration-monitoring/status-pages/page-refresh-configurations/morph-vs-replace-behaviors.md) — Provides meta-tag configuration to choose between morphing and scroll-preserving page refreshes. ([source](https://turbo.hotwired.dev/reference/attributes))