A generator for a Twig Component library that uses Webpack.

Usage no npm install needed!

<script type="module">
  import generatorTwigComponentsWebpack from '';


npm Build Status

Twig Components: Webpack Generator

This project provides a Yeoman generator for new Twig Component libraries.


npm install -g yo
npm install -g generator-twig-components-webpack


To generate a new component library, run yo twig-components-webpack.

If you prefer to use npx, run npx -p yo -p generator-twig-components-webpack yo twig-components-webpack.

Adding new components to a library

Adding new components can be done by running yo twig-components-webpack:add from the component library directory. This process is fully interactive, adding new documentation, includes, and files for a basic Twig Component.

Removing components from the library

To remove a component from the library, delete the source folder (ex: ./src/components/proper-name), then any documentation from index.html.

If you wrote tests for this component, they will also need to be removed from test/base.html.

Test coverage included in library

Test coverage is provided by default in generated libraries, using web-component-tester.

The default test for the proper-name element is located in test/base.html. A default .travis.yml file is also provided and should work out of the box.

New coverage is not added automatically with yo twig-components-webpack:add, so you'll have to add it yourself. Documentation for web-component-tester is quite good, but if you have any questions feel free to file an issue.

More about the build

Please read the generated for documentation for the generated component library.

Running tests

You can run tests for this project with npm run test. Tests are located in the __tests__ directory, and written with the Yeoman test helper packages. See the Yeoman documentation for more information about writing tests.


  • Create a sub-generator for adding new components
  • Write test coverage
  • Add test coverage to generated library