Distributing web components built with Stencil

Stencil makes it easy to build and share web components across any framework.

Getting Started

The easiest way to build and distribute web components with Stencil is by using our stencil-component-starter. This starter includes all of the config and package.json changes that are discussed below by default with instructions in the readme.

Distribution Config

Configuring Stencil for distribution is easy. Simply set the following config options in the stencil.config.js file:

exports.config = {
  namespace: 'myname',
  generateDistribution: true,
  generateWWW: false,
  ...
};

Learn more about these config options here.

You also need to add the following to your package.json:

{
  "main": "dist/collection/index.js",
  "types": "dist/collection/index.d.ts",
  "collection": "dist/collection/collection-manifest.json",
  "files": [
    "dist/"
  ],
  "browser": "dist/myname.js",
  ...
}

Using your component in a framework

There are three strategies we recommend for using web components built with Stencil.

The first step for all three of these strategies is to Publish to NPM.

Script tag

Node Modules

In a stencil-app-starter app