developing-with-turbo-drive
Installation
SKILL.md
Turbo Drive
Turbo Drive accelerates navigation by intercepting link clicks and form submissions, making them as fetch requests. It replaces the <body> and merges the <head> without tearing down the JavaScript environment, giving SPA-like speed with server-rendered HTML.
How It Works
- Link clicks: Turbo intercepts clicks on
<a href>links to the same domain, updates the URL via the History API, fetches the new page, and renders the HTML response. - Form submissions: Form submissions become
fetchrequests. Turbo follows the redirect and renders the response. - Rendering: Replaces
<body>, merges<head>. Thewindow,document, and<html>element persist across navigations.
Navigation Types
- Application Visits (advance/replace): Initiated by clicking a link or calling
Turbo.visit(). Issues a fetch, renders HTML. Advance pushes to history; replace modifies the current entry. - Restoration Visits: Triggered by the browser Back/Forward buttons. Turbo restores from cache if available, otherwise fetches fresh content.
Page Refreshes with Morphing
Instead of replacing the entire <body>, Turbo can morph the existing page to preserve DOM state (form inputs, scroll positions, focus):