Symfony UX Turbo

https://symfony.com/bundles/ux-turbo/current/
Admin
Symfony UX Turbo is a Symfony bundle that integrates the Hotwire Turbo library, enabling Single Page...
Tokens:19,224
Snippets:150
Trust Score:9.7
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install Mercure Bundle

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Run this command to install the Symfony Mercure bundle, which is required for broadcasting support.

```bash
$ composer require symfony/mercure-bundle
```

--------------------------------

### Install assets and rebuild with npm

Source: https://symfony.com/bundles/ux-turbo/current/reprise.html

Run these commands after installing Symfony UX Turbo to install and rebuild your assets.

```bash
$ npm install --force
$ npm run dev
```

--------------------------------

### Install Symfony UX Turbo with Composer

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Install the bundle using Composer and Symfony Flex. This command adds the symfony/ux-turbo package to your project.

```bash
$ composer require symfony/ux-turbo
```

--------------------------------

### <twig:Turbo:Frame> - examples

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Shows various usages of the `<twig:Turbo:Frame>` component: with `src` for lazy-loading, `target` to navigate another frame, `loading="lazy"` for lazy loading, and with content inside. Outputs are shown as comments.

```twig
<twig:Turbo:Frame id="task_{{ task.id }}" src="{{ path('app_task_show', {id: task.id}) }}" />
{# output: <turbo-frame id="task_1" src="http://example.com/task/1"></turbo-frame> #}

<twig:Turbo:Frame id="task_{{ task.id }}" src="{{ path('app_task_show', {id: task.id}) }}" target="_top" />
{# output: <turbo-frame id="task_1" src="http://example.com/task/1" target="_top"></turbo-frame> #}

<twig:Turbo:Frame id="task" target="other_task" />
{# output: <turbo-frame id="task" target="other_task"></turbo-frame> #}

<twig:Turbo:Frame id="task_{{ task.id }}" src="{{ path('app_task_show', {id: task.id}) }}" loading="lazy" />
{# output: <turbo-frame id="task_1" src="http://example.com/task/1" loading="lazy"></turbo-frame> #}

<twig:Turbo:Frame id="task_{{ task.id }}">
    <div>My task frame!</div>
</twig:Turbo:Frame>
{# output: #}
<turbo-frame id="task_1">
    <div>My task frame!</div>
</turbo-frame>
```

--------------------------------

### Replace action with <twig:Turbo:Stream:Replace>

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Replaces the element(s) designated by 'targets' with the provided content. The example shows the Twig component and its output.

```html
<twig:Turbo:Stream:Replace target="#task_{{ task.id }}">
    <li id="task_{{ task.id }}">{{ task.title }}</li>
</twig:Turbo:Stream:Replace>

{# output: #}
<turbo-stream action="replace" targets="#task_42">
    <template>
        <li id="task_42">My task</li>
    </template>
</turbo-stream>
```

--------------------------------

### turbo_refreshes_with() - configure refresh method and scroll

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Generates `<meta>` tags to configure both the refresh method and scroll behavior for page refreshes. `method` accepts 'replace' (default) or 'morph'; `scroll` accepts 'reset' (default) or 'preserve'. Example output shows `<meta name="turbo-refresh-method" content="morph">` and `<meta name="turbo-refresh-scroll" content="preserve">`.

```twig
{{ turbo_refreshes_with(method = 'replace', scroll = 'reset') }}
```

```twig
{{ turbo_refreshes_with(method: 'morph', scroll: 'preserve') }}
{# output: #}
<meta name="turbo-refresh-method" content="morph">
<meta name="turbo-refresh-scroll" content="preserve">
```

--------------------------------

### Custom action with TurboStreamResponse::action()

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Use the 'TurboStreamResponse::action()' method from a controller to create a custom stream action. The example shows a controller snippet that returns a TurboStreamResponse with a custom action.

```php
// src/Controller/TaskController.php
use Symfony\UX\Turbo\TurboStreamResponse;

if (TurboBundle::STREAM_FORMAT === $request->getPreferredFormat()) {
    return (new TurboStreamResponse())
        ->action('my_action', '#task_'.$task->getId(), '<li>'.$task->getTitle().'</li>');
}
```

--------------------------------

### TaskController with 422 validation error handling

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Example controller showing how to handle form submissions with Turbo Drive. The render() method returns a 422 status on validation errors, and a 303 redirect on success. This is required for Turbo Drive to work correctly.

```php
// src/Controller/TaskController.php
namespace App\Controller;

use App\Entity\Task;
use App\Form\TaskType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

#[Route('/task')]
class TaskController extends AbstractController
{
    #[Route('/new', name: 'app_task_new', methods: ['GET', 'POST'])]
    public function new(Request $request): Response
    {
        $task = new Task();
        $form = $this->createForm(TaskType::class, $task);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            // ... perform some action, such as saving the task to the database

            return $this->redirectToRoute('app_task_index', [], Response::HTTP_SEE_OTHER);
        }

        return $this->render('task/new.html.twig', [
            'task' => $task,
            'form' => $form,
        ]);
    }
}
```

--------------------------------

