Quickly scaffold lightweight web components with Yeoman, with just what's needed and none of the cruft. Built against the v1 Web Components spec.
- Generate standalone projects for distribution, or single file elements inside your own apps
- Choose whether to bundle a framework like Polymer or build barebones
- Optionally include Shadow DOM template boilerplate
- Standalone projects come with a basic testing setup via Web Component Tester and a beautiful demo page served with browsersync
Check out the files in
app/templates in this repo for a better idea of what you'll get.
Installation & usage
Install Yeoman and the component generator with NPM or Yarn
$ npm i -g yo generator-web-component
Then run it
$ yo web-component
Components for apps
To create a new web component for use inside an existing project, select
'Part of an app' when prompted. This will generate a single HTML file under the name of your element with the bare minimum of boilerplate.
To create a standalone element project in its own repo, select
'Standalone' when prompted. This will scaffold out a modern Web Component project, including a lightweight testing setup, a beautiful demo page, and standard config files.
It's recommended to build your element as an ES6 class directly in the
The following NPM scripts will be configured for you:
||Runs your WCT test suite in local browsers|
||Runs Eslint after tests (eg: for Travis)|
||Runs a demo server (with Browsersync) which reloads whenever you make changes in your component|
Run the scripts with NPM
$ npm run demo
The demo server is available on
There are a few more options that should be added to this generator, if you'd like to contribute a PR adding any of these features I'll gladly merge it!
- Add optional (and configurable) buildstep (issue)
- Rollup module bundling
- PostCSS + Autoprefixer
- Add SkateJS framework option (issue)
- Bundle Yeoman and Browsersync into
web-component-cli? In similar vein to
polymer-clibut not tied to a framework
MIT © Sean King