Yeoman generator to create Custom Elements using Polymer, X-Tag or VanillaJS

Usage no npm install needed!

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


Yeoman Generator Webcomponent

yeoman logo

travis Status Coverage Status license npm version downloads stats issue stats

> A Yeoman Generator that provides a functional boilerplate to easily create Custom Elements using :


First, install Yeoman and generator web component using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-wbelement

Generate your new project:

    $ yo wbelement
    1. What do you want to use?
    2. Which version?
    3. What's the GitHub repository?
    4. What's your GitHub username?
    5. What's the name of your element?
    6. How would you describe the element?
    7. Do you want to include lifecycle callbacks?
    8. Do you want to include some useful Grunt tasks?

Which will generate the following project structure:

├── .editorconfig
├── .gitignore
├── bower.json
├── package.json
├── Gruntfile.js
├── demo/
├── test/my-element-tests.html
└── src/my-element.html

And run bower install & npm install for you to fetch all dependencies.

Command list

  • To test your project

    $ grunt test
  • To build the distribution files before releasing a new version.

    $ grunt build
  • To provide a live demo, send everything to gh-pages branch.

    $ grunt deploy


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request


For detailed changelog, see Releases. This project is a fork updated from webcomponents/generator-element.


Contributor GitHub profile Twitter profile
Eugenio Romano (contributor) Eugenio Romano @RomanoEugenio
Zeno Rocha (creator) Zeno Rocha @zenorocha
Addy Osmani (creator) Addy Osmani @addyosmani

All contributorscontributors.