permalink: 'init/index.html' title: Create Open Web Components section: guides tags:
Create Open Web Components
Web component project scaffolding.
npm init @open-wc
npm init requires node 14 & npm 6 or higher
This will kickstart a menu guiding you through all available actions.
$ npm init @open-wc npx: installed 14 in 4.074s _.,,,,,,,,,._ .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
Our generators are very modular you can pick and choose as you see fit.
You may pass options to skip the CLI wizard in part or in whole.
||path||The path the generator will write files to|
||Choose scaffold to create a new project or upgrade to add features to an existing project|
||The type of project to scaffold. wc for a single published component, app for an application|
||Which features to include. linting, testing, demoing, or building|
||Whether to use TypeScript in your project|
||string||The tag name for the web component or app shell element|
||Whether to install dependencies. Choose npm or yarn to install with those package managers, or false to skip installation|
||Whether or not to actually write the files to disk|
||This help message|
These generators help you kickstart a new app or web component. They will create a new folder and set up everything you need to get started immediately.
npm init @open-wc # Select "Scaffold a new project"
Available scaffold generators:
This generator scaffolds a starting point for a web component. We recommend using this generator when you want to develop and publish a single web component.
This generator scaffolds a new starter application. We recommend using this generator at the start of your web component project.
The above generators are the perfect playgrounds to prototype. Add linting, testing, demoing and building whenever the need arises.
cd existing-web-component npm init @open-wc # select "Upgrade an existing project" or add features while scaffolding
Available Upgrade features
This generator adds a complete linting setup with ESLint, Prettier, Husky and commitlint.
This generator adds a complete testing setup with Web Test Runner.
This generator adds a complete demoing setup with Storybook.
This generator adds a complete building setup with Rollup.
For information on how to extend and customize the generator, see the docs page