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
Decision gist · record as of 2026-06-14
Turbo provides SPA-like navigation and page updates using server-rendered HTML with no JavaScript to write. 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.
Use it when
- Turbo Frames scope DOM updates to a single named region—ideal for lazy loading, pagination.
- Yes.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
smnandre/symfony-ux-skills/turbo
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 4 files
skills/turbo/SKILL.md
skills/turbo/references/api.md
skills/turbo/references/gotchas.md
skills/turbo/references/patterns.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build SPA-like navigation and page updates with server-rendered HTML”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Symfony UX is a decision guide for selecting the right tool from Symfony's reactive frontend stack. It helps you navigate between Stimulus for DOM behavior, Turbo for page updates, TwigComponent for static UI, LiveComponent for server-driven interactivity, UX Icons for SVG rendering, and UX Map for interactive maps. Use it when you're unsure which package solves your problem or want to combine multiple tools.
TwigComponent enables you to compose reusable UI building blocks by pairing PHP classes with Twig templates, rendered server-side with zero JavaScript overhead. Define props, blocks, and computed properties to create everything from simple buttons to complex layout sections. Use class components for logic-heavy elements or anonymous Twig-only components for presentational markup.
UX Map brings interactive mapping to Symfony applications using either Leaflet or Google Maps as your renderer. Define maps in PHP, render them in Twig, and layer on Stimulus controllers for event handling. Supports markers, polygons, polylines, circles, and popup info windows.
LiveComponent lets you create interactive UI components in PHP and Twig that automatically re-render when users interact with them, all without writing JavaScript. Each user action triggers a server round-trip that updates the component and morphs the DOM, making it ideal for live search, real-time validation, dynamic filtering, and dependent form fields. Use it when your component's output depends on user input and requires server-side logic.
Stimulus is a lightweight JavaScript framework that wires controllers to HTML via data attributes, letting you handle clicks, inputs, and DOM changes without rendering markup. Attach behavior to server-rendered elements using `data-controller`, `data-action`, and `data-target` attributes, then compose controllers for toggles, modals, dropdowns, and more. Clean up in `disconnect()` when Turbo navigates between pages.
turborepo is a high-performance build system designed for monorepos that streamlines task orchestration across multiple packages. Configure task dependencies, output handling, and intelligent caching directly in turbo.json to accelerate your build pipeline and reduce redundant work.