### Minimal frame layout template using @Turbo/layouts/frame.html.twig

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Extend the minimal layout template to keep frame responses lightweight while allowing head content. The example shows a template for editing a task, including a Turbo Frame component and a cancel link.

```twig
{# templates/task/edit.html.twig #}
{% extends '@Turbo/layouts/frame.html.twig' %}

{% block head %}
    {{ turbo_exempts_page_from_cache() }}
{% endblock %}

{% block body %}
    <twig:Turbo:Frame id="task_{{ task.id }}">
        {{ form(form) }}

        <a href="{{ path('app_task_show', {id: task.id}) }}">Cancel</a>
    </twig:Turbo:Frame>
{% endblock %}
```

--------------------------------

### turbo_refresh_method() - configure refresh method

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Generates a `<meta>` tag to configure the refresh method for page refreshes. `method` accepts 'replace' (default) or 'morph'. Example output shows `<meta name="turbo-refresh-method" content="morph">`.

```twig
{{ turbo_refresh_method(method = 'replace') }}
```

```twig
{{ turbo_refresh_method(method: 'morph') }}
{# output: #}
<meta name="turbo-refresh-method" content="morph">
```

--------------------------------

### Clone the form in the controller

Source: https://symfony.com/bundles/ux-turbo/current/resetting-form.html

Clone the form before handling the request to get an empty form, then pass it to the stream template when the request prefers the Turbo stream format.

```php
// src/Controller/TaskController.php
 // ...

 #[Route('/task')]
 class TaskController extends AbstractController
 {
     #[Route('/new', name: 'app_task_new', methods: ['GET', 'POST'])]
     public function new(Request $request): Response
     {
         $task = new Task();
         $form = $this->createForm(TaskType::class, $task);

+        $emptyForm = clone $form;
         $form->handleRequest($request);

         if ($form->isSubmitted() && $form->isValid()) {
             // ...

             if (TurboBundle::STREAM_FORMAT === $request->getPreferredFormat()) {
                 $request->setRequestFormat(TurboBundle::STREAM_FORMAT);

                 return $this->renderBlock('task/new.html.twig', 'success_stream', [
                     'task' => $task,
+                    'form' => $emptyForm,
                 ]);
             }

             // ...
             return $this->redirectToRoute('app_task_index', [], Response::HTTP_SEE_OTHER);
         }

         return $this->render('task/new.html.twig', [
             'form' => $form,
         ]);
     }
 }
```

--------------------------------

### <twig:Turbo:Frame>

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Returns a `<turbo-frame>` element that can either be used to encapsulate frame content or as a lazy-loading container that starts empty but fetches the URL supplied in the `src` attribute.

```APIDOC
## <twig:Turbo:Frame>

### Description
Returns a `<turbo-frame>` element that can either be used to encapsulate frame content or as a lazy-loading container that starts empty but fetches the URL supplied in the `src` attribute.

### Method
Twig component

### Endpoint
N/A

### Parameters
#### Attributes
- **id** (string) - Required - The frame ID.
- **src** (string) - Optional - The URL to load content from.
- **target** (string) - Optional - The target frame for navigation.
- **loading** (string) - Optional - Lazy-loading behavior (e.g., `lazy`).

### Request Example
```twig
<twig:Turbo:Frame id="task_{{ task.id }}" src="{{ path('app_task_show', {id: task.id}) }}" />
```

### Response
#### Success Response
- Output: `<turbo-frame id="task_1" src="http://example.com/task/1"></turbo-frame>`

#### Response Example
```html
<turbo-frame id="task_1" src="http://example.com/task/1"></turbo-frame>
```
```

--------------------------------

### turbo_refresh_scroll() - configure scroll behavior

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Generates a `<meta>` tag to configure the scroll behavior for page refreshes. `scroll` accepts 'reset' (default) or 'preserve'. Example output shows `<meta name="turbo-refresh-scroll" content="preserve">`.

```twig
{{ turbo_refresh_scroll(scroll = 'reset') }}
```

```twig
{{ turbo_refresh_scroll(scroll: 'preserve') }}
{# output: #}
<meta name="turbo-refresh-scroll" content="preserve">
```

--------------------------------

### Refresh action without request-id

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Triggers a page refresh. This example shows the component without a 'requestId' attribute.

```html
{# without [request-id] #}
<twig:Turbo:Stream:Refresh />

{# output: #}
<turbo-stream action="refresh"></turbo-stream>
```

--------------------------------

### Configure entity_template_prefixes in config/packages/turbo.yaml

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Sets the default namespace-to-template mapping for broadcast entities. The default maps App\Entity\ to broadcast/.

```yaml
# config/packages/turbo.yaml
turbo:
    broadcast:
        entity_template_prefixes:
            App\Entity\: broadcast/
```

--------------------------------

### Configure Mercure Hub in config/packages/mercure.yaml

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Configuration for Mercure hub(s) as explained in the documentation. Update the MERCURE_URL in .env if not using Symfony Docker.

```yaml
# config/packages/mercure.yaml
mercure:
    hubs:
        default:
            url: '%env(MERCURE_URL)%'
            public_url: '%env(MERCURE_PUBLIC_URL)%'
            jwt:
                secret: '%env(MERCURE_JWT_SECRET)%'
                publish: '*'
```

