turbo
Turbo delivers responsive, single-page application feel using only server-side HTML rendering. Drive handles automatic AJAX navigation across all links and forms, Frames scope updates to individual page sections, and Streams push multi-target DOM changes from the server—enabling lazy loading, inline editing, pagination, and real-time updates without client-side logic.
Turbo provides SPA-like navigation and page updates using server-rendered HTML with no JavaScript to write.
AI-generated summary based on this skill's SKILL.md
Install
smnandre/symfony-ux-skills/turbo
git clone https://github.com/smnandre/symfony-ux-skills
cp -r symfony-ux-skills/skills/turbo ~/.claude/skills/turboFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does Turbo make navigation feel like a single page app?
Turbo Drive intercepts all link and form submissions, replacing only the page body via AJAX instead of full browser reloads. This preserves scroll position, maintains history, and delivers SPA-like speed while keeping your HTML server-rendered. Combined with Turbo Frames for scoped updates and Streams for multi-target mutations, Turbo creates responsive navigation without writing client-side JavaScript.
What's the difference between Turbo Frames and Turbo Streams?
Turbo Frames scope DOM updates to a single named region—ideal for lazy loading, pagination, and inline editing where you replace content within a frame boundary. Turbo Streams enable multi-target updates in a single request using append, prepend, replace, remove, and update actions, perfect for flash messages, real-time notifications, and complex server-pushed changes across multiple page sections.
Can you update part of a page without a full reload using Turbo?
Yes. Turbo Frames let you target specific sections by wrapping them in `<turbo-frame>` tags; form submissions within a frame update only that frame. Turbo Streams go further, allowing a single server response to update multiple unrelated elements via named actions. Both approaches avoid full-page reloads and eliminate the need for custom JavaScript.
How do Turbo Frames enable lazy loading and pagination?
Turbo Frames accept a `src` attribute that loads content asynchronously when the frame enters the viewport or is clicked. Pagination links within a frame stay scoped to that frame, replacing its content without reloading the page. This pattern works seamlessly with server-side rendering, letting you defer expensive queries until needed.
Can Turbo push real-time updates to clients via Mercure or SSE?
Turbo Streams integrate with server-push protocols like Mercure and Server-Sent Events (SSE). Your server broadcasts Turbo Stream HTML fragments to subscribed clients, which automatically apply append, replace, remove, or update actions to the DOM. This enables real-time notifications, collaborative editing, and live data without polling or WebSocket boilerplate.
What license does Turbo use?
Turbo is released under the MIT license, making it free to use, modify, and distribute in both open-source and commercial projects with minimal restrictions.
SKILL.md
rendered from the published skill — quoted content, verbatim
Turbo
Hotwire Turbo provides
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
skills/turbo/SKILL.md
skills/turbo/references/api.md
skills/turbo/references/gotchas.md
skills/turbo/references/patterns.md