PHPackages vardumper/html5-twig-component-bundle - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. vardumper/html5-twig-component-bundle ActiveSymfony-bundle[Templating & Views](/categories/templating) vardumper/html5-twig-component-bundle ===================================== Symfony UX Twig Components for typesafe HTML5 elements with ARIA support & enum validation 0.2.83(1mo ago)5851MITPHPPHP ^8.4CI failing Since Dec 9Pushed 2mo agoCompare [ Source](https://github.com/vardumper/html5-twig-component-bundle)[ Packagist](https://packagist.org/packages/vardumper/html5-twig-component-bundle)[ Fund](https://www.buymeacoffee.com/vardumper)[ Fund](https://paypal.me/vardumper)[ RSS](/packages/vardumper-html5-twig-component-bundle/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (8)Versions (58)Used By (1) [![Latest Stable Version](https://camo.githubusercontent.com/6a9ae6cc08f06f37eb7ded1283ca4ea01b8a932983b40db638f4e77c246a2277/68747470733a2f2f706f7365722e707567782e6f72672f76617264756d7065722f68746d6c352d747769672d636f6d706f6e656e742d62756e646c652f762f737461626c65)](https://packagist.org/packages/vardumper/html5-twig-component-bundle)[![Total Downloads](https://camo.githubusercontent.com/b6c67f12e11c01f06759b7f274e57270f4c415cb3293f85158e628213d4f9edb/68747470733a2f2f706f7365722e707567782e6f72672f76617264756d7065722f68746d6c352d747769672d636f6d706f6e656e742d62756e646c652f646f776e6c6f616473)](https://packagist.org/packages/vardumper/html5-twig-component-bundle)[![Vulnerabilities for html5-twig-component-bundle](https://camo.githubusercontent.com/5f252a080d33632162f81a86ad07811b851bbf20facd24b6d581f85bcd4e94e9/68747470733a2f2f64747261636b2e6572696b706f65686c65722e75732f6170692f76312f62616467652f76756c6e732f70726f6a6563742f34303461333530362d326236322d346139652d383631372d6538306633656262316630333f6170694b65793d6f64745f4a354f4b7a394a6357704b416e717a383077687854767741336f516a47424779)](https://dtrack.erikpoehler.us/projects/404a3506-2b62-4a9e-8617-e80f3ebb1f03) Twig Components for HTML5 Elements ================================== [](#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 -------- [](#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 ------------ [](#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 ------------ [](#installation) ``` composer require vardumper/html5-twig-component-bundle ``` The bundle includes automatic service registration - no additional configuration needed! Configuration ------------- [](#configuration) The bundle is automatically registered via Symfony Flex. If you need to register it manually, add to `config/bundles.php`: ``` # config/bundles.php return [ // ... Html\TwigComponentBundle\HtmlTwigComponentBundle::class => ['all' => true], ]; ``` Next, tell Symfony that Twig Components can be found in a new path. Edit `config/packages/twig_component.yaml` and add the following: ``` # 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 ----- [](#usage) Use any HTML element as a Twig Component: ``` This is a quote from example.com Submit Form ``` ### Use in anonymous Twig Components [](#use-in-anonymous-twig-components) ``` {# templates/components/Teaser.html.twig #} {{ headline }} {{ content }} {{ buttonText }} ``` which can then be used in pages: ``` {# templates/page.html.twig #} {% for item in teasers %} {% endfor %} ``` ### Passing arrays as component props [](#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: ``` Hello world ``` This will render a `data-role="article"` attribute on the generated component's root element. Features -------- [](#features-1) - ✅ 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-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 --------- [](#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 ----------------- [](#issues--bugs) Please report issues in this packages home at [Extended HTMLDocument](https://github.com/vardumper/extended-htmldocument) ### Health Score 45 — FairBetter than 93% of packages Maintenance86 Actively maintained with recent releases Popularity17 Limited adoption so far Community13 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 64% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~2 days Recently: every ~17 days Total 56 Last Release 57d ago PHP version history (2 changes)0.2.27PHP ^8.4 0.2.32PHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/50c8cdff5461214c7149cd8f1c55473b144ef0c3740a79e2d78eb9f2a1cfa4bc?d=identicon)[vardumper](/maintainers/vardumper) --- Top Contributors [![actions-user](https://avatars.githubusercontent.com/u/65916846?v=4)](https://github.com/actions-user "actions-user (57 commits)")[![vardumper](https://avatars.githubusercontent.com/u/21208397?v=4)](https://github.com/vardumper "vardumper (20 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (11 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)") --- Tags symfonytwigsymfony-uxcomponentsHTML5ARIA ### Embed Badge ![Health badge](/badges/vardumper-html5-twig-component-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/vardumper-html5-twig-component-bundle/health.svg)](https://phpackages.com/packages/vardumper-html5-twig-component-bundle) ``` ### Alternatives [symfony/ux-live-component Live components for Symfony 1635.6M72](/packages/symfony-ux-live-component)[symfony/ux-twig-component Twig components for Symfony 21914.8M162](/packages/symfony-ux-twig-component)[symfony/ux-toolkit A tool to easily create a design system in your Symfony app with customizable, well-crafted Twig components 1432.0k](/packages/symfony-ux-toolkit)[yellowskies/qr-code-bundle Symfony Barcode & QR Code Generator Bundle with Twig extension 36682.9k](/packages/yellowskies-qr-code-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)