--------------------------------

### Configure global data-turbo-track attributes in reprise.yaml

Source: https://symfony.com/bundles/ux-turbo/current/reprise.html

Adds data-turbo-track="reload" to all script and link tags globally via the reprise.yaml configuration.

```yaml
# config/packages/reprise.yaml
reprise:
    # ...

    script_attributes:
        'data-turbo-track': reload
    link_attributes:
        'data-turbo-track': reload
```

--------------------------------

### Subscribe to all entities of a class with turbo_stream_listen()

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Pass a Fully Qualified Class Name to turbo_stream_listen() to subscribe to updates for all entities of that class. Double backslashes are required.

```twig
<div id="tasks" {{ turbo_stream_listen('App\\Entity\\Task') }}></div>
```

--------------------------------

### Detect Turbo Frame request in Twig with turbo_is_frame_request() and turbo_frame_request_id()

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Use the Twig functions turbo_is_frame_request() and turbo_frame_request_id() to conditionally render partial content for a Turbo Frame request. The example shows how to output the frame ID.

```twig
{% if turbo_is_frame_request() %}
    {# Render a partial response for the frame #}
    <p>Frame ID: {{ turbo_frame_request_id() }}</p>
{% else %}
    {# Render the full page #}
{% endif %}
```

--------------------------------

### Use multiple Broadcast attributes with Mercure options (before/after)

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Shows how to repeat the Broadcast attribute to render multiple templates with different topics. The after version uses Mercure-specific options like 'private' and Expression Language topics.

```php
// src/Entity/Task.php
namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;
use Symfony\UX\Turbo\Attribute\Broadcast;

#[ORM\Entity]
-#[Broadcast]
+#[Broadcast(
+    topics: ['@="task_detail_" ~ entity.getId()', 'tasks'],
+    template: 'task_detail.stream.html.twig',
+    private: true,
+)]
+#[Broadcast(
+    topics: ['@="task_list_" ~ entity.getId()', 'tasks'],
+    template: 'task_list.stream.html.twig',
+    private: true,
+)]
class Task
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(length: 255)]
    private ?string $title = null;
}
```

--------------------------------

### Rendered minimal HTML document from frame layout

Source: https://symfony.com/bundles/ux-turbo/current/index.html

The output HTML generated by the minimal frame layout, showing the turbo-cache-control meta tag and the turbo-frame element with the task ID.

```html
<!DOCTYPE html>
<html>
    <head>
        <meta name="turbo-cache-control" content="no-cache">
    </head>
    <body>
        <turbo-frame id="task_42">
            <!-- form fields -->

            <a href="/task/42">Cancel</a>
        </turbo-frame>
    </body>
</html>
```

--------------------------------

### Subscribe to topics with <twig:Turbo:Stream:From>

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Renders a <turbo-mercure-stream-source> element that subscribes to Mercure topics. Supports string topics, entity class names (resolves topic URL), private topics (sets withCredentials), a specific transport, and multiple topics. Double backslashes in FQCNs are required because Twig treats \E as an escape sequence.

```twig
{# subscribe to a string topic #}
<twig:Turbo:Stream:From topics="chat" />

{# subscribe to an entity class (resolves its topic URL automatically) #}
<twig:Turbo:Stream:From topics="App\\Entity\\Book" />

{# subscribe to a private topic (sets withCredentials on the EventSource) #}
<twig:Turbo:Stream:From topics="chat" private />

{# subscribe using a specific transport #}
<twig:Turbo:Stream:From topics="App\\Entity\\Book" transport="hub2" />

{# subscribe to multiple topics #}
<twig:Turbo:Stream:From topics="{{ ['topic_a', 'topic_b'] }}" />
```

--------------------------------

### Before action with <twig:Turbo:Stream:Before>

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Inserts content immediately before the element(s) designated by 'targets'.

```html
<twig:Turbo:Stream:Before target="#task_{{ task.id }}">
    <li id="task_{{ newTask.id }}">{{ newTask.title }}</li>
</twig:Turbo:Stream:Before>

{# output: #}
<turbo-stream action="before" targets="#task_42">
    <template>
        <li id="task_41">Previous task</li>
    </template>
</turbo-stream>
```

--------------------------------

### Detect Turbo Frame request in controller with TurboFrame service

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Inject the TurboFrame service to check if the current request is a Turbo Frame request and retrieve the frame ID. Use isFrameRequest() to conditionally render a partial response and getRequestId() to get the frame ID.

```php
// src/Controller/TaskController.php
namespace App\Controller;

use App\Entity\Task;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\UX\Turbo\TurboFrame;

#[Route('/task')]
class TaskController extends AbstractController
{
    #[Route('/{id}', name: 'app_task_show', methods: ['GET'])]
    public function show(TurboFrame $turboFrame, Task $task): Response
    {
        if ($turboFrame->isFrameRequest()) {
            // The request was triggered by a Turbo Frame.
            // Render a partial response for the frame only.
            $frameId = $turboFrame->getRequestId(); // e.g. "task_details"
        }

        // ...
    }
}
```

--------------------------------

