PHPackages ec-europa/ecl-twig - 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. ec-europa/ecl-twig AbandonedArchivedLibrary[Templating & Views](/categories/templating) ec-europa/ecl-twig ================== Twig components for the EC new visual identity. v2.39.0(4y ago)181.8k3[5 PRs](https://github.com/ec-europa/ecl-twig/pulls)EUPL-1.1JavaScript Since Oct 9Pushed 3y ago9 watchersCompare [ Source](https://github.com/ec-europa/ecl-twig)[ Packagist](https://packagist.org/packages/ec-europa/ecl-twig)[ RSS](/packages/ec-europa-ecl-twig/feed)WikiDiscussions master Synced yesterday READMEChangelog (10)Dependencies (2)Versions (73)Used By (0) ECL-Twig Library ================ [](#ecl-twig-library) [![Build Status](https://camo.githubusercontent.com/f9a3a2a210d27bf42db993fc2103519846843a340c863a55760d2078e01a2420/68747470733a2f2f64726f6e652e66706669732e65752f6170692f6261646765732f65632d6575726f70612f65636c2d747769672f7374617475732e737667)](https://drone.fpfis.eu/ec-europa/ecl-twig)[![code style: prettier](https://camo.githubusercontent.com/fa1096c501361805c36b519890a25f61cd45dde376718bb2f5af65a656f4c0fa/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f64655f7374796c652d70726574746965722d6666363962342e7376673f7374796c653d666c61742d737175617265)](https://github.com/prettier/prettier)[![lerna](https://camo.githubusercontent.com/4ddde3958e93b0ea1cc759ec11bdf137a7e9ad7297a26aedc033196453db2fe3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d61696e7461696e6564253230776974682d6c65726e612d6363303066662e737667)](https://lernajs.io/) The ECL-Twig is a library of [twig](https://twig.symfony.com/) templates, implementing the Europa Component Library (ECL) vanilla (html/css/js) components. ECL is a library of components applicable to all European Commission websites (hosted under europa.eu and ec.europa.eu domains), the library contains all the available components to build your website. For information on how to use the ECL library please refer to the information available in the [ECL docs](https://github.com/ec-europa/europa-component-library/blob/v2-dev/docs/README.md) The twig implementation of the ECL components is mainly meant to serve [Drupal 8](http://drupal.org) applications, therefore the version of twig in use is `1.x`. EC/EU ----- [](#eceu) ECL is a library used both for EC (European Commission) and EU (European Union) websites, it comes with two sets of distributes resources (css, js) for the two visual identities. Although they may differ in style, in the current v2 version, the HTML markup is the same. ECL-Twig is shipping one single template that can be used while working on both EC and EU websites. Templates are aware of the system (ec/eu) in use because they don't need to be. The ECL-Twig website(s) ----------------------- [](#the-ecl-twig-websites) ECL-Twig is capable of rendering twig templates using both a javascript implementation of twig ([twing](https://github.com/NightlyCommit/twing)) and [twig](https://twig.symfony.com/) as a php package. Two different instances of [Storybook](http://storybookjs.org) are distributed: - [ECL-Twig JS](https://ecl-twig-js.netlify.com) - interactive (renders the twig templates) - [ECL-Twig PHP](https://ecl-twig-php.netlify.com) - static (uses html files rendered through twig php) The two versions EC/EU are available as a separated storybook instance in the two websites, the first page offers a simple choice between the two and a switcher is available in storybook to easily move between the two. ### Browser support [](#browser-support) Unfortunately the ECL-Twig websites are not usable with Internet Explorer, in any version. Also the support to Edge is limited to the latest releases. ECL-Twig components ------------------- [](#ecl-twig-components) The components released by ECL-Twig are node packages containing at least one `.html.twig` file (the component templates) and a `README.md` file with the documentation of the data structure supported by the component and an example of an include code for the template. The [ECL-Twig JS](https://ecl-twig-js.netlify.com) website can be used to customize a component through "knobs". (interactive fields) Such tweaks are reflected in the twig include code example visible in the `notes` tab. The website is also presenting a demo of the `ECL compliance` tool available in the library, in the `validation` tab. Details [![](docs/gifs/blockquote.gif)](docs/gifs/blockquote.gif)Documentation ------------- [](#documentation) Read the technical documentation [on GitHub](docs). Quick start ----------- [](#quick-start) The components provided by the ECL-Twig library are available [on npm](https://www.npmjs.com/package/@ecl-twig/ec-components). - fetch the templates with npm or yarn, e.g. `npm install @ecl-twig/ec-components` or `yarn add @ecl/ecl-twig/ec-components` - include the templates in your application, you will need a `twig loader` capable of identifying the templates using their namespace `ecl-twig`, use the available documentation together with the include code example provided in the `README.md` file of each component. Need help? ---------- [](#need-help) Please contact [COMM Europa Management](mailto:Europamanagement@ec.europa.eu) for support on using this resource for a European Commission or a European Union website. ### Health Score 37 — LowBetter than 83% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity25 Limited adoption so far Community22 Small or concentrated contributor base Maturity72 Established project with proven stability Bus Factor1 Top contributor holds 67.6% 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 ~20 days Recently: every ~47 days Total 35 Last Release 1729d ago Major Versions v2.34.0 → v3.x-dev2020-10-08 ### Community Maintainers ![](https://www.gravatar.com/avatar/caac07a8b3883a140b586c1a6ef963f2b688fbdac6e045b24f5623af5497b30f?d=identicon)[ec-europa](/maintainers/ec-europa) --- Top Contributors [![planctus](https://avatars.githubusercontent.com/u/14326885?v=4)](https://github.com/planctus "planctus (425 commits)")[![yhuard](https://avatars.githubusercontent.com/u/3524389?v=4)](https://github.com/yhuard "yhuard (44 commits)")[![papegaill](https://avatars.githubusercontent.com/u/1289480?v=4)](https://github.com/papegaill "papegaill (32 commits)")[![Joosthe](https://avatars.githubusercontent.com/u/19520352?v=4)](https://github.com/Joosthe "Joosthe (28 commits)")[![emeryro](https://avatars.githubusercontent.com/u/25579221?v=4)](https://github.com/emeryro "emeryro (25 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (23 commits)")[![nimek2](https://avatars.githubusercontent.com/u/26649612?v=4)](https://github.com/nimek2 "nimek2 (15 commits)")[![kalinchernev](https://avatars.githubusercontent.com/u/1923476?v=4)](https://github.com/kalinchernev "kalinchernev (11 commits)")[![gingapa](https://avatars.githubusercontent.com/u/16687167?v=4)](https://github.com/gingapa "gingapa (7 commits)")[![serotonine](https://avatars.githubusercontent.com/u/2045658?v=4)](https://github.com/serotonine "serotonine (5 commits)")[![haringsrob](https://avatars.githubusercontent.com/u/866743?v=4)](https://github.com/haringsrob "haringsrob (5 commits)")[![aritomelo](https://avatars.githubusercontent.com/u/9381722?v=4)](https://github.com/aritomelo "aritomelo (3 commits)")[![pgingao](https://avatars.githubusercontent.com/u/176226?v=4)](https://github.com/pgingao "pgingao (2 commits)")[![degliwe](https://avatars.githubusercontent.com/u/965868?v=4)](https://github.com/degliwe "degliwe (2 commits)")[![ademarco](https://avatars.githubusercontent.com/u/153362?v=4)](https://github.com/ademarco "ademarco (1 commits)")[![libetho](https://avatars.githubusercontent.com/u/19326563?v=4)](https://github.com/libetho "libetho (1 commits)") --- Tags twigcomponentsstorybookeuropean commissionecl ### Embed Badge ![Health badge](/badges/ec-europa-ecl-twig/health.svg) ``` [![Health](https://phpackages.com/badges/ec-europa-ecl-twig/health.svg)](https://phpackages.com/packages/ec-europa-ecl-twig) ``` ### Alternatives [twig/extra-bundle A Symfony bundle for extra Twig extensions 91292.0M315](/packages/twig-extra-bundle)[symfony/ux-twig-component Twig components for Symfony 21814.8M162](/packages/symfony-ux-twig-component)[twig/intl-extra A Twig extension for Intl 36663.2M221](/packages/twig-intl-extra)[symfony/ux-live-component Live components for Symfony 1635.6M72](/packages/symfony-ux-live-component)[area17/blast Storybook for Laravel Blade 308664.1k](/packages/area17-blast)[twig/string-extra A Twig extension for Symfony String 21946.0M133](/packages/twig-string-extra) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)