diff --git a/bin/generate.js b/bin/generate.js
index 42aace25..94b4c093 100755
--- a/bin/generate.js
+++ b/bin/generate.js
@@ -133,6 +133,7 @@ const getVersionData = async () => {
   versions['stylelint'] = await latestVersion('stylelint');
   versions['stylelintConfig'] = await latestVersion('stylelint-config-standard');
   versions['wcSassRender'] = await latestVersion('wc-sass-render');
+  versions['wca'] = await latestVersion('web-component-analyzer');
   versions['webpack'] = await latestVersion('webpack');
   versions['webpackBundleAnalyzer'] = await latestVersion('webpack-bundle-analyzer');
   versions['webpackMerge'] = await latestVersion('webpack-merge');
@@ -190,6 +191,7 @@ const formatTemplateFileContents = (data, content, { name, namespace, npm }) =>
     { regex: /\[stylelint\]/g, value: data.stylelint },
     { regex: /\[stylelintConfig\]/g, value: data.stylelintConfig },
     { regex: /\[wcSassRender\]/g, value: data.wcSassRender },
+    { regex: /\[wca\]/g, value: data.wca },
     { regex: /\[webpackMerge\]/g, value: data.webpackMerge },
     { regex: /\[webpack\]/g, value: data.webpack },
     { regex: /\[webpackDevServer\]/g, value: data.webpackDevServer },
diff --git a/template/docs/api.md b/template/docs/api.md
deleted file mode 100644
index 4665af75..00000000
--- a/template/docs/api.md
+++ /dev/null
@@ -1,5 +0,0 @@
-## Properties: [namespace]-[name]
-
-| Attribute | Value type | Description |
-|----|----|----|
-| attr | string, boolean, function | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
diff --git a/template/package.temp b/template/package.temp
index 46dca288..fd12ec5f 100644
--- a/template/package.temp
+++ b/template/package.temp
@@ -73,6 +73,7 @@
     "stylelint": "^[stylelint]",
     "stylelint-config-standard": "^[stylelintConfig]",
     "wc-sass-render": "^[wcSassRender]",
+    "web-component-analyzer": "^[wca]",
     "webpack": "^[webpack]",
     "webpack-bundle-analyzer": "^[webpackBundleAnalyzer]",
     "webpack-cli": "^[webpackCli]",
@@ -87,10 +88,10 @@
   ],
   "scripts": {
     "build": "npm run ciBuild",
+    "apiBuild": "wca analyze 'src/[namespace]-[name].js' --outFiles docs/api.md",
     "bundler": "webpack --mode=production",
     "bundle:test": "webpack-dev-server --host 0.0.0.0",
     "postinstall": "node packageScripts/postinstall.js",
-    "postinstall:lit": "node scripts/postinstall.js",
     "cssLint": "stylelint './src/*.css'",
     "dev": "npm run sassBuild:watch",
     "distJS": "copyfiles -u 1 -V './src/**/*.js' ./dist",
@@ -102,7 +103,7 @@
     "test:watch": "karma start --auto-watch=true --single-run=false",
     "test:ci": "npm-run-all test lint",
     "test:yaml": "yamllint .travis.yml",
-    "ciBuild": "npm-run-all sassBuild sassRender cssLint distJS bundler postinstall",
+    "ciBuild": "npm-run-all sassBuild sassRender cssLint distJS bundler postinstall apiBuild",
     "sassBuild": "npm-run-all sassBuild:demo sassBuild:component postCss:component sassRender",
     "sassBuild:dev": "npm-run-all sassBuild:demo sassBuild:component postCss:component sassRender",
     "sassBuild:demo": "node-sass ./demo/sass/ --output ./demo/css/",
diff --git a/template/src/[namespace]-[name].js b/template/src/[namespace]-[name].js
index ec2e59c0..7f552613 100644
--- a/template/src/[namespace]-[name].js
+++ b/template/src/[namespace]-[name].js
@@ -9,6 +9,13 @@ import { LitElement, html, css } from "lit-element";
 import "focus-visible/dist/focus-visible.min.js";
 import styleCss from "./style-css.js";
 
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * [namespace]-[name] provides users a way to ...
+ *
+ * @attr {String} cssClass - Applies designated CSS class to DOM element.
+ */
+
 // build the component class
 class [Namespace][Name] extends LitElement {
   // constructor() {