### Enable versioning in webpack.config.js

Source: https://symfony.com/bundles/ux-turbo/current/webpack-encore.html

Enable versioning in Encore so that filenames change when file contents change, which is required for Turbo Drive to detect asset changes.

```javascript
// webpack.config.js

Encore.
    // ...
    .enableVersioning(Encore.isProduction())
```

--------------------------------

### Task index template with turbo_stream_listen

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Twig template that listens to the 'tasks' topic and automatically displays new tasks for all connected users.

```twig
{# task/index.html.twig #}
{% extends 'base.html.twig' %}

{% block body %}
    <h1>Tasks</h1>

    <div id="tasks" {{ turbo_stream_listen('tasks') }}>
        {# New tasks will automatically appear here for all connected users #}
        {% for task in tasks %}
            <div id="task_{{ task.id }}">{{ task.title }}</div>
        {% endfor %}
    </div>
{% endblock %}
```

--------------------------------

### Add data-turbo-track attributes in webpack_encore.yaml

Source: https://symfony.com/bundles/ux-turbo/current/webpack-encore.html

Configure script and link attributes to include data-turbo-track="reload" so that Turbo Drive performs a full refresh when assets change.

```yaml
# config/packages/webpack_encore.yaml
webpack_encore:
    # ...

    script_attributes:
        defer: true
        'data-turbo-track': reload
    link_attributes:
        'data-turbo-track': reload
```

--------------------------------

### TurboStreamResponse::action()

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Method to create a custom Turbo Stream response from a controller.

```APIDOC
## TurboStreamResponse::action()

### Description
Creates a Turbo Stream response with a custom action from a controller.

### Method
`TurboStreamResponse::action(string $action, string $target, string $content)`

### Parameters
- **action** (string) - Required - The custom action name.
- **target** (string) - Required - CSS selector for the target element(s).
- **content** (string) - Required - HTML content to include in the stream.

### Example
```php
// src/Controller/TaskController.php
use Symfony\UX\Turbo\TurboStreamResponse;

if (TurboBundle::STREAM_FORMAT === $request->getPreferredFormat()) {
    return (new TurboStreamResponse())
        ->action('my_action', '#task_'.$task->getId(), '<li>'.$task->getTitle().'</li>');
}
```
```

--------------------------------

### Prepend action with <twig:Turbo:Stream:Prepend>

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Prepends content as the first child of the element(s) designated by 'targets'.

```html
<twig:Turbo:Stream:Prepend target="#task_list">
    <li id="task_{{ task.id }}">{{ task.title }}</li>
</twig:Turbo:Stream:Prepend>

{# output: #}
<turbo-stream action="prepend" targets="#task_list">
    <template>
        <li id="task_42">My task</li>
    </template>
</turbo-stream>
```

--------------------------------

### Publish an update using a specific Mercure hub in TaskController.php

Source: https://symfony.com/bundles/ux-turbo/current/multiple-transports.html

Shows a controller action that injects the HubInterface for a specific hub (hub1) and publishes an Update to that hub. The response includes the update ID.

```php
// src/Controller/TaskController.php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Mercure\HubInterface;
use Symfony\Component\Mercure\Update;
use Symfony\Component\Routing\Attribute\Route;

#[Route('/task')]
class TaskController extends AbstractController
{
    #[Route('/publish', name: 'app_task_publish', methods: ['POST'])]
    public function publish(HubInterface $hub1): Response
    {
        $id = $hub1->publish(new Update('tasks', 'content'));

        return new Response("Update #{$id} published.");
    }
}
```

--------------------------------

### Configure multiple Mercure hubs in config/packages/mercure.yaml

Source: https://symfony.com/bundles/ux-turbo/current/multiple-transports.html

Defines two Mercure hubs (hub1 and hub2) with their URLs and JWT secrets. This configuration allows using multiple transports for Turbo Streams.

```yaml
# config/packages/mercure.yaml
mercure:
    hubs:
        hub1:
            url: https://hub1.example.net/.well-known/mercure
            jwt: snip
        hub2:
            url: https://hub2.example.net/.well-known/mercure
            jwt: snip
```

--------------------------------

### Controller with renderBlock() for Turbo Stream response

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Detects the Turbo Stream format and returns a partial page update using renderBlock() with a dedicated Twig block. Falls back to a redirect if the format is not Turbo Stream.

```php
// src/Controller/TaskController.php
namespace App\Controller;

use App\Entity\Task;
use App\Form\TaskType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\UX\Turbo\TurboBundle;

#[Route('/task')]
class TaskController extends AbstractController
{
    #[Route('/new', name: 'app_task_new', methods: ['GET', 'POST'])]
    public function new(Request $request): Response
    {
        $task = new Task();
        $form = $this->createForm(TaskType::class, $task);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            // ... perform some action, such as saving the task to the database

            if (TurboBundle::STREAM_FORMAT === $request->getPreferredFormat()) {
                $request->setRequestFormat(TurboBundle::STREAM_FORMAT);

                return $this->renderBlock('task/index.html.twig', 'success_stream', ['task' => $task]);
            }

            return $this->redirectToRoute('app_task_index', [], Response::HTTP_SEE_OTHER);
        }

        return $this->render('task/new.html.twig', [
            'form' => $form,
        ]);
    }
}
```

