https://github.com/vardumper/html5-twig-component-bundle
Symfony UX Twig Components for all HTML5 elements with ARIA support and static attribute validation via Enums. It provides auto-completion in your IDE of choice, so all available attributes can be quickly accessed.
https://github.com/vardumper/html5-twig-component-bundle
Last synced: about 1 month ago
JSON representation
Symfony UX Twig Components for all HTML5 elements with ARIA support and static attribute validation via Enums. It provides auto-completion in your IDE of choice, so all available attributes can be quickly accessed.
- Host: GitHub
- URL: https://github.com/vardumper/html5-twig-component-bundle
- Owner: vardumper
- License: mit
- Created: 2025-12-09T21:40:53.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-03-31T09:01:05.000Z (3 months ago)
- Last Synced: 2026-03-31T11:04:29.666Z (3 months ago)
- Language: PHP
- Size: 853 KB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://packagist.org/packages/vardumper/html5-twig-component-bundle)
[](https://packagist.org/packages/vardumper/html5-twig-component-bundle)
[](https://dtrack.erikpoehler.us/projects/404a3506-2b62-4a9e-8617-e80f3ebb1f03)
# Twig Components for HTML5 Elements
This is a Symfony Bundle which adds pre-built, typesafe, auto-generated Twig Components for all HTML5 elements. It comes with full WCAG, ARIA support, also adds support for Alpine.js attributes. It makes use of [Extended HTMLDocument](https://github.com/vardumper/extended-htmldocument) which is a schema-first library that improves HTML5 support in PHP 8.4. Mainly used for validation of immutable enum attributes.
This is especially useful when writing anonymous Twig Components enforcing standards-compliance, always-valid HTML5.
## Features
- **Symfony UX Integration**: Native Symfony Twig Component support
- **ARIA Compliant**: Complete ARIA attribute support with proper validation
- **Auto-Generated**: Consistent API across all HTML5 elements via schema-first approach
- **Enum Validation**: Static attribute validation for HTML compliance
- **Modern PHP**: Requires PHP 8.4+ for DOM\HTMLDocument features
## Requirements
* PHP 8.4 – the underlying Extended HTMLDocument library is built upon PHPs DOM\HTMLDocument which is available since PHP 8.4+
Since only the Enums are used for attribute validation here, adding support for older PHP versions could be done easily if it's needed or requested.
## Installation
```bash
composer require vardumper/html5-twig-component-bundle
```
The bundle includes automatic service registration - no additional configuration needed!
## Configuration
When installed via Symfony Flex, this bundle is automatically configured by the recipe in `flex/recipe`.
If you are not using Symfony Flex, register the bundle manually in `config/bundles.php`:
```php
# config/bundles.php
return [
// ...
Html\TwigComponentBundle\HtmlTwigComponentBundle::class => ['all' => true],
];
```
Then tell Symfony where the Twig Components are located. Edit `config/packages/twig_component.yaml` and add the following:
```yaml
# config/packages/twig_component.yaml
twig_component:
defaults:
Html\TwigComponentBundle\Twig\: '%kernel.project_dir%/vendor/vardumper/html5-twig-component-bundle/src/Twig/'
```
All Twig Components are automatically discovered and registered through the bundle's DependencyInjection extension. No manual service configuration required!
## Usage
Use any HTML element as a Twig Component:
```twig
This is a quote from example.com
Submit Form
```
### Use in anonymous Twig Components
```twig
{# templates/components/Teaser.html.twig #}
{{ headline }}
{{ content }}
{{ buttonText }}
```
which can then be used in pages:
```twig
{# templates/page.html.twig #}
{% for item in teasers %}
{% endfor %}
```
### Passing arrays as component props
You can pass associative arrays to component props using the `:` notation. For example to pass `data-*` attributes to the component:
```twig
Hello world
```
This will render a `data-role="article"` attribute on the generated component's root element.
## Features
- ✅ All HTML5 elements supported
- ✅ Full ARIA attributes support
- ✅ Type-safe enum validation
- ✅ PreMount validation with OptionsResolver
- ✅ Proper namespace structure (Block/Inline/Void)
## Components Structure
Components are organized by type:
- `Block` - Block-level elements (div, section, article, etc.)
- `Inline` - Inline elements (span, a, strong, etc.)
- `Void` - non-rendered elements (head, wbr, meta, etc.)
## Read More
* [Extended HTMLDocument Documentation](https://vardumper.github.io/extended-htmldocument/)
* [Extended HTMLDocument Github Repository](https://github.com/vardumper/extended-htmldocument)
* [Twig Components](https://symfony.com/bundles/ux-twig-component/current/index.html)
* [Symfony UX](https://ux.symfony.com/)
## Issues & Bugs
Please report issues in this packages home at [Extended HTMLDocument](https://github.com/vardumper/extended-htmldocument)