Turbo Cheat Sheet
Print
Drive
Turbo.visit
Turbo.visit(location) Documentation
Turbo.visit(location, { action: action }) Documentation
actions"advance" (default) or "replace" Documentation
Turbo.clearCache
Remove all entriesTurbo.clearCache() Documentation
Turbo.setProgressBarDelay
Delay in millisecondsTurbo.setProgressBarDelay(500) Documentation
Turbo.session.drive
Turbo Drive offTurbo.session.drive = false Documentation
Turbo Drive opt-indata-turbo="true" Documentation
Eager-loaded frame
Load 'src'<turbo-frame id="messages" src="/messages"> … Documentation
Lazy-loaded frame
Wait frame visibleid="messages" src="/messages" loading="lazy" Documentation
Frame targeting
_top (whole page)id="messages" target="_top" Documentation
_self (overide "_top")data-turbo-frame="_self" Documentation
_top (overide default)data-turbo-frame="_top" Documentation
Named framedata-turbo-frame="navigation" Documentation
Replace historydata-turbo-action="replace" Documentation
Frames: Attributes, properties, and functions
HTML Attributes
srcAccepts URL or path value // Controls navigation
loading"eager" or "lazy" // Immediately or defer Documentation
busyBoolean // Request starts/ends Documentation
disabledBoolean // Prevents navigation Documentation
target"ID", "_top" etc. // Navigation to Documentation
autoscrollBoolean // scroll <turbo-frame> into view Documentation
data-autoscroll-block"end","start","center" or "nearest" Documentation
Properties
FrameElement.srcPathname or URL to be loaded Documentation
FrameElement.disabledPrevents navigation Documentation
FrameElement.loading"eager" or "lazy" Documentation
FrameElement.loadedPromise completed Documentation
FrameElement.completeElement finished navigation Documentation
FrameElement.autoscrollScroll element into view Documentation
FrameElement.isActiveBoolean: ready to interact Documentation
FrameElement.isPreviewBoolean: element is preview Documentation
Functions
FrameElement.reload()Reload frame element from "src" Documentation
Streams
The seven actions
append<turbo-steam action="append" target="id"> … Documentation
prepend<turbo-steam action="prepend" target="id"> … Documentation
replace<turbo-steam action="replace" target="id"> … Documentation
update<turbo-steam action="update" target="id"> … Documentation
remove<turbo-steam action="remove" target="id"> … Documentation
before<turbo-steam action="before" target="id"> … Documentation
after<turbo-steam action="after" target="id"> … Documentation
Targeting Multiple Elements
targets<turbo-steam targets=".elementsWithClass"> … Documentation
Processing Stream Elements
connectTurbo.session.connectStreamSource(source) Documentation
disconnectTurbo.session.disconnectStreamSource(source) Documentation
renderTurbo.renderStreamMessage(streamActionHTML) Documentation
Events
Navigation lifecycle
turbo:clickClick a Turbo-enabled link Documentation
turbo:before-visitBefore visiting a location Documentation
turbo:visitVisit starts Documentation
turbo:submit-startForm submission starts Documentation
…:before-fetch-requestBefore fetch request Documentation
turbo:submit-endForm submission completes Documentation
turbo:before-cacheCurrent page to cache Documentation
turbo:before-renderBefore rendering the page Documentation
…:before-stream-renderBefore Turbo Stream page update Documentation
turbo:renderAfter Turbo renders the page Documentation
turbo:loadAfter the initial page load Documentation
turbo:frame-renderTurbo frame element renders its view Documentation
turbo:frame-loadElement is navigated and finishes loading Documentation
Attributes and Meta Tags
Data Attributes
data-turbo="false"Disables Turbo Drive including descendants Documentation
…-turbo-track="reload"Full page reload when it changes Documentation
data-turbo-frameTurbo Frame to navigate Documentation
data-turbo-action"advance" (default) or "replace" Documentation
data-turbo-permanentPersists element between page loads Documentation
…-turbo-cache="false"Removes element before document is cached Documentation
…-turbo-eval="false"Prevents re-evaluate inline script elements Documentation
data-turbo-methodChanges request type from the default GET Documentation
data-turbo-confirmPresents a confirm dialog with given value Documentation
Automatically Added Attributes
disabledAdded when request is in progress Documentation
data-turbo-previewAdded when displaying a preview Documentation
aria-busyAdded when navigation is in progress Documentation
Meta Tags
turbo-cache-control<meta name="turbo-cache-control"
content="no-cache"> // Opt out of caching Documentation
content="no-cache"> // Opt out of caching Documentation
turbo-visit-control<meta name="turbo-visit-control"
content="reload"> // Full page reload Documentation
content="reload"> // Full page reload Documentation
turbo-root<meta name="turbo-root"
content="/app"> // Scope to location Documentation
content="/app"> // Scope to location Documentation