```twig
{# bottom of task/index.html.twig #}
{% block success_stream %}
    <twig:Turbo:Stream:Append target="#task_list">
        <li id="task_{{ task.id }}">{{ task.title }}</li>
    </twig:Turbo:Stream:Append>
{% endblock %}
```

--------------------------------

### <twig:Turbo:Stream:Prepend>

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Prepends content as the first child of the element(s) designated by the target attribute.

```APIDOC
## <twig:Turbo:Stream:Prepend>

### Description
Prepends content as the first child of the element(s) designated by the `target` attribute.

### Component
`<twig:Turbo:Stream:Prepend>`

### Parameters
- **target** (string) - Required - CSS selector for the element(s) to which content will be prepended.

### Example
```twig
<twig:Turbo:Stream:Prepend target="#task_list">
    <li id="task_{{ task.id }}">{{ task.title }}</li>
</twig:Turbo:Stream:Prepend>
```

### Output
```html
<turbo-stream action="prepend" targets="#task_list">
    <template>
        <li id="task_42">My task</li>
    </template>
</turbo-stream>
```
```

--------------------------------

### turbo_refreshes_with

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Generates `<meta>` tags to configure both the refresh method and scroll behavior for page refreshes.

```APIDOC
## turbo_refreshes_with

### Description
Generates `<meta>` tags to configure both the refresh method and scroll behavior for page refreshes.

### Method
Twig function

### Endpoint
N/A

### Parameters
#### Optional Parameters
- **method** (string) - Optional - Default: `replace` - Possible values: `replace` or `morph`
- **scroll** (string) - Optional - Default: `reset` - Possible values: `reset` or `preserve`

### Request Example
```twig
{{ turbo_refreshes_with(method: 'morph', scroll: 'preserve') }}
```

### Response
#### Success Response
- Output: `<meta name="turbo-refresh-method" content="morph">` and `<meta name="turbo-refresh-scroll" content="preserve">`

#### Response Example
```html
<meta name="turbo-refresh-method" content="morph">
<meta name="turbo-refresh-scroll" content="preserve">
```
```

--------------------------------

### <twig:Turbo:Stream:Before>

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Inserts content immediately before the element(s) designated by the target attribute.

```APIDOC
## <twig:Turbo:Stream:Before>

### Description
Inserts content immediately before the element(s) designated by the `target` attribute.

### Component
`<twig:Turbo:Stream:Before>`

### Parameters
- **target** (string) - Required - CSS selector for the element(s) before which to insert content.

### Example
```twig
<twig:Turbo:Stream:Before target="#task_{{ task.id }}">
    <li id="task_{{ newTask.id }}">{{ newTask.title }}</li>
</twig:Turbo:Stream:Before>
```

### Output
```html
<turbo-stream action="before" targets="#task_42">
    <template>
        <li id="task_41">Previous task</li>
    </template>
</turbo-stream>
```
```

--------------------------------

### Custom Broadcaster Implementation

Source: https://symfony.com/bundles/ux-turbo/current/custom-transport.html

Defines a broadcaster class that implements BroadcasterInterface. It is called every time an object marked with #[Broadcast] changes. Must be tagged with 'turbo.broadcaster' (autoconfigured if enabled).

```php
// src/Turbo/Broadcaster.php
namespace App\Turbo;

use Symfony\UX\Turbo\Attribute\Broadcast;
use Symfony\UX\Turbo\Broadcaster\BroadcasterInterface;

class Broadcaster implements BroadcasterInterface
{
    public function broadcast(object $entity, string $action): void
    {
        // Called every time an object marked with #[Broadcast] changes
        $attribute = (new \ReflectionClass($entity))
            ->getAttributes(Broadcast::class)[0] ?? null;
        // ...
    }
}
```

--------------------------------

### TaskController with Mercure publish

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Controller action that saves a task and publishes an update to all connected clients via Mercure. Uses HubInterface and Update.

```php
// src/Controller/TaskController.php
namespace App\Controller;

use App\Entity\Task;
use App\Form\TaskType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Mercure\HubInterface;
use Symfony\Component\Mercure\Update;
use Symfony\Component\Routing\Attribute\Route;

#[Route('/task')]
class TaskController extends AbstractController
{
    #[Route('/new', name: 'app_task_new', methods: ['GET', 'POST'])]
    public function new(Request $request, HubInterface $hub): Response
    {
        $form = $this->createForm(TaskType::class, new Task());
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            $task = $form->getData();
            // ... save the task

            // Push the update to all connected clients via Mercure
            $hub->publish(new Update(
                'tasks',
                $this->renderView('task/stream/new.html.twig', ['task' => $task])
            ));

            return $this->redirectToRoute('app_task_index', [], Response::HTTP_SEE_OTHER);
        }

        return $this->render('task/new.html.twig', [
            'form' => $form,
        ]);
    }
}
```

--------------------------------

### After action with <twig:Turbo:Stream:After>

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Inserts content immediately after the element(s) designated by 'targets'.

```html
<twig:Turbo:Stream:After target="#task_{{ task.id }}">
    <li id="task_{{ newTask.id }}">{{ newTask.title }}</li>
</twig:Turbo:Stream:After>

{# output: #}
<turbo-stream action="after" targets="#task_42">
    <template>
        <li id="task_43">Next task</li>
    </template>
</turbo-stream>
```

--------------------------------

### Subscribe to entity updates with turbo_stream_listen()

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Pass an entity instance to turbo_stream_listen() to subscribe to updates for that specific entity. The helper is used inside an HTML attribute.

```twig
<div id="task_{{ task.id }}" {{ turbo_stream_listen(task) }}></div>
```

--------------------------------

### Test Turbo Frame with Symfony Panther

Source: https://symfony.com/bundles/ux-turbo/current/testing.html

A PHP test class using PantherTestCase to verify that clicking 'Edit this task' on a page shows a turbo-frame with the text 'Save'. Run with bin/phpunit.

```php
// tests/TaskFrameTest.php
namespace App\Tests;

use Symfony\Component\Panther\PantherTestCase;

class TaskFrameTest extends PantherTestCase
{
    public function testEditTaskFrame(): void
    {
        $client = self::createPantherClient();
        $client->request('GET', '/task/1');

        $client->clickLink('Edit this task');
        $this->assertSelectorWillContain('turbo-frame#task_1', 'Save');
    }
}
```

--------------------------------

### Subscribe to topics with turbo_stream_from()

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Twig function equivalent to the component. Supports private subscriptions and a specific transport. With Mercure protocol 1.0, subscribes using query parameters and uses URL Patterns for entity classes; the deprecated turbo_stream_listen() does not support this protocol.

```twig
{{ turbo_stream_from('chat') }}
{{ turbo_stream_from('chat', private: true) }}
{{ turbo_stream_from('App\\Entity\\Book', transport: 'hub2') }}
```

--------------------------------

### Specify transports for entity broadcasting in Task.php

Source: https://symfony.com/bundles/ux-turbo/current/multiple-transports.html

Entity class with the #[Broadcast] attribute and a 'transports' parameter listing 'hub1' and 'hub2'. Changes to this entity will be sent using all specified transports.

```php
// src/Entity/Task.php
namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;
use Symfony\UX\Turbo\Attribute\Broadcast;

#[ORM\Entity]
#[Broadcast(transports: ['hub1', 'hub2'])]
class Task
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(length: 255)]
    private ?string $title = null;
}
```

--------------------------------

### Controller with TurboStreamResponse for delete action

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Builds a Turbo Stream response inline using TurboStreamResponse to remove an element. Falls back to a redirect if the format is not Turbo Stream.

```php
// src/Controller/TaskController.php
namespace App\Controller;

use App\Entity\Task;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\UX\Turbo\TurboBundle;
use Symfony\UX\Turbo\TurboStreamResponse;

#[Route('/task')]
class TaskController extends AbstractController
{
    #[Route('/{id}', name: 'app_task_delete', methods: ['POST'])]
    public function delete(Request $request, Task $task): Response
    {
        // ... delete the task

        if (TurboBundle::STREAM_FORMAT === $request->getPreferredFormat()) {
            return (new TurboStreamResponse())
                ->remove('#task_'.$task->getId());
        }

        return $this->redirectToRoute('app_task_index', [], Response::HTTP_SEE_OTHER);
    }
}
```

--------------------------------

### <twig:Turbo:Stream:After>

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Inserts content immediately after the element(s) designated by the target attribute.

```APIDOC
## <twig:Turbo:Stream:After>

### Description
Inserts content immediately after the element(s) designated by the `target` attribute.

### Component
`<twig:Turbo:Stream:After>`

### Parameters
- **target** (string) - Required - CSS selector for the element(s) after which to insert content.

### Example
```twig
<twig:Turbo:Stream:After target="#task_{{ task.id }}">
    <li id="task_{{ newTask.id }}">{{ newTask.title }}</li>
</twig:Turbo:Stream:After>
```

### Output
```html
<turbo-stream action="after" targets="#task_42">
    <template>
        <li id="task_43">Next task</li>
    </template>
</turbo-stream>
```
```

--------------------------------

### turbo_refresh_method

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Generates a `<meta>` tag to configure the refresh method for page refreshes.

```APIDOC
## turbo_refresh_method

### Description
Generates a `<meta>` tag to configure the refresh method for page refreshes.

### Method
Twig function

### Endpoint
N/A

### Parameters
#### Optional Parameters
- **method** (string) - Optional - Default: `replace` - Possible values: `replace` or `morph`

### Request Example
```twig
{{ turbo_refresh_method(method: 'morph') }}
```

### Response
#### Success Response
- Output: `<meta name="turbo-refresh-method" content="morph">`

#### Response Example
```html
<meta name="turbo-refresh-method" content="morph">
```
```

--------------------------------

### turbo_exempts_page_from_cache() - disable caching

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Generates a `<meta>` tag to disable caching of a page. The output is `<meta name="turbo-cache-control" content="no-cache">`.

```twig
{{ turbo_exempts_page_from_cache() }}
```

```twig
{{ turbo_exempts_page_from_cache() }}
{# output: #}
<meta name="turbo-cache-control" content="no-cache">
```

--------------------------------

### <twig:Turbo:Stream:Replace>

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Replaces the element(s) designated by the target attribute with the provided content.

```APIDOC
## <twig:Turbo:Stream:Replace>

### Description
Replaces the element(s) designated by the `target` attribute with the provided content.

### Component
`<twig:Turbo:Stream:Replace>`

### Parameters
- **target** (string) - Required - CSS selector for the element(s) to replace.
- **morph** (boolean) - Optional - When present, adds `method="morph"` to the output.

### Example
```twig
<twig:Turbo:Stream:Replace target="#task_{{ task.id }}">
    <li id="task_{{ task.id }}">{{ task.title }}</li>
</twig:Turbo:Stream:Replace>
```

### Output
```html
<turbo-stream action="replace" targets="#task_42">
    <template>
        <li id="task_42">My task</li>
    </template>
</turbo-stream>
```

### Example with morphing
```twig
<twig:Turbo:Stream:Replace target="#task_{{ task.id }}" morph>
    <li id="task_{{ task.id }}">{{ task.title }}</li>
</twig:Turbo:Stream:Replace>
```

### Output with morphing
```html
<turbo-stream action="replace" targets="#task_42" method="morph">
    <template>
        <li id="task_42">My task</li>
    </template>
</turbo-stream>
```
```

--------------------------------

### turbo_exempts_page_from_preview() - disable preview

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Generates a `<meta>` tag to specify that the cached version of the page should not be shown as a preview on regular navigation visits. The output is `<meta name="turbo-cache-control" content="no-preview">`.

```twig
{{ turbo_exempts_page_from_preview() }}
```

```twig
{{ turbo_exempts_page_from_preview() }}
{# output: #}
<meta name="turbo-cache-control" content="no-preview">
```

--------------------------------

### turbo_page_requires_reload() - force full reload

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Generates a `<meta>` tag to force a full page reload. The output is `<meta name="turbo-visit-control" content="reload">`.

```twig
{{ turbo_page_requires_reload() }}
```

```twig
{{ turbo_page_requires_reload() }}
{# output: #}
<meta name="turbo-visit-control" content="reload">
```

--------------------------------

### Navigation within a Frame - show and edit templates

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Two Twig templates showing how a Turbo Frame with the same id is used in show and edit pages. Clicking a link inside the frame replaces the frame content with the matching frame from the linked page.

```twig
{# templates/task/show.html.twig #}
<twig:Turbo:Frame id="task_{{ task.id }}">
    <p>{{ task.title }}</p>

    <a href="{{ path('app_task_edit', {id: task.id}) }}">Edit this task</a>
</twig:Turbo:Frame>

{# templates/task/edit.html.twig #}
<twig:Turbo:Frame id="task_{{ task.id }}">
    {{ form(form) }}

    <a href="{{ path('app_task_show', {id: task.id}) }}">Cancel</a>
</twig:Turbo:Frame>
```

--------------------------------

### Custom Stream Source Renderer Implementation

Source: https://symfony.com/bundles/ux-turbo/current/custom-transport.html

Defines a stream source renderer that implements StreamSourceRendererInterface. It is tagged with 'turbo.stream_source_renderer' (autoconfigured if enabled). The render method generates a custom HTML element for the transport.

```php
// src/Turbo/MyStreamSourceRenderer.php
namespace App\Turbo;

use Symfony\Component\DependencyInjection\Attribute\AsTaggedItem;
use Symfony\UX\Turbo\StreamSourceRendererInterface;

#[AsTaggedItem(index: 'my-transport')]
class MyStreamSourceRenderer implements StreamSourceRendererInterface
{
    public function render(string|object|array $topics, array $options = []): string
    {
        $url = 'https://my-transport.example.com/subscribe?topic='.$topics;
        $private = $options['private'] ?? false;

        return \sprintf(
            '<my-custom-stream-source src="%s"%s></my-custom-stream-source>',
            htmlspecialchars($url, \ENT_QUOTES | \ENT_SUBSTITUTE, 'UTF-8'),
            $private ? ' private' : '',
        );
    }
}
```

--------------------------------

### Generate HTML attributes for a specific transport with turbo_stream_listen()

Source: https://symfony.com/bundles/ux-turbo/current/multiple-transports.html

Twig template using the turbo_stream_listen() function with the entity class and the 'hub2' transport to generate the Stimulus controller attributes.

```twig
<div id="tasks" {{ turbo_stream_listen('App\\Entity\\Task', 'hub2') }}></div>
```

--------------------------------

### Turbo stream template for new task

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Twig template that defines the turbo-stream action to append a new task to the #tasks element.

```twig
{# task/stream/new.html.twig #}
<turbo-stream action="append" targets="#tasks">
    <template>
        <div id="task_{{ task.id }}">{{ task.title }}</div>
    </template>
</turbo-stream>
```

--------------------------------

### Enable mercure-turbo-stream controller in assets/controllers.json

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Diff showing the change to enable the 'mercure-turbo-stream' controller. Note: Manually enabling this controller is deprecated since Symfony UX 3.1; use the Twig component or function instead.

```diff
"@symfony/ux-turbo": {
    "mercure-turbo-stream": {
-         "enabled": false,
+         "enabled": true,
        "fetch": "eager"
    }
},
```

--------------------------------

### Set custom template with Broadcast attribute (before/after)

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Shows how to explicitly set the template for a broadcast entity using the 'template' parameter of the Broadcast attribute. The before version uses the default template, the after version specifies 'my-template.stream.html.twig'.

```php
// src/Entity/Task.php
namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;
use Symfony\UX\Turbo\Attribute\Broadcast;

#[ORM\Entity]
-#[Broadcast]
+#[Broadcast(template: 'my-template.stream.html.twig')]
class Task
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(length: 255)]
    private ?string $title = null;
}
```

--------------------------------

### Turbo Stream template for broadcast entity changes

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Template rendered when a broadcast entity is created, updated, or removed. Must contain create, update, and remove blocks. Receives entity, id, action, and options variables. Actions targeting non-existing DOM elements are ignored.

```twig
{# templates/broadcast/Task.stream.html.twig #}
{% block create %}
    <turbo-stream action="append" targets="#tasks">
        <template>
            <div id="{{ 'task_' ~ id }}">{{ entity.title }} (#{{ id }})</div>
        </template>
    </turbo-stream>
{% endblock %}

{% block update %}
    <turbo-stream action="update" targets="#task_{{ id }}">
        <template>
            {{ entity.title }} (#{{ id }}, updated)
        </template>
    </turbo-stream>
{% endblock %}

{% block remove %}
    <turbo-stream action="remove" targets="#task_{{ id }}"></turbo-stream>
{% endblock %}
```

--------------------------------

### Custom action with <twig:Turbo:Stream>

Source: https://symfony.com/bundles/ux-turbo/current/index.html

For custom stream actions, use the generic <twig:Turbo:Stream> component. The 'action' attribute specifies the custom action name.

```html
<twig:Turbo:Stream action="my_action" />

{# output: #}
<turbo-stream action="my_action"></turbo-stream>
```

--------------------------------

### turbo_refresh_scroll

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Generates a `<meta>` tag to configure the scroll behavior for page refreshes.

```APIDOC
## turbo_refresh_scroll

### Description
Generates a `<meta>` tag to configure the scroll behavior for page refreshes.

### Method
Twig function

### Endpoint
N/A

### Parameters
#### Optional Parameters
- **scroll** (string) - Optional - Default: `reset` - Possible values: `reset` or `preserve`

### Request Example
```twig
{{ turbo_refresh_scroll(scroll: 'preserve') }}
```

### Response
#### Success Response
- Output: `<meta name="turbo-refresh-scroll" content="preserve">`

#### Response Example
```html
<meta name="turbo-refresh-scroll" content="preserve">
```
```

--------------------------------

### Form with multiple submit buttons and values

Source: https://symfony.com/bundles/ux-turbo/current/multiple-submit-buttons.html

Adds a value to each submit button in a form so the controller can determine which button was clicked, because Turbo Drive does not send elements with an empty value.

```html
<form>
    <button type="submit" name="action" value="save">Save</button>
    <button type="submit" name="action" value="publish">Publish</button>
</form>
```

--------------------------------

### turbo_exempts_page_from_preview

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Generates a `<meta>` tag to specify that the cached version of the page should not be shown as a preview on regular navigation visits.

```APIDOC
## turbo_exempts_page_from_preview

### Description
Generates a `<meta>` tag to specify that the cached version of the page should not be shown as a preview on regular navigation visits.

### Method
Twig function

### Endpoint
N/A

### Parameters
None

### Request Example
```twig
{{ turbo_exempts_page_from_preview() }}
```

### Response
#### Success Response
- Output: `<meta name="turbo-cache-control" content="no-preview">`

#### Response Example
```html
<meta name="turbo-cache-control" content="no-preview">
```
```

--------------------------------

### turbo_exempts_page_from_cache

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Generates a `<meta>` tag to disable caching of a page.

```APIDOC
## turbo_exempts_page_from_cache

### Description
Generates a `<meta>` tag to disable caching of a page.

### Method
Twig function

### Endpoint
N/A

### Parameters
None

### Request Example
```twig
{{ turbo_exempts_page_from_cache() }}
```

### Response
#### Success Response
- Output: `<meta name="turbo-cache-control" content="no-cache">`

#### Response Example
```html
<meta name="turbo-cache-control" content="no-cache">
```
```

--------------------------------

### <twig:Turbo:Stream> (Custom Action)

Source: https://symfony.com/bundles/ux-turbo/current/index.html

Generic component for custom stream actions. Allows specifying a custom action name.

```APIDOC
## <twig:Turbo:Stream> (Custom Action)

### Description
For custom stream actions, use the generic `<twig:Turbo:Stream>` component.

### Component
`<twig:Turbo:Stream>`

### Parameters
- **action** (string) - Required - The custom action name.

### Example
```twig
<twig:Turbo:Stream action="my_action" />
```

### Output
```html
<turbo-stream action="my_action"></turbo-stream>
```
```
Tokens:
Raw