generator-element 0,0 editorconfig travis-ci npm

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

3 years after

Yeoman Generator
for Custom Elements

NPM version NPM downloads Build Status Dependency Status

WC + Yeoman

A Yeoman Generator that provides a functional boilerplate to easily create Custom Elements using Polymer, X-Tag or VanillaJS.

All templates are based in the boilerplates authored by the team:


Install this generator using NPM:

$ [sudo] npm install -g generator-element

Getting Started


There are two different generators available.

  • The first one used to scaffold out new individual elements:

    $ yo element
    [?] What do you want to use?
    [?] What's the name of your element?
    [?] Do you want to include lifecycle callbacks?

    Which will generate the following file:

    └── my-element.html
  • The second one is used to scaffold an entire project:

    $ yo element:repo
    [?] What do you want to use?
    [?] What's the GitHub repository?
    [?] What's your GitHub username?
    [?] What's the name of your element?
    [?] How would you describe the element?
    [?] Do you want to include lifecycle callbacks?
    [?] Do you want to include some useful Grunt tasks?

    Which will generate the following project structure:

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

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

Note: files will be generated in the current directory, so be sure to change to a new directory before running those commands if you don't want to overwrite existing files.


  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 :D


For detailed changelog, see Releases.


This project is maintained by these people and a bunch of awesome contributors.

Zeno Rocha Addy Rocha
Zeno Rocha Addy Osmani


MIT License ©

Related Repositories



Yeoman generator for AngularJS ...



Polymer element boilerplate ...



Yeoman generator for modular AngularJS apps with Gulp and optional Polymer suppo ...



Yeoman generator for AngularJS using RequireJS and AMD ...



A robust, generic, streaming random json data generator for your data ...

Top Contributors

zenorocha obetomuniz sindresorhus addyosmani mateusortiz arthurvr kentliau zekenie


package version
chalk ^1.0.0
pkg-name ^1.0.0
validate-element-name ^1.0.0
yeoman-generator ^0.19.2
dev mocha *
peer yo >=1.0.0


-   v1.1.0 zip tar
-   v1.0.0 zip tar
-   v0.1.7 zip tar
-   v0.1.6 zip tar
-   v0.1.5 zip tar
-   v0.1.4 zip tar
-   v0.1.3 zip tar
-   v0.1.2 zip tar
-   v0.1.1 zip tar
-   v0.1.0 zip tar