# Symfony Plugin UX

**UX** features support Symfony UX, Twig components, LiveComponent workflows, Stimulus controllers, component templates, and related editor assistance.

---

## Symfony type icons for PHP classes

**Feature ID:** `PhpClassFileIconProvider`  
**Date:** 2026-06-08  
**Feature Page:** [Symfony type icons for PHP classes](https://espend.de/phpstorm/plugin/symfony#php-class-file-icon-provider)  

Decorates PHP class files with Symfony-specific icons so controllers, entities, repositories, form types, and console commands are easier to distinguish in the project tree.

The icon decoration is configurable in the Symfony plugin settings and uses the same Symfony metadata that powers navigation and inspections.

### Code Examples

```php
# Decorated PHP class types:
#[AsCommand(name: 'app:reindex-products')]
final class ReindexProductsCommand extends Command
{
}

#[ORM\Entity(repositoryClass: ProductRepository::class)]
final class Product
{
}

final class ProductType extends AbstractType
{
}

#[Route('/products')]
final class ProductController extends AbstractController
{
}
```

---

## Component Template Navigation

---

## Component Usage Navigation

**Feature ID:** `TwigLineMarkerProvider`  
**Date:** 2026-02-27  
**Feature Page:** [Component Usage Navigation](https://espend.de/phpstorm/plugin/symfony#twig-line-marker-provider)  

Navigate from a UX component template to all its usages. Supports all Twig component syntaxes with target resolution.

### Code Examples

```
# Function syntax:
{{ component('Alert', { type: 'success' }) }}
```

```
# Tag syntax:
{% component 'Alert' type='success' %}
    Content here
{% endcomponent %}
```

```
# HTML syntax:
<twig:Alert type="success">
    Content here
</twig:Alert>
```

---

## AsTwigTemplate Template

---

## Variable Expose

---

## Component HTML Syntax

---

## Component Function

---

## Incomplete Component Completion

---

## Stimulus Controller Completion

**Feature ID:** `StimulusControllerCompletionRegistrar`  
**Date:** 2026-01-17  
**Feature Page:** [Stimulus Controller Completion](https://espend.de/phpstorm/plugin/symfony#stimulus-controller-completion-registrar)  

Auto-completes Stimulus controller names in HTML `data-controller` attributes and Twig `stimulus_controller()` function calls. The completion shows all registered Stimulus controllers from the project, including those from Symfony UX packages.

In HTML, normalized names are provided (e.g., `symfony--ux-chartjs--chart`). In Twig, both normalized names and original module names (e.g., `@symfony/ux-chartjs/chart`) are supported. Navigation from controller name to the source JavaScript file is also available.

### Code Examples

```html
# HTML - data-controller attribute:
<div data-controller="symfony--ux-chartjs--chart">
    <canvas data-symfony--ux-chartjs--chart-target="canvas"></canvas>
</div>
```

```twig
# Twig - stimulus_controller() function:
{{ stimulus_controller('symfony--ux-chartjs--chart', {
    'data': chartData
}) }}
```

---

## Twig {% types %} Tag Class Completion

**Feature ID:** `TwigTypesTagCompletion`  
**Date:** 2026-03-01  
**Feature Page:** [Twig {% types %} Tag Class Completion](https://espend.de/phpstorm/plugin/symfony#twig-types-tag-completion)  

Provides class completion for the `{% types %}` Twig tag, which is used to declare variable types in templates. The completion suggests PHP class names including namespace support.

Supports the optional marker syntax (`?:`) for nullable types and array notation (`[]`) for collections. Navigate to class definitions via Ctrl+Click or Cmd+Click.

### Code Examples

```twig
# Basic type declaration:
{% types {
    user: '\App\Entity\User',
    product: '\App\Entity\Product'
} %}
```

```twig
# Optional types and arrays:
{% types {
    user?: '\App\Entity\User|null',
    items: '\App\Entity\Item[]',
    orders?: '\App\Entity\Order[]'
} %}
```

```twig
# Completion in action:
{% types { user: 'App\Ent' } %}
{# Completion suggests: Entity, Entity\User, Entity\Product #}
```

---

## Twig Route Parameter Completion

**Feature ID:** `TwigPathParameterCompletion`  
**Date:** 2013-10-27  
**Feature Page:** [Twig Route Parameter Completion](https://espend.de/phpstorm/plugin/symfony#twig-path-parameter-completion)  

Provides autocompletion for route parameters in Twig `path()` and `url()` functions. The plugin reads route definitions and suggests available parameters for each route.

Supports multiple hash key syntaxes: quoted keys `{{'slug': value}}`, unquoted keys `{{slug: value}}`, and shorthand syntax `{{slug}}`. Navigate to route definitions via Ctrl+Click or Cmd+Click.

### Code Examples

```twig
# Quoted hash key syntax:
{{ path('product_show', {{''}}) }}
```

```twig
# Unquoted hash key syntax:
{{ path('product_show', {}) }}
```

```twig
# Shorthand syntax:
{{ path('product_show', {slug}) }}
```

```twig
# Navigation support:
{{ path('product_show', {slug}) }}
{# Ctrl+Click navigates to route definition #}
```

---

## Twig Component <twig:block> Tag Completion

**Feature ID:** `TwigComponentBlockCompletion`  
**Date:** 2026-03-01  
**Feature Page:** [Twig Component <twig:block> Tag Completion](https://espend.de/phpstorm/plugin/symfony#twig-component-block-completion)  

Provides completion for `<twig:block>` tags inside Symfony UX Twig components. When editing a component usage at the root level, the plugin suggests block names defined in the component template and automatically inserts the full block tag structure.

### Code Examples

```twig
# Block tag completion:
<twig:Alert>
    <caret>  {# Suggests: <twig:block name="message">, <twig:block name="actions"> #}
</twig:Alert>
```

---

## Twig Component Block Name Completion

**Feature ID:** `TwigComponentBlockNameCompletion`  
**Date:** 2026-03-01  
**Feature Page:** [Twig Component Block Name Completion](https://espend.de/phpstorm/plugin/symfony#twig-component-block-name-completion)  

Provides completion for block names inside the `name=""` attribute of `<twig:block>` tags. The plugin suggests block names defined in the component template.

### Code Examples

```twig
# Block name completion:
<twig:Alert>
    <twig:block name="<caret>">  {# Suggests: message, actions #}
    </twig:block>
</twig:Alert>
```

---

## Twig {{ enum_cases() }} Function Completion

**Feature ID:** `EnumCasesTwigFunction`  
**Date:** 2026-01-01  
**Feature Page:** [Twig {{ enum_cases() }} Function Completion](https://espend.de/phpstorm/plugin/symfony#enum-cases-twig-function)  

Provides autocompletion for PHP enum classes in the Twig `enum_cases()` function. The plugin suggests enum class names with namespace support and filters results to show only enum classes.

Supports namespace completion with backslash separators. Navigate to enum class definitions via Ctrl+Click or Cmd+Click.

### Code Examples

```twig
# Basic enum completion:
{{ enum_cases('') }}
```

```twig
# Namespace completion:
{{ enum_cases('App\\') }}
```

```twig
# Using in control structures:
{% for status in enum_cases('App\\Enum\\Status') %}
    {{ status.name }}
{% endfor %}
```

```twig
# Navigation support:
{{ enum_cases('App\\Enum\\Status') }}
{# Ctrl+Click navigates to enum class definition #}
```

---