turbo

Name: turbo
Author: smnandre

163stars12forks

How to install turbo?

smnandre/symfony-ux-skills/turbo

$npx -y skills add smnandre/symfony-ux-skills --skill turbo

Installs into the current project.

Summary

Hotwire Turbo for Symfony UX -- SPA-like speed with zero JavaScript. Covers Drive (navigation), Frames (partial page sections), and Streams (multi-target updates). Use when building ajax navigation, lazy-loaded sections, inline editing, pagination without reload, modals from the

Files · 1

View on GitHub

SKILL.md

1	# Turbo
2
3	Hotwire Turbo provides SPA-like speed with server-rendered HTML. No JavaScript to write. Three components work together:
4
5	- Drive -- Automatic AJAX navigation for all links and forms (zero config)
6	- Frames -- Scoped navigation that updates only one section of the page
7	- Streams -- Server-pushed DOM mutations (append, replace, remove, etc.)
8
9	## Decision Tree
10
11	```
12	Need to update the page?
13	+-- Full page navigation -> Turbo Drive (automatic, already active)
14	+-- Single section from user click -> Turbo Frame
15	+-- Multiple sections from action -> Turbo Stream (HTTP response)
16	+-- Real-time from server/others -> Turbo Stream (Mercure / SSE)
17	```
18
19	## Installation
20
21	```bash
22	composer require symfony/ux-turbo
23	```
24
25	That's it. Turbo Drive is active immediately -- all links and forms become AJAX.
26
27	## Turbo Drive
28
29	Automatic SPA-like navigation. Every `<a>` click and `<form>` submit is intercepted, fetched via AJAX, and the `<body>` is swapped. The browser URL and history update normally.
30
31	### Disabling for Specific Elements
32
33	```html
34	<!-- Disable on link/form -->
35	<a href="/external" data-turbo="false">External Link</a>
36
37	<!-- Disable for entire section -->
38	<div data-turbo="false">
39	<a href="/normal">Normal link (no Turbo)</a>
40	</div>
41	```
42
43	### History and Caching
44
45	```html
46	<!-- Replace history instead of push -->
47	<a href="/page" data-turbo-action="replace">Replace History</a>
48
49	<!-- Force full reload when asset changes -->
50	<link rel="stylesheet" href="/app.css" data-turbo-track="reload">
51	<script src="/app.js" data-turbo-track="reload"></script>
52	```
53
54	## Turbo Frames
55
56	Scope navigation to a section of the page. Links and forms inside a frame update only that frame's content. The rest of the page stays untouched.
57
58	### Basic Frame
59
60	```html
61	<!-- Page with frame -->
62	<turbo-frame id="messages">
63	<h2>Messages</h2>
64	<a href="/messages/1">View Message 1</a> <!-- Updates only this frame -->
65	</turbo-frame>
66
67	<!-- /messages/1 response must contain a matching frame ID -->
68	<turbo-frame id="messages">
69	<h2>Message 1</h2>
70	<p>Content here...</p>
71	<a href="/messages">Back to list</a>
72	</turbo-frame>
73	```
74
75	The server response is a full HTML page, but Turbo extracts only the matching `<turbo-frame>` and swaps it in.
76
77	### Lazy Loading
78
79	Load frame content asynchronously after the page renders:
80
81	```html
82	<turbo-frame id="notifications" src="/notifications" loading="lazy">
83	<p>Loading...</p>
84	</turbo-frame>
85	```
86
87	### Target Another Frame
88
89	A link inside one frame can update a different frame:
90
91	```html
92	<turbo-frame id="sidebar">
93	<a href="/item/1" data-turbo-frame="main-content">View Item</a>
94	</turbo-frame>
95
96	<turbo-frame id="main-content">
97	<!-- Content replaced here -->
98	</turbo-frame>
99	```
100
101	### Break Out of Frame
102
103	Navigate the entire page from within a frame:
104
105	```html
106	<turbo-frame id="modal">
107	<a href="/dashboard" data-turbo-frame="_top">Go to Dashboard</a>
108	</turbo-frame>
109	```
110
111	### Frame with Form
112
113	Forms inside frames submit and update within that frame:
114
115	```html
116	<turbo-frame id="search-results">
117	<form action="/search" method="get">
118	<input type="search" name="q">
119	<button>Search</button>
120	</form>
121	<ul>
122	{% for item in results %}
123	<li>{{ item.name }}</li>
124	{% endfor %}
125	</ul>
126	</turbo-frame>
127	```
128
129	### URL Sync
130
131	Update the browser URL when a frame navigates (useful for bookmarkable state):
132
133	```html
134	<turbo-frame id="products" data-turbo-action="advance">
135	<!-- Browser URL updates when this frame navigates -->
136	</turbo-frame>
137	```
138
139	## Turbo Streams
140
141	Update multiple DOM elements from a single server response. Eight actions available (`append`, `prepend`, `replace`, `update`, `remove`, `before`, `after`, `refresh`), each targeting elements by ID or CSS selector.
142
143	### Stream Actions
144
145	```html
146	<turbo-stream action="a

People who liked this also viewed

6 picks

Type

turbo

163stars12forks

View on GitHub

How to install turbo?

smnandre/symfony-ux-skills/turbo

$npx -y skills add smnandre/symfony-ux-skills --skill turbo

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Turbo
2
3	Hotwire Turbo provides SPA-like speed with server-rendered HTML. No JavaScript to write. Three components work together:
4
5	- Drive -- Automatic AJAX navigation for all links and forms (zero config)
6	- Frames -- Scoped navigation that updates only one section of the page
7	- Streams -- Server-pushed DOM mutations (append, replace, remove, etc.)
8
9	## Decision Tree
10
11	```
12	Need to update the page?
13	+-- Full page navigation -> Turbo Drive (automatic, already active)
14	+-- Single section from user click -> Turbo Frame
15	+-- Multiple sections from action -> Turbo Stream (HTTP response)
16	+-- Real-time from server/others -> Turbo Stream (Mercure / SSE)
17	```
18
19	## Installation
20
21	```bash
22	composer require symfony/ux-turbo
23	```
24
25	That's it. Turbo Drive is active immediately -- all links and forms become AJAX.
26
27	## Turbo Drive
28
29	Automatic SPA-like navigation. Every `<a>` click and `<form>` submit is intercepted, fetched via AJAX, and the `<body>` is swapped. The browser URL and history update normally.
30
31	### Disabling for Specific Elements
32
33	```html
34	<!-- Disable on link/form -->
35	<a href="/external" data-turbo="false">External Link</a>
36
37	<!-- Disable for entire section -->
38	<div data-turbo="false">
39	<a href="/normal">Normal link (no Turbo)</a>
40	</div>
41	```
42
43	### History and Caching
44
45	```html
46	<!-- Replace history instead of push -->
47	<a href="/page" data-turbo-action="replace">Replace History</a>
48
49	<!-- Force full reload when asset changes -->
50	<link rel="stylesheet" href="/app.css" data-turbo-track="reload">
51	<script src="/app.js" data-turbo-track="reload"></script>
52	```
53
54	## Turbo Frames
55
56	Scope navigation to a section of the page. Links and forms inside a frame update only that frame's content. The rest of the page stays untouched.
57
58	### Basic Frame
59
60	```html
61	<!-- Page with frame -->
62	<turbo-frame id="messages">
63	<h2>Messages</h2>
64	<a href="/messages/1">View Message 1</a> <!-- Updates only this frame -->
65	</turbo-frame>
66
67	<!-- /messages/1 response must contain a matching frame ID -->
68	<turbo-frame id="messages">
69	<h2>Message 1</h2>
70	<p>Content here...</p>
71	<a href="/messages">Back to list</a>
72	</turbo-frame>
73	```
74
75	The server response is a full HTML page, but Turbo extracts only the matching `<turbo-frame>` and swaps it in.
76
77	### Lazy Loading
78
79	Load frame content asynchronously after the page renders:
80
81	```html
82	<turbo-frame id="notifications" src="/notifications" loading="lazy">
83	<p>Loading...</p>
84	</turbo-frame>
85	```
86
87	### Target Another Frame
88
89	A link inside one frame can update a different frame:
90
91	```html
92	<turbo-frame id="sidebar">
93	<a href="/item/1" data-turbo-frame="main-content">View Item</a>
94	</turbo-frame>
95
96	<turbo-frame id="main-content">
97	<!-- Content replaced here -->
98	</turbo-frame>
99	```
100
101	### Break Out of Frame
102
103	Navigate the entire page from within a frame:
104
105	```html
106	<turbo-frame id="modal">
107	<a href="/dashboard" data-turbo-frame="_top">Go to Dashboard</a>
108	</turbo-frame>
109	```
110
111	### Frame with Form
112
113	Forms inside frames submit and update within that frame:
114
115	```html
116	<turbo-frame id="search-results">
117	<form action="/search" method="get">
118	<input type="search" name="q">
119	<button>Search</button>
120	</form>
121	<ul>
122	{% for item in results %}
123	<li>{{ item.name }}</li>
124	{% endfor %}
125	</ul>
126	</turbo-frame>
127	```
128
129	### URL Sync
130
131	Update the browser URL when a frame navigates (useful for bookmarkable state):
132
133	```html
134	<turbo-frame id="products" data-turbo-action="advance">
135	<!-- Browser URL updates when this frame navigates -->
136	</turbo-frame>
137	```
138
139	## Turbo Streams
140
141	Update multiple DOM elements from a single server response. Eight actions available (`append`, `prepend`, `replace`, `update`, `remove`, `before`, `after`, `refresh`), each targeting elements by ID or CSS selector.
142
143	### Stream Actions
144
145	```html
146	<turbo-stream action="a

People who liked this also viewed

6 picks

Type