Open Web Components provides a set of defaults, recommendations and tools to help facilitate your web component project. Our recommendations include: developing, linting, testing, building, tooling, demoing, publishing and automating.
# in a new or existing folder: npm init @open-wc # requires node 10 & npm 6 or higher
This will kickstart a menu guiding you through all available actions.
$ npm init @open-wc
npx: installed 30 in 1.762s
_.,,,,,,,,,._
.d'' ``b. Open Web Components Recommendations
.p' Open `q.
.d' Web Components `b. Start or upgrade your web component project with
.d' `b. ease. All our recommendations at your fingertips.
:: ................. ::
`p. .q' See more details at https://open-wc.org/init/
`p. open-wc.org .q'
`b. @openWc .d'
`q.. ..,' Note: you can exit any time with Ctrl+C or Esc
'',,,,,,,,,,''
? What would you like to do today? › - Use arrow-keys. Return to submit.
❯ Scaffold a new project
Upgrade an existing project
For more details please visit us at open-wc.org.
| Package | Version | Description |
|---|---|---|
| building-rollup | building-rollup | Default configuration for working with rollup. |
| create | create | Scaffold web components following open-wc recommendations. |
| demoing-storybook | demoing-storybook | Storybook configuration following open-wc recommendations. |
| eslint-config | eslint-config | Eslint configuration following open-wc recommendations. |
| @web/dev-server | @web/dev-server | Modern development server for web applications, replacing es-dev-server. |
| polyfills-loader | polyfills-loader | Load web component polyfills using dynamic imports. |
| scoped-elements | scoped-elements | Auto define custom elements to scope them and avoid the name collision. |
| semantic-dom-diff | semantic-dom-diff | To compare dom and shadow dom trees. Part of open-wc recommendations. |
| testing | testing | Testing following open-wc recommendations. |
| testing-helpers | testing-helpers | Testing Helpers following open-wc recommendations. |
| testing-karma | testing-karma | Testing with Karma following open-wc recommendations. |
| testing-karma-bs | testing-karma-bs | Testing with Karma using Browserstack following open-wc recommendations. |
| testing-wallaby | testing-wallaby | Testing with wallaby following open-wc recommendations. |
Feel free to reach out to us on X (Twitter) or create a github issue for any feedback or questions you might have.
You can also find us on the Lit & Friends slack in the #open-wc channel.
You can join the Lit & Friends slack by visiting https://lit.dev/slack-invite/.
Chrome's Web Framework & Tools Performance Fund Logo Divriots Logo Browserstack Logo netlify logo# bootstrap/setup npm install # linting npm run lint # local testing npm run test # testing via browserstack npm run test:bs # run commands only for a specific scope lerna run <command> --scope @open-wc/<package-name> --stream