diff --git a/.eslintrc.json b/.eslintrc.json
index 171f4b7..4928a99 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -20,6 +20,7 @@
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
     "import/extensions": "off",
+    "import/no-import-module-exports": "off",
     "import/no-unresolved": "off",
     "import/prefer-default-export": "off",
     "lit/no-template-map": "off",
diff --git a/.gitignore b/.gitignore
index c419900..5d2f79f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ node_modules
 /lib
 /dist
 entrypoint.hashmanifest.json
+custom-elements.json
diff --git a/README.md b/README.md
index bf5d1f4..396d860 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # <api-viewer>
 
-API documentation and live playground for Web Components. Based on [web-component-analyzer](https://github.com/runem/web-component-analyzer) JSON format.
+API documentation and live playground for Web Components. Based on [custom elements manifest](https://github.com/webcomponents/custom-elements-manifest) JSON format.
 
 ```html
 <api-viewer src="./custom-elements.json"></api-viewer>
@@ -42,18 +42,20 @@ Or grab from [unpkg.com CDN](https://unpkg.com/api-viewer-element?module):
 
 ## Usage
 
-1. Install [web-component-analyzer](https://github.com/runem/web-component-analyzer):
+1. Install [custom elements manifest analyzer](https://custom-elements-manifest.open-wc.org/analyzer/getting-started/):
 
 ```sh
-$ npm install -g web-component-analyzer
+$ npm install @custom-elements-manifest/analyzer
 ```
 
-2. Analyze your components using `--format json`:
+2. Analyze your components:
 
 ```sh
-$ wca analyze my-element.js --outFile custom-elements.json --format json
+$ cem analyze my-element.js
 ```
 
+Read the [docs](https://custom-elements-manifest.open-wc.org) for more information on how to use the analyzer.
+
 3. Create an HTML file and import the component:
 
 ```html
@@ -179,17 +181,17 @@ Use `exclude-knobs` attribute to exclude properties from demo:
 <api-viewer src="./custom-elements.json" exclude-knobs="autofocus,items"></api-viewer>
 ```
 
-#### `elements`
+#### `manifest`
 
-Use `elements` property instead of `src` to pass data directly:
+Use `manifest` property instead of `src` to pass manifest data directly:
 
 ```html
 <api-viewer></api-viewer>
 <script>
   fetch('./custom-elements.json')
     .then(res => res.json())
-    .then(data => {
-      document.querySelector('api-viewer').elements = data.tags;
+    .then(manifest => {
+      document.querySelector('api-viewer').manifest = manifest;
     });
 </script>
 ```
@@ -374,7 +376,7 @@ npm run serve:dist
 
 ## Acknowledgements
 
-- Big thanks to [@runem](http://github.com/runem) for creating Web Component Analyzer.
+- Big thanks to [@runem](http://github.com/runem) for creating Web Component Analyzer, which previous versions of this package were based on.
 - Thanks to [@bahrus](https://github.com/bahrus) for [wc-info](https://github.com/bahrus/wc-info) component which inspired me.
 - The visual appearance is largely inspired by [Vuetify](https://vuetifyjs.com/en/getting-started/quick-start) API docs.
 - The tabs component is based on the [howto-tabs](https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs) example.
diff --git a/demo/styles.css b/assets/styles.css
similarity index 100%
rename from demo/styles.css
rename to assets/styles.css
diff --git a/custom-elements.json b/custom-elements.json
deleted file mode 100644
index 98d3215..0000000
--- a/custom-elements.json
+++ /dev/null
@@ -1,267 +0,0 @@
-{
-  "version": "experimental",
-  "tags": [
-    {
-      "name": "expansion-panel",
-      "path": "./src/fixtures/expansion-panel.ts",
-      "description": "A custom element similar to the HTML5 `<details>` element.",
-      "attributes": [
-        {
-          "name": "opened",
-          "description": "When true, the panel content is expanded and visible",
-          "type": "boolean | null | undefined",
-          "default": "false"
-        },
-        {
-          "name": "disabled",
-          "description": "Disabled panel can not be expanded or collapsed",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "focused",
-          "description": "State attribute set when element has focus.",
-          "type": "boolean"
-        },
-        {
-          "name": "focus-ring",
-          "description": "State attribute set when focused from keyboard.",
-          "type": "boolean"
-        }
-      ],
-      "properties": [
-        {
-          "name": "opened",
-          "attribute": "opened",
-          "description": "When true, the panel content is expanded and visible",
-          "type": "boolean | null | undefined",
-          "default": "false"
-        },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Disabled panel can not be expanded or collapsed",
-          "type": "boolean",
-          "default": "false"
-        }
-      ],
-      "events": [
-        {
-          "name": "opened-changed",
-          "description": "Event fired when expanding / collapsing"
-        }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "description": "Slot fot panel content"
-        },
-        {
-          "name": "header",
-          "description": "Slot for panel header"
-        }
-      ],
-      "cssProperties": [
-        {
-          "name": "--panel-header-background",
-          "description": "Default panel header background color.",
-          "type": "Background",
-          "default": "\"#fff\""
-        },
-        {
-          "name": "--panel-header-min-height",
-          "description": "Panel header minimum height.",
-          "default": "\"48px\""
-        },
-        {
-          "name": "--panel-ripple-background",
-          "description": "Active toggle button ripple background.",
-          "type": "Background",
-          "default": "\"rgba(0, 0, 0, 0.38)\""
-        }
-      ],
-      "cssParts": [
-        {
-          "name": "header",
-          "description": "An element wrapping the `header` slot."
-        },
-        {
-          "name": "toggle",
-          "description": "A toggle button, child of the header part."
-        },
-        {
-          "name": "content",
-          "description": "An element wrapping the `content` slot."
-        }
-      ]
-    },
-    {
-      "name": "fancy-accordion",
-      "path": "./src/fixtures/fancy-accordion.ts",
-      "description": "A custom element implementing the accordion widget: a vertically stacked set of expandable panels\nthat wraps several instances of the `<expansion-panel>` element. Only one panel can be opened\n(expanded) at a time.\n\nPanel headings function as controls that enable users to open (expand) or hide (collapse) their\nassociated sections of content. The user can toggle panels by mouse click, Enter and Space keys.\n\nThe component supports keyboard navigation and is aligned with the\n[WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion).",
-      "attributes": [
-        {
-          "name": "opened-index",
-          "description": "Index of the currently opened panel. By default all the panels are closed.\nOnly one panel can be opened at the same time. Setting `null` or `undefined`\ncloses all the accordion panels.",
-          "type": "number | null | undefined"
-        }
-      ],
-      "properties": [
-        {
-          "name": "openedIndex",
-          "attribute": "opened-index",
-          "description": "Index of the currently opened panel. By default all the panels are closed.\nOnly one panel can be opened at the same time. Setting `null` or `undefined`\ncloses all the accordion panels.",
-          "type": "number | null | undefined"
-        },
-        {
-          "name": "focused",
-          "type": "Element | null"
-        }
-      ],
-      "events": [
-        {
-          "name": "opened-index-changed",
-          "description": "Event fired when changing currently opened panel."
-        }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "description": "Slot fot panel elements."
-        }
-      ]
-    },
-    {
-      "name": "intl-currency",
-      "path": "./src/fixtures/intl-currency.ts",
-      "description": "A custom element that formats currency using Intl.",
-      "attributes": [
-        {
-          "name": "value",
-          "description": "Amount to be formatted.",
-          "type": "number",
-          "default": "0"
-        },
-        {
-          "name": "currency",
-          "description": "Currency code used for formatting.",
-          "type": "string | null | undefined",
-          "default": "\"EUR\""
-        },
-        {
-          "name": "locale",
-          "description": "Locale code used for formatting.",
-          "type": "string | null | undefined",
-          "default": "\"en-GB\""
-        }
-      ],
-      "properties": [
-        {
-          "name": "value",
-          "attribute": "value",
-          "description": "Amount to be formatted.",
-          "type": "number",
-          "default": "0"
-        },
-        {
-          "name": "currency",
-          "attribute": "currency",
-          "description": "Currency code used for formatting.",
-          "type": "string | null | undefined",
-          "default": "\"EUR\""
-        },
-        {
-          "name": "locale",
-          "attribute": "locale",
-          "description": "Locale code used for formatting.",
-          "type": "string | null | undefined",
-          "default": "\"en-GB\""
-        }
-      ]
-    },
-    {
-      "name": "progress-bar",
-      "path": "./src/fixtures/progress-bar.ts",
-      "description": "A custom element similar to the HTML5 `<progress>` element.",
-      "attributes": [
-        {
-          "name": "value",
-          "description": "Current progress value.",
-          "type": "number",
-          "default": "0.5"
-        },
-        {
-          "name": "min",
-          "description": "Minimum bound of the progress bar.",
-          "type": "number",
-          "default": "0"
-        },
-        {
-          "name": "max",
-          "description": "Maximum bound of the progress bar.",
-          "type": "number",
-          "default": "1"
-        },
-        {
-          "name": "indeterminate",
-          "description": "Indeterminate state of the progress bar.\nThis property takes precedence over other state properties (min, max, value).",
-          "type": "boolean",
-          "default": "false"
-        }
-      ],
-      "properties": [
-        {
-          "name": "value",
-          "attribute": "value",
-          "description": "Current progress value.",
-          "type": "number",
-          "default": "0.5"
-        },
-        {
-          "name": "min",
-          "attribute": "min",
-          "description": "Minimum bound of the progress bar.",
-          "type": "number",
-          "default": "0"
-        },
-        {
-          "name": "max",
-          "attribute": "max",
-          "description": "Maximum bound of the progress bar.",
-          "type": "number",
-          "default": "1"
-        },
-        {
-          "name": "indeterminate",
-          "attribute": "indeterminate",
-          "description": "Indeterminate state of the progress bar.\nThis property takes precedence over other state properties (min, max, value).",
-          "type": "boolean",
-          "default": "false"
-        }
-      ],
-      "cssProperties": [
-        {
-          "name": "--progress-bar-fill-color",
-          "description": "Color of the filled progress bar part.",
-          "type": "Color",
-          "default": "\"#6200ee\""
-        },
-        {
-          "name": "--progress-bar-opacity",
-          "description": "Opacity set on the underlying track.",
-          "default": "0.16"
-        }
-      ],
-      "cssParts": [
-        {
-          "name": "bar",
-          "description": "A progress bar background."
-        },
-        {
-          "name": "value",
-          "description": "A progress bar foreground."
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index cac1e05..c46c5cc 100755
--- a/index.html
+++ b/index.html
@@ -58,7 +58,7 @@
       }
     }
   </style>
-  <link rel="stylesheet" href="./demo/styles.css">
+  <link rel="stylesheet" href="./assets/styles.css">
 </head>
 <body>
   <nav>
@@ -70,7 +70,7 @@
 
   <section id="api-viewer" class="initial">
     <h2>&lt;api-viewer&gt; element</h2>
-    <api-viewer src="./custom-elements.json">
+    <api-viewer src="./assets/custom-elements.json">
       <template data-element="expansion-panel" data-target="knob" data-attr="dir" data-type="select">
         <select>
           <option value=""></option>
@@ -111,12 +111,12 @@ <h2>&lt;api-viewer&gt; element</h2>
 
   <section id="api-docs">
     <h2>&lt;api-docs&gt; element</h2>
-    <api-docs src="./custom-elements.json"></api-docs>
+    <api-docs src="./assets/custom-elements.json"></api-docs>
   </section>
 
   <section id="api-demo">
     <h2>&lt;api-demo&gt; element</h2>
-    <api-demo src="./custom-elements.json">
+    <api-demo src="./assets/custom-elements.json">
       <template data-element="expansion-panel" data-target="knob" data-attr="dir" data-type="select">
         <select>
           <option value=""></option>
@@ -158,7 +158,7 @@ <h2>&lt;api-demo&gt; element</h2>
   <template id="parts">
     <section id="shadow-parts" class="parts">
       <h2>CSS shadow parts</h2>
-      <api-viewer src="./custom-elements.json" class="custom">
+      <api-viewer src="./assets/custom-elements.json" class="custom">
         <template data-element="expansion-panel" data-target="knob" data-attr="dir" data-type="select">
           <select>
             <option value=""></option>
diff --git a/package-lock.json b/package-lock.json
index 9afd076..d276a7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@types/dompurify": "^2.3.1",
         "@types/marked": "^4.0.0",
+        "custom-elements-manifest": "^1.0.0",
         "dompurify": "^2.3.3",
         "highlight-ts": "9.12.1-2",
         "lit": "^2.0.0",
@@ -18,6 +19,7 @@
         "tslib": "^2.3.1"
       },
       "devDependencies": {
+        "@custom-elements-manifest/analyzer": "^0.5.7",
         "@rollup/plugin-node-resolve": "^11.0.0",
         "@size-limit/preset-small-lib": "^6.0.4",
         "@typescript-eslint/eslint-plugin": "^5.3.1",
@@ -367,6 +369,72 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "node_modules/@custom-elements-manifest/analyzer": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@custom-elements-manifest/analyzer/-/analyzer-0.5.7.tgz",
+      "integrity": "sha512-pKQM0dAUPAaoAWJvPSpFtxAc1/pi0xb8wKYSUJbCBYwWA5L8vf/UowDaV0m9G3CtbiqkHI/4eKzFAqE14iY6vg==",
+      "dev": true,
+      "dependencies": {
+        "@web/config-loader": "0.1.3",
+        "chokidar": "3.5.2",
+        "command-line-args": "5.1.2",
+        "comment-parser": "1.2.4",
+        "custom-elements-manifest": "1.0.0",
+        "debounce": "1.2.1",
+        "globby": "11.0.4",
+        "typescript": "~4.3.2"
+      },
+      "bin": {
+        "cem": "index.js",
+        "custom-elements-manifest": "index.js"
+      }
+    },
+    "node_modules/@custom-elements-manifest/analyzer/node_modules/array-back": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/array-back/-/array-back-6.2.0.tgz",
+      "integrity": "sha512-mixVv03GOOn/ubHE4STQ+uevX42ETdk0JoMVEjNkSOCT7WgERh7C8/+NyhWYNpE3BN69pxFyJIBcF7CxWz/+4A==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
+    "node_modules/@custom-elements-manifest/analyzer/node_modules/command-line-args": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.1.2.tgz",
+      "integrity": "sha512-fytTsbndLbl+pPWtS0CxLV3BEWw9wJayB8NnU2cbQqVPsNdYezQeT+uIQv009m+GShnMNyuoBrRo8DTmuTfSCA==",
+      "dev": true,
+      "dependencies": {
+        "array-back": "^6.1.2",
+        "find-replace": "^3.0.0",
+        "lodash.camelcase": "^4.3.0",
+        "typical": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/@custom-elements-manifest/analyzer/node_modules/typescript": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
+      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/@custom-elements-manifest/analyzer/node_modules/typical": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
+      "integrity": "sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz",
@@ -2708,6 +2776,15 @@
         "node": ">= 12"
       }
     },
+    "node_modules/comment-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.2.4.tgz",
+      "integrity": "sha512-pm0b+qv+CkWNriSTMsfnjChF9kH0kxz55y44Wo5le9qLxMj5xDQAaEd9ZN1ovSuk9CsrncWaFwgpOMg7ClJwkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
     "node_modules/component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
@@ -3111,12 +3188,16 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/custom-elements-manifest": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",
+      "integrity": "sha512-j59k0ExGCKA8T6Mzaq+7axc+KVHwpEphEERU7VZ99260npu/p/9kd+Db+I3cGKxHkM5y6q5gnlXn00mzRQkX2A=="
+    },
     "node_modules/debounce": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
-      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==",
-      "dev": true,
-      "license": "MIT"
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+      "dev": true
     },
     "node_modules/debug": {
       "version": "4.3.2",
@@ -11751,6 +11832,54 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@custom-elements-manifest/analyzer": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@custom-elements-manifest/analyzer/-/analyzer-0.5.7.tgz",
+      "integrity": "sha512-pKQM0dAUPAaoAWJvPSpFtxAc1/pi0xb8wKYSUJbCBYwWA5L8vf/UowDaV0m9G3CtbiqkHI/4eKzFAqE14iY6vg==",
+      "dev": true,
+      "requires": {
+        "@web/config-loader": "0.1.3",
+        "chokidar": "3.5.2",
+        "command-line-args": "5.1.2",
+        "comment-parser": "1.2.4",
+        "custom-elements-manifest": "1.0.0",
+        "debounce": "1.2.1",
+        "globby": "11.0.4",
+        "typescript": "~4.3.2"
+      },
+      "dependencies": {
+        "array-back": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/array-back/-/array-back-6.2.0.tgz",
+          "integrity": "sha512-mixVv03GOOn/ubHE4STQ+uevX42ETdk0JoMVEjNkSOCT7WgERh7C8/+NyhWYNpE3BN69pxFyJIBcF7CxWz/+4A==",
+          "dev": true
+        },
+        "command-line-args": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.1.2.tgz",
+          "integrity": "sha512-fytTsbndLbl+pPWtS0CxLV3BEWw9wJayB8NnU2cbQqVPsNdYezQeT+uIQv009m+GShnMNyuoBrRo8DTmuTfSCA==",
+          "dev": true,
+          "requires": {
+            "array-back": "^6.1.2",
+            "find-replace": "^3.0.0",
+            "lodash.camelcase": "^4.3.0",
+            "typical": "^4.0.0"
+          }
+        },
+        "typescript": {
+          "version": "4.3.5",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
+          "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
+          "dev": true
+        },
+        "typical": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
+          "integrity": "sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==",
+          "dev": true
+        }
+      }
+    },
     "@discoveryjs/json-ext": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz",
@@ -13529,6 +13658,12 @@
       "integrity": "sha512-LLKxDvHeL91/8MIyTAD5BFMNtoIwztGPMiM/7Bl8rIPmHCZXRxmSWr91h57dpOpnQ6jIUqEWdXE/uBYMfiVZDA==",
       "dev": true
     },
+    "comment-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.2.4.tgz",
+      "integrity": "sha512-pm0b+qv+CkWNriSTMsfnjChF9kH0kxz55y44Wo5le9qLxMj5xDQAaEd9ZN1ovSuk9CsrncWaFwgpOMg7ClJwkw==",
+      "dev": true
+    },
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
@@ -13798,10 +13933,15 @@
         "css-tree": "^1.1.2"
       }
     },
+    "custom-elements-manifest": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",
+      "integrity": "sha512-j59k0ExGCKA8T6Mzaq+7axc+KVHwpEphEERU7VZ99260npu/p/9kd+Db+I3cGKxHkM5y6q5gnlXn00mzRQkX2A=="
+    },
     "debounce": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
-      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
       "dev": true
     },
     "debug": {
diff --git a/package.json b/package.json
index 8c9e58b..fc2af25 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,9 @@
   "version": "0.5.0",
   "description": "Web Components API viewer element",
   "author": "Serhii Kulykov <iamkulykov@gmail.com>",
+  "contributors": [
+    "Benny Powers <web@bennypowers.com>"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,16 +26,18 @@
   ],
   "main": "lib/api-viewer.js",
   "module": "lib/api-viewer.js",
+  "customElements": "custom-elements.json",
   "scripts": {
+    "analyze": "cem analyze --litelement --globs 'src/*.ts' --exclude 'src/fixtures/*'",
     "build": "tsc",
     "dev": "npm run watch & npm run serve",
-    "dist": "rimraf dist && rollup -c rollup.config.js && npm run fixtures && cp custom-elements.json dist",
-    "fixtures": "wca analyze src/fixtures/*.ts --format json --outFile custom-elements.json",
+    "dist": "rimraf dist && rollup -c rollup.config.js && npm run fixtures && cp assets/custom-elements.json dist/assets",
+    "fixtures": "cem analyze --litelement --outdir assets --globs 'src/fixtures/*.ts'",
     "lint:css": "stylelint src/**/*.ts",
     "lint:eslint": "eslint src --ext .ts",
     "lint:lit": "lit-analyzer src --strict",
     "lint": "npm-run-all --parallel lint:*",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "run-s build analyze",
     "serve": "web-dev-server --node-resolve",
     "serve:dist": "web-dev-server --app-index dist/index.html --open",
     "size": "size-limit",
@@ -40,12 +45,14 @@
     "watch": "tsc-watch"
   },
   "files": [
+    "custom-elements.json",
     "lib",
     "!lib/fixtures"
   ],
   "dependencies": {
     "@types/dompurify": "^2.3.1",
     "@types/marked": "^4.0.0",
+    "custom-elements-manifest": "^1.0.0",
     "dompurify": "^2.3.3",
     "highlight-ts": "9.12.1-2",
     "lit": "^2.0.0",
@@ -53,6 +60,7 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.5.7",
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@size-limit/preset-small-lib": "^6.0.4",
     "@typescript-eslint/eslint-plugin": "^5.3.1",
diff --git a/src/api-demo-base.ts b/src/api-demo-base.ts
index 66dc09d..e71260f 100644
--- a/src/api-demo-base.ts
+++ b/src/api-demo-base.ts
@@ -1,25 +1,34 @@
 import { LitElement, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { until } from 'lit/directives/until.js';
-import { ElementPromise } from './lib/types.js';
-import { getElementData } from './lib/utils.js';
+import {
+  CustomElement,
+  getCustomElements,
+  getElementData,
+  getPublicFields,
+  hasCustomElements,
+  Package
+} from './lib/manifest.js';
 import { ApiViewerMixin, emptyDataWarning } from './api-viewer-mixin.js';
 import './api-viewer-demo.js';
 
 async function renderDemo(
-  jsonFetched: ElementPromise,
+  jsonFetched: Promise<Package | null>,
   onSelect: (e: CustomEvent) => void,
   selected?: string,
   id?: number,
   exclude = ''
 ): Promise<TemplateResult> {
-  const elements = await jsonFetched;
+  const manifest = await jsonFetched;
 
-  if (!elements.length) {
+  if (!hasCustomElements(manifest)) {
     return emptyDataWarning;
   }
 
-  const data = getElementData(elements, selected);
+  const elements = getCustomElements(manifest);
+
+  const data = getElementData(manifest, selected) as CustomElement;
+  const props = getPublicFields(data.members);
 
   return html`
     <header part="header">
@@ -41,10 +50,10 @@ async function renderDemo(
     </header>
     <api-viewer-demo
       .tag=${data.name}
-      .props=${data.properties}
-      .slots=${data.slots}
-      .events=${data.events}
-      .cssProps=${data.cssProperties}
+      .props=${props}
+      .events=${data.events ?? []}
+      .slots=${data.slots ?? []}
+      .cssProps=${data.cssProperties ?? []}
       .exclude=${exclude}
       .vid=${id}
     ></api-viewer-demo>
diff --git a/src/api-docs-base.ts b/src/api-docs-base.ts
index 9d5bb11..ea65516 100644
--- a/src/api-docs-base.ts
+++ b/src/api-docs-base.ts
@@ -1,23 +1,32 @@
 import { LitElement, html, TemplateResult } from 'lit';
 import { until } from 'lit/directives/until.js';
 import { parse } from './lib/markdown.js';
-import { ElementPromise } from './lib/types.js';
-import { getElementData } from './lib/utils.js';
+import {
+  CustomElement,
+  getCustomElements,
+  getElementData,
+  getPublicFields,
+  hasCustomElements,
+  Package
+} from './lib/manifest.js';
 import { ApiViewerMixin, emptyDataWarning } from './api-viewer-mixin.js';
 import './api-viewer-docs.js';
 
 async function renderDocs(
-  jsonFetched: ElementPromise,
+  jsonFetched: Promise<Package | null>,
   onSelect: (e: CustomEvent) => void,
   selected?: string
 ): Promise<TemplateResult> {
-  const elements = await jsonFetched;
+  const manifest = await jsonFetched;
 
-  if (!elements.length) {
+  if (!hasCustomElements(manifest)) {
     return emptyDataWarning;
   }
 
-  const data = getElementData(elements, selected);
+  const elements = getCustomElements(manifest);
+
+  const data = getElementData(manifest, selected) as CustomElement;
+  const props = getPublicFields(data.members);
 
   return html`
     <header part="header">
@@ -42,12 +51,12 @@ async function renderDocs(
     </div>
     <api-viewer-docs
       .name=${data.name}
-      .props=${data.properties}
-      .attrs=${data.attributes}
-      .events=${data.events}
-      .slots=${data.slots}
-      .cssParts=${data.cssParts}
-      .cssProps=${data.cssProperties}
+      .props=${props}
+      .attrs=${data.attributes ?? []}
+      .events=${data.events ?? []}
+      .slots=${data.slots ?? []}
+      .cssParts=${data.cssParts ?? []}
+      .cssProps=${data.cssProperties ?? []}
     ></api-viewer-docs>
   `;
 }
diff --git a/src/api-viewer-base.ts b/src/api-viewer-base.ts
index e01e62b..c9c68fc 100644
--- a/src/api-viewer-base.ts
+++ b/src/api-viewer-base.ts
@@ -3,14 +3,21 @@ import { property } from 'lit/decorators/property.js';
 import { cache } from 'lit/directives/cache.js';
 import { until } from 'lit/directives/until.js';
 import { parse } from './lib/markdown.js';
-import { ElementPromise } from './lib/types.js';
-import { getElementData, setTemplates } from './lib/utils.js';
+import {
+  CustomElement,
+  getCustomElements,
+  getElementData,
+  getPublicFields,
+  hasCustomElements,
+  Package
+} from './lib/manifest.js';
+import { setTemplates } from './lib/utils.js';
 import { ApiViewerMixin, emptyDataWarning } from './api-viewer-mixin.js';
 import './api-viewer-docs.js';
 import './api-viewer-demo.js';
 
 async function renderDocs(
-  jsonFetched: ElementPromise,
+  jsonFetched: Promise<Package | null>,
   section: string,
   onSelect: (e: CustomEvent) => void,
   onToggle: (e: CustomEvent) => void,
@@ -18,13 +25,16 @@ async function renderDocs(
   id?: number,
   exclude = ''
 ): Promise<TemplateResult> {
-  const elements = await jsonFetched;
+  const manifest = await jsonFetched;
 
-  if (!elements.length) {
+  if (!hasCustomElements(manifest)) {
     return emptyDataWarning;
   }
 
-  const data = getElementData(elements, selected);
+  const elements = getCustomElements(manifest);
+
+  const data = getElementData(manifest, selected) as CustomElement;
+  const props = getPublicFields(data.members);
 
   return html`
     <header part="header">
@@ -72,21 +82,21 @@ async function renderDocs(
             </div>
             <api-viewer-docs
               .name=${data.name}
-              .props=${data.properties}
-              .attrs=${data.attributes}
-              .events=${data.events}
-              .slots=${data.slots}
-              .cssParts=${data.cssParts}
-              .cssProps=${data.cssProperties}
+              .props=${props}
+              .attrs=${data.attributes ?? []}
+              .events=${data.events ?? []}
+              .slots=${data.slots ?? []}
+              .cssParts=${data.cssParts ?? []}
+              .cssProps=${data.cssProperties ?? []}
             ></api-viewer-docs>
           `
         : html`
             <api-viewer-demo
               .tag=${data.name}
-              .props=${data.properties}
-              .slots=${data.slots}
-              .events=${data.events}
-              .cssProps=${data.cssProperties}
+              .props=${props}
+              .events=${data.events ?? []}
+              .slots=${data.slots ?? []}
+              .cssProps=${data.cssProperties ?? []}
               .exclude=${exclude}
               .vid=${id}
             ></api-viewer-demo>
diff --git a/src/api-viewer-demo.ts b/src/api-viewer-demo.ts
index cea09ca..757d993 100644
--- a/src/api-viewer-demo.ts
+++ b/src/api-viewer-demo.ts
@@ -7,10 +7,12 @@ import { StylesController } from './controllers/styles-controller.js';
 import { renderEvents } from './lib/demo-events.js';
 import { renderSnippet } from './lib/demo-snippet.js';
 import {
+  ComponentWithProps,
   getCustomKnobs,
   getInitialKnobs,
   getKnobs,
-  Knob
+  Knob,
+  KnobValue
 } from './lib/knobs.js';
 import { renderer } from './lib/renderer.js';
 import {
@@ -19,15 +21,8 @@ import {
   renderKnobs,
   slotRenderer
 } from './lib/demo-controls.js';
-import {
-  ComponentWithProps,
-  CSSPropertyInfo,
-  EventInfo,
-  PropertyInfo,
-  PropertyValue,
-  SlotInfo
-} from './lib/types.js';
-import { hasTemplate, isPropMatch, TemplateTypes } from './lib/utils.js';
+import { ClassField, CssCustomProperty, Event, Slot } from './lib/manifest.js';
+import { hasTemplate, TemplateTypes } from './lib/utils.js';
 import './api-viewer-panel.js';
 import './api-viewer-tab.js';
 import './api-viewer-tabs.js';
@@ -36,31 +31,31 @@ class ApiViewerDemo extends LitElement {
   @property() copyBtnText = 'copy';
 
   @property({ attribute: false })
-  cssProps: CSSPropertyInfo[] = [];
+  cssProps: CssCustomProperty[] = [];
 
   @property({ attribute: false })
-  events: EventInfo[] = [];
+  events: Event[] = [];
 
   @property({ attribute: false })
-  slots: SlotInfo[] = [];
+  slots: Slot[] = [];
 
   @property() tag = '';
 
   @property({ attribute: false })
-  props: PropertyInfo[] = [];
+  props: ClassField[] = [];
 
   @property() exclude = '';
 
   @property({ type: Number }) vid?: number;
 
   @property({ attribute: false })
-  customKnobs!: Knob<PropertyInfo>[];
+  customKnobs!: Knob<ClassField>[];
 
   @property({ attribute: false })
   knobs!: Record<string, Knob>;
 
   @property({ attribute: false })
-  propKnobs!: Knob<PropertyInfo>[];
+  propKnobs!: Knob<ClassField>[];
 
   private _whenDefined: Record<string, Promise<unknown>> = {};
 
@@ -300,14 +295,15 @@ class ApiViewerDemo extends LitElement {
   }
 
   getKnob(name: string): {
-    knob: Knob<PropertyInfo>;
+    knob: Knob<ClassField>;
     custom?: boolean;
   } {
-    const isMatch = isPropMatch(name);
+    const isMatch = (prop: Knob<ClassField>): boolean =>
+      prop.name === name || prop.attribute === name;
     let knob = this.propKnobs.find(isMatch);
     let custom = false;
     if (!knob) {
-      knob = this.customKnobs.find(isMatch) as Knob<PropertyInfo>;
+      knob = this.customKnobs.find(isMatch) as Knob<ClassField>;
       custom = true;
     }
     return { knob, custom };
@@ -316,7 +312,7 @@ class ApiViewerDemo extends LitElement {
   private setKnobs(
     name: string,
     knobType: string,
-    value: PropertyValue,
+    value: KnobValue,
     attribute: string | undefined,
     custom = false
   ): void {
@@ -331,7 +327,7 @@ class ApiViewerDemo extends LitElement {
     };
   }
 
-  syncKnob(component: Element, changed: Knob<PropertyInfo>): void {
+  syncKnob(component: Element, changed: Knob<ClassField>): void {
     const { name, knobType, attribute } = changed;
     const value = (component as unknown as ComponentWithProps)[name];
 
@@ -353,7 +349,7 @@ class ApiViewerDemo extends LitElement {
     this.stylesController.setValue(target.dataset.name as string, target.value);
   }
 
-  private _onPropChanged(e: Event): void {
+  private _onPropChanged(e: CustomEvent): void {
     const target = e.composedPath()[0] as HTMLInputElement;
 
     const { name, type } = target.dataset;
@@ -381,7 +377,7 @@ class ApiViewerDemo extends LitElement {
     }
   }
 
-  private _onSlotChanged(e: Event): void {
+  private _onSlotChanged(e: CustomEvent): void {
     const target = e.composedPath()[0] as HTMLInputElement;
     this.slotsController.setValue(target.dataset.slot as string, target.value);
   }
diff --git a/src/api-viewer-docs.ts b/src/api-viewer-docs.ts
index 27d6af2..729f0b3 100644
--- a/src/api-viewer-docs.ts
+++ b/src/api-viewer-docs.ts
@@ -1,14 +1,14 @@
 import { LitElement, html, nothing, PropertyValues, TemplateResult } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import {
-  PropertyInfo,
-  SlotInfo,
-  AttributeInfo,
-  EventInfo,
-  CSSPartInfo,
-  CSSPropertyInfo
-} from './lib/types.js';
-import { isPropMatch, unquote } from './lib/utils.js';
+  Attribute,
+  ClassField,
+  CssCustomProperty,
+  CssPart,
+  Event,
+  Slot
+} from './lib/manifest.js';
+import { unquote } from './lib/utils.js';
 import { parse } from './lib/markdown.js';
 
 import './api-viewer-panel.js';
@@ -18,7 +18,7 @@ import './api-viewer-tabs.js';
 const renderItem = (
   prefix: string,
   name: string,
-  description: string,
+  description?: string,
   valueType?: string,
   value?: unknown,
   attribute?: string
@@ -84,22 +84,22 @@ class ApiViewerDocs extends LitElement {
   @property() name = '';
 
   @property({ attribute: false })
-  props: PropertyInfo[] = [];
+  props: ClassField[] = [];
 
   @property({ attribute: false })
-  attrs: AttributeInfo[] = [];
+  attrs: Attribute[] = [];
 
   @property({ attribute: false })
-  slots: SlotInfo[] = [];
+  slots: Slot[] = [];
 
   @property({ attribute: false })
-  events: EventInfo[] = [];
+  events: Event[] = [];
 
   @property({ attribute: false })
-  cssParts: CSSPartInfo[] = [];
+  cssParts: CssPart[] = [];
 
   @property({ attribute: false })
-  cssProps: CSSPropertyInfo[] = [];
+  cssProps: CssCustomProperty[] = [];
 
   protected createRenderRoot(): this {
     return this;
@@ -108,19 +108,13 @@ class ApiViewerDocs extends LitElement {
   protected render(): TemplateResult {
     const { slots, props, attrs, events, cssParts, cssProps } = this;
 
-    const properties = props || [];
-    const attributes = (attrs || []).filter(
-      ({ name }) => !properties.some(isPropMatch(name))
+    const emptyDocs = [props, attrs, slots, events, cssProps, cssParts].every(
+      (arr) => arr.length === 0
     );
 
-    const emptyDocs = [
-      properties,
-      attributes,
-      slots,
-      events,
-      cssProps,
-      cssParts
-    ].every((arr) => arr.length === 0);
+    const attributes = (attrs || []).filter(
+      (x) => !props.some((y) => y.name === x.fieldName)
+    );
 
     return emptyDocs
       ? html`
@@ -133,17 +127,20 @@ class ApiViewerDocs extends LitElement {
           <api-viewer-tabs>
             ${renderTab(
               'Properties',
-              properties,
+              props,
               html`
-                ${properties.map((prop) => {
-                  const { name, description, type, attribute } = prop;
+                ${props.map((prop) => {
+                  const { name, description, type } = prop;
+                  const attribute = (attrs || []).find(
+                    (x) => x.fieldName === name
+                  );
                   return renderItem(
                     'prop',
                     name,
                     description,
-                    type,
+                    type?.text,
                     prop.default,
-                    attribute
+                    attribute?.name
                   );
                 })}
               `
@@ -153,7 +150,7 @@ class ApiViewerDocs extends LitElement {
               attributes,
               html`
                 ${attributes.map(({ name, description, type }) =>
-                  renderItem('attr', name, description, type)
+                  renderItem('attr', name, description, type?.text)
                 )}
               `
             )}
@@ -180,12 +177,12 @@ class ApiViewerDocs extends LitElement {
               cssProps,
               html`
                 ${cssProps.map((prop) => {
-                  const { name, description, type } = prop;
+                  const { name, description } = prop;
                   return renderItem(
                     'css',
                     name,
                     description,
-                    type,
+                    '', // TODO: manifest does not provide type for CSS custom properties
                     unquote(prop.default)
                   );
                 })}
diff --git a/src/api-viewer-mixin.ts b/src/api-viewer-mixin.ts
index cdb15da..0d38ac5 100644
--- a/src/api-viewer-mixin.ts
+++ b/src/api-viewer-mixin.ts
@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
-import { ElementInfo, ElementPromise, ElementSetInfo } from './lib/types.js';
+import { fetchManifest, hasCustomElements, Package } from './lib/manifest.js';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export type Constructor<T = unknown> = new (...args: any[]) => T;
@@ -8,27 +8,11 @@ export type Constructor<T = unknown> = new (...args: any[]) => T;
 export interface ApiViewerInterface {
   src?: string;
 
-  elements?: ElementInfo[];
+  manifest?: Package;
 
   selected?: string;
 
-  jsonFetched: ElementPromise;
-}
-
-export async function fetchJson(src: string): ElementPromise {
-  let result: ElementInfo[] = [];
-  try {
-    const file = await fetch(src);
-    const json = (await file.json()) as ElementSetInfo;
-    if (Array.isArray(json.tags) && json.tags.length) {
-      result = json.tags;
-    } else {
-      console.error(`No element definitions found at ${src}`);
-    }
-  } catch (e) {
-    console.error(e);
-  }
-  return result;
+  jsonFetched: Promise<Package | null>;
 }
 
 export const emptyDataWarning = html`
@@ -42,23 +26,27 @@ export const ApiViewerMixin = <T extends Constructor<LitElement>>(
     @property() src?: string;
 
     @property({ attribute: false })
-    elements?: ElementInfo[];
+    manifest?: Package;
 
     @property() selected?: string;
 
-    jsonFetched: ElementPromise = Promise.resolve([]);
+    jsonFetched: Promise<Package | null> = Promise.resolve(null);
 
     private lastSrc?: string;
 
     willUpdate(): void {
       const { src } = this;
 
-      if (Array.isArray(this.elements)) {
-        this.lastSrc = undefined;
-        this.jsonFetched = Promise.resolve(this.elements);
+      if (this.manifest) {
+        if (hasCustomElements(this.manifest)) {
+          this.lastSrc = undefined;
+          this.jsonFetched = Promise.resolve(this.manifest);
+        } else {
+          console.error('No custom elements found in the `manifest` object.');
+        }
       } else if (src && this.lastSrc !== src) {
         this.lastSrc = src;
-        this.jsonFetched = fetchJson(src);
+        this.jsonFetched = fetchManifest(src);
       }
     }
   }
diff --git a/src/controllers/events-controller.ts b/src/controllers/events-controller.ts
index f72350f..9f53a38 100644
--- a/src/controllers/events-controller.ts
+++ b/src/controllers/events-controller.ts
@@ -1,5 +1,5 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { EventInfo } from '../lib/types.js';
+import { Event } from '../lib/manifest.js';
 import { HasKnobs } from '../lib/knobs.js';
 
 type EventsHost = HTMLElement & ReactiveControllerHost & HasKnobs;
@@ -24,7 +24,7 @@ export class EventsController implements ReactiveController {
   constructor(
     host: ReactiveControllerHost,
     component: HTMLElement,
-    events: EventInfo[]
+    events: Event[]
   ) {
     (this.host = host as EventsHost).addController(this);
 
diff --git a/src/controllers/slots-controller.ts b/src/controllers/slots-controller.ts
index bf0ef48..df38658 100644
--- a/src/controllers/slots-controller.ts
+++ b/src/controllers/slots-controller.ts
@@ -1,5 +1,5 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { SlotInfo, SlotValue } from '../lib/types.js';
+import { Slot, SlotValue } from '../lib/manifest.js';
 import { getSlotContent, hasTemplate, TemplateTypes } from '../lib/utils.js';
 
 export class SlotsController implements ReactiveController {
@@ -43,13 +43,13 @@ export class SlotsController implements ReactiveController {
     host: ReactiveControllerHost,
     id: number,
     component: HTMLElement,
-    slots: SlotInfo[]
+    slots: Slot[]
   ) {
     (this.host = host).addController(this as ReactiveController);
     this.el = component;
     this.enabled = !hasTemplate(id, component.localName, TemplateTypes.SLOT);
     this.slots = slots
-      .sort((a: SlotInfo, b: SlotInfo) => {
+      .sort((a, b) => {
         if (a.name === '') {
           return 1;
         }
@@ -58,7 +58,7 @@ export class SlotsController implements ReactiveController {
         }
         return a.name.localeCompare(b.name);
       })
-      .map((slot: SlotInfo) => {
+      .map((slot) => {
         return {
           ...slot,
           content: getSlotContent(slot.name)
diff --git a/src/controllers/styles-controller.ts b/src/controllers/styles-controller.ts
index 35a23ff..64a431d 100644
--- a/src/controllers/styles-controller.ts
+++ b/src/controllers/styles-controller.ts
@@ -1,5 +1,5 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { CSSPropertyInfo } from '../lib/types.js';
+import { CssCustomProperty, CssCustomPropertyValue } from '../lib/manifest.js';
 import { unquote } from '../lib/utils.js';
 
 export class StylesController implements ReactiveController {
@@ -7,13 +7,13 @@ export class StylesController implements ReactiveController {
 
   el: HTMLElement;
 
-  private _css: CSSPropertyInfo[] = [];
+  private _css: CssCustomPropertyValue[] = [];
 
-  get css(): CSSPropertyInfo[] {
+  get css(): CssCustomPropertyValue[] {
     return this._css;
   }
 
-  set css(cssProps: CSSPropertyInfo[]) {
+  set css(cssProps: CssCustomPropertyValue[]) {
     this._css = cssProps;
 
     if (cssProps.length) {
@@ -38,7 +38,7 @@ export class StylesController implements ReactiveController {
   constructor(
     host: HTMLElement & ReactiveControllerHost,
     component: HTMLElement,
-    cssProps: CSSPropertyInfo[]
+    cssProps: CssCustomProperty[]
   ) {
     (this.host = host).addController(this);
     this.el = component;
@@ -51,7 +51,7 @@ export class StylesController implements ReactiveController {
           ? unquote(cssProp.default)
           : style.getPropertyValue(cssProp.name);
 
-        const result = cssProp;
+        const result: CssCustomPropertyValue = cssProp;
         if (value) {
           value = value.trim();
           result.default = value;
diff --git a/src/lib/demo-controls.ts b/src/lib/demo-controls.ts
index aa70977..7dd58d0 100644
--- a/src/lib/demo-controls.ts
+++ b/src/lib/demo-controls.ts
@@ -1,26 +1,15 @@
 import { html, TemplateResult } from 'lit';
 import { Knob, Knobable } from './knobs.js';
-import { CSSPropertyInfo, PropertyInfo, SlotValue } from './types.js';
-import { getSlotContent, normalizeType } from './utils.js';
+import { ClassField, CssCustomPropertyValue, SlotValue } from './manifest.js';
+import { getSlotContent } from './utils.js';
 
 type InputRenderer = (item: Knobable, id: string) => TemplateResult;
 
-const getInputType = (type: string): 'checkbox' | 'number' | 'text' => {
-  switch (normalizeType(type)) {
-    case 'boolean':
-      return 'checkbox';
-    case 'number':
-      return 'number';
-    default:
-      return 'text';
-  }
-};
-
 export const cssPropRenderer: InputRenderer = (
   knob: Knobable,
   id: string
 ): TemplateResult => {
-  const { name, value } = knob as CSSPropertyInfo;
+  const { name, value } = knob as CssCustomPropertyValue;
 
   return html`
     <input
@@ -37,7 +26,7 @@ export const propRenderer: InputRenderer = (
   knob: Knobable,
   id: string
 ): TemplateResult => {
-  const { name, knobType, value, options } = knob as Knob<PropertyInfo>;
+  const { name, knobType, value, options } = knob as Knob<ClassField>;
   let input;
   if (knobType === 'select' && Array.isArray(options)) {
     input = html`
@@ -47,7 +36,7 @@ export const propRenderer: InputRenderer = (
         )}
       </select>
     `;
-  } else if (normalizeType(knobType) === 'boolean') {
+  } else if (knobType === 'boolean') {
     input = html`
       <input
         id=${id}
@@ -62,7 +51,7 @@ export const propRenderer: InputRenderer = (
     input = html`
       <input
         id=${id}
-        type=${getInputType(knobType)}
+        type=${knobType === 'number' ? 'number' : 'text'}
         .value=${value == null ? '' : String(value)}
         data-name=${name}
         data-type=${knobType}
@@ -98,7 +87,8 @@ export const renderKnobs = (
   renderer: InputRenderer
 ): TemplateResult => {
   const rows = items.map((item: Knobable) => {
-    const { name } = item as Knob<PropertyInfo>;
+    // NOTE: type cast is fine, as we default it on next line
+    const { name } = item as Knob<ClassField>;
     const id = `${type}-${name || 'default'}`;
     const label = type === 'slot' ? getSlotContent(name) : name;
     return html`
diff --git a/src/lib/demo-events.ts b/src/lib/demo-events.ts
index 005ae55..0b21159 100644
--- a/src/lib/demo-events.ts
+++ b/src/lib/demo-events.ts
@@ -1,8 +1,8 @@
 import { html, nothing, TemplateResult } from 'lit';
-import { PropertyValue } from './types.js';
+import { KnobValue } from './knobs.js';
 
 interface EventDetail {
-  value: PropertyValue;
+  value: KnobValue;
 }
 
 const renderDetail = (detail: EventDetail): string => {
diff --git a/src/lib/demo-snippet.ts b/src/lib/demo-snippet.ts
index 627e181..8b65e42 100644
--- a/src/lib/demo-snippet.ts
+++ b/src/lib/demo-snippet.ts
@@ -4,14 +4,13 @@ import { htmlRender } from 'highlight-ts/es/render/html';
 import { registerLanguages } from 'highlight-ts/es/languages';
 import { XML } from 'highlight-ts/es/languages/xml';
 import { init, process } from 'highlight-ts/es/process';
-import { CSSPropertyInfo, SlotValue } from './types.js';
+import { CssCustomPropertyValue, SlotValue } from './manifest.js';
 import { Knob } from './knobs.js';
 import { CSS } from './highlight-css.js';
 import {
   getTemplate,
   getTemplateNode,
   isTemplate,
-  normalizeType,
   TemplateTypes
 } from './utils.js';
 
@@ -55,7 +54,7 @@ export const renderSnippet = (
   tag: string,
   values: Record<string, Knob>,
   slots: SlotValue[],
-  cssProps: CSSPropertyInfo[]
+  cssProps: CssCustomPropertyValue[]
 ): TemplateResult => {
   let markup = '';
   const prefix = getTemplate(id, tag, PREFIX);
@@ -83,7 +82,7 @@ export const renderSnippet = (
     .forEach((key: string) => {
       const { value, knobType, attribute } = values[key];
       const attr = attribute || key;
-      switch (normalizeType(knobType)) {
+      switch (knobType) {
         case 'boolean':
           markup += value ? ` ${attr}` : '';
           break;
diff --git a/src/lib/knobs.ts b/src/lib/knobs.ts
index fb2d5c6..9ceb1ad 100644
--- a/src/lib/knobs.ts
+++ b/src/lib/knobs.ts
@@ -1,33 +1,33 @@
-import {
-  ComponentWithProps,
-  CSSPropertyInfo,
-  PropertyInfo,
-  PropertyValue,
-  SlotValue
-} from './types.js';
+import { ClassField, CssCustomProperty, SlotValue } from './manifest.js';
 import {
   getTemplates,
-  normalizeType,
   TemplateTypes,
   unquote,
   getTemplateNode
 } from './utils.js';
 
-export type Knobable = unknown | CSSPropertyInfo | PropertyInfo | SlotValue;
+export type KnobValue = string | number | boolean | null | undefined;
+
+export type ComponentWithProps = {
+  [key: string]: KnobValue;
+};
+
+export type Knobable = unknown | (CssCustomProperty | ClassField | SlotValue);
 
 export type Knob<T extends Knobable = unknown> = T & {
   attribute: string | undefined;
-  value: PropertyValue;
+  value: KnobValue;
   custom?: boolean;
+  options?: string[];
   knobType: string;
 };
 
 export interface HasKnobs {
-  getKnob(name: string): { knob: Knob<PropertyInfo>; custom?: boolean };
-  syncKnob(component: Element, changed: Knob<PropertyInfo>): void;
+  getKnob(name: string): { knob: Knob<ClassField>; custom?: boolean };
+  syncKnob(component: Element, changed: Knob<ClassField>): void;
 }
 
-const getDefault = (prop: Knob<PropertyInfo>): PropertyValue => {
+const getDefault = (prop: Knob<ClassField>): KnobValue => {
   const { knobType, default: value } = prop;
   switch (knobType) {
     case 'boolean':
@@ -63,22 +63,25 @@ const isGetter = (
   return result;
 };
 
+const normalizeType = (type: string | undefined = ''): string =>
+  type.replace(' | undefined', '').replace(' | null', '');
+
 export const getKnobs = (
   tag: string,
-  props: PropertyInfo[],
+  props: ClassField[],
   exclude = ''
-): Knob<PropertyInfo>[] => {
+): Knob<ClassField>[] => {
   // Exclude getters and specific properties
   let propKnobs = props.filter(
     ({ name }) =>
       !exclude.includes(name) && !isGetter(customElements.get(tag), name)
-  ) as Knob<PropertyInfo>[];
+  ) as Knob<ClassField>[];
 
   // Set knob types and default knobs values
   propKnobs = propKnobs.map((prop) => {
     const knob = {
       ...prop,
-      knobType: normalizeType(prop.type)
+      knobType: normalizeType(prop.type?.text)
     };
 
     if (typeof knob.default === 'string') {
@@ -94,7 +97,7 @@ export const getKnobs = (
 export const getCustomKnobs = (
   tag: string,
   vid?: number
-): Knob<PropertyInfo>[] => {
+): Knob<ClassField>[] => {
   return getTemplates(vid as number, tag, TemplateTypes.KNOB)
     .map((template) => {
       const { attr, type } = template.dataset;
@@ -126,15 +129,15 @@ export const getCustomKnobs = (
           };
         }
       }
-      return result as Knob<PropertyInfo>;
+      return result as Knob<ClassField>;
     })
     .filter(Boolean);
 };
 
 export const getInitialKnobs = (
-  propKnobs: Knob<PropertyInfo>[],
+  propKnobs: Knob<ClassField>[],
   component: HTMLElement
-): Knob<PropertyInfo>[] => {
+): Knob<ClassField>[] => {
   return propKnobs.filter((prop) => {
     const { name, knobType } = prop;
     const defaultValue = getDefault(prop);
diff --git a/src/lib/manifest.ts b/src/lib/manifest.ts
new file mode 100644
index 0000000..dd83a17
--- /dev/null
+++ b/src/lib/manifest.ts
@@ -0,0 +1,125 @@
+import type {
+  Attribute,
+  ClassField,
+  ClassLike,
+  ClassMember,
+  CssCustomProperty,
+  CssPart,
+  CustomElement,
+  CustomElementDeclaration,
+  CustomElementExport,
+  Event,
+  Export,
+  Package,
+  Slot
+} from 'custom-elements-manifest/schema';
+
+export {
+  Attribute,
+  ClassField,
+  ClassMember,
+  CssCustomProperty,
+  CssPart,
+  CustomElement,
+  Event,
+  Package,
+  Slot
+};
+
+export type CssCustomPropertyValue = CssCustomProperty & { value?: string };
+
+export interface SlotValue {
+  name: string;
+  content: string;
+}
+
+export function hasCustomElements(
+  manifest?: Package | null
+): manifest is Package {
+  return (
+    !!manifest &&
+    Array.isArray(manifest.modules) &&
+    manifest.modules.some(
+      (x) =>
+        x.exports?.some((y) => y.kind === 'custom-element-definition') ||
+        x.declarations?.some((z) => (z as CustomElement).customElement)
+    )
+  );
+}
+
+const isCustomElementExport = (y: Export): y is CustomElementExport =>
+  y.kind === 'custom-element-definition';
+
+const isCustomElementDeclaration = (y: ClassLike): y is CustomElement =>
+  (y as CustomElement).customElement;
+
+const isPublicProperty = (x: ClassMember): x is ClassField =>
+  x.kind === 'field' && !(x.privacy === 'private' || x.privacy === 'protected');
+
+export async function fetchManifest(src: string): Promise<Package | null> {
+  try {
+    const file = await fetch(src);
+    const manifest: Package = await file.json();
+    if (hasCustomElements(manifest)) {
+      return manifest;
+    }
+    throw new Error(`No element definitions found at ${src}`);
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+}
+
+export function getCustomElements(manifest: Package): CustomElementExport[] {
+  return (manifest.modules ?? []).flatMap(
+    (x) => x.exports?.filter(isCustomElementExport) ?? []
+  );
+}
+
+export const getElementData = (
+  manifest: Package,
+  selected?: string
+): CustomElement | null => {
+  const exports = getCustomElements(manifest);
+  const index = selected ? exports.findIndex((el) => el?.name === selected) : 0;
+
+  const element = exports[index];
+
+  if (!element) {
+    return null;
+  }
+
+  const decl = !element.declaration.module
+    ? manifest.modules
+        .flatMap((x) => x.declarations)
+        .find(
+          (y): y is CustomElementDeclaration =>
+            y?.name === element.declaration.name
+        )
+    : manifest.modules
+        .find((m) => m.path === element.declaration.module)
+        ?.declarations?.find((d) => d.name === element.declaration.name);
+
+  if (!decl || !isCustomElementDeclaration(decl)) {
+    throw new Error(`Could not find declaration for ${selected}`);
+  }
+
+  return {
+    customElement: true,
+    name: element.name,
+    description: decl?.description,
+    slots: decl.slots ?? [],
+    attributes: decl.attributes ?? [],
+    members: decl.members ?? [],
+    events: decl.events ?? [],
+    cssParts: decl.cssParts ?? [],
+    // TODO: analyzer should sort CSS custom properties
+    cssProperties: [...(decl.cssProperties ?? [])].sort((a, b) =>
+      a.name > b.name ? 1 : -1
+    )
+  };
+};
+
+export const getPublicFields = (members: ClassMember[] = []): ClassField[] => {
+  return members.filter(isPublicProperty);
+};
diff --git a/src/lib/renderer.ts b/src/lib/renderer.ts
index 46dd065..ff6b6fe 100644
--- a/src/lib/renderer.ts
+++ b/src/lib/renderer.ts
@@ -2,13 +2,11 @@ import { ChildPart, html, noChange, nothing, TemplateResult } from 'lit';
 import { directive, Directive, PartInfo, PartType } from 'lit/directive.js';
 import { templateContent } from 'lit/directives/template-content.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { Knob } from './knobs.js';
-import { ComponentWithProps } from './types.js';
+import { ComponentWithProps, Knob } from './knobs.js';
 import {
   getTemplate,
   getTemplateNode,
   isTemplate,
-  normalizeType,
   TemplateTypes
 } from './utils.js';
 
@@ -35,7 +33,7 @@ const updateComponent = (
       } else {
         component.removeAttribute(attribute);
       }
-    } else if (normalizeType(knobType) === 'boolean') {
+    } else if (knobType === 'boolean') {
       component.toggleAttribute(attribute || key, Boolean(value));
     } else {
       (component as unknown as ComponentWithProps)[key] = value;
diff --git a/src/lib/types.ts b/src/lib/types.ts
deleted file mode 100644
index 4f1afbc..0000000
--- a/src/lib/types.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-export interface Info {
-  name: string;
-  description: string;
-}
-
-export interface AttributeInfo extends Info {
-  type: string | undefined;
-}
-
-export type PropertyValue = string | number | boolean | null | undefined;
-
-export interface PropertyInfo extends Info {
-  type: string;
-  attribute: string | undefined;
-  value: PropertyValue;
-  default: PropertyValue;
-  options?: string[];
-}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface SlotInfo extends Info {}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface EventInfo extends Info {}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface CSSPartInfo extends Info {}
-
-export interface CSSPropertyInfo extends Info {
-  value?: string;
-  default?: string;
-  type?: string;
-}
-
-export interface ElementInfo extends Info {
-  attributes: AttributeInfo[];
-  events: EventInfo[];
-  properties: PropertyInfo[];
-  slots: SlotInfo[];
-  cssProperties: CSSPropertyInfo[];
-  cssParts: CSSPartInfo[];
-}
-
-export interface ElementSetInfo {
-  tags: ElementInfo[];
-}
-
-export type ElementPromise = Promise<ElementInfo[]>;
-
-export interface SlotValue {
-  name: string;
-  content: string;
-}
-
-export type ComponentWithProps = {
-  [key: string]: PropertyValue;
-};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e00f265..ac54786 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,3 @@
-import { Knob } from './knobs.js';
-import { ElementInfo, PropertyInfo } from './types';
-
 const templates: Array<HTMLTemplateElement[]> = [];
 
 export const setTemplates = (id: number, tpl: HTMLTemplateElement[]) => {
@@ -44,43 +41,11 @@ export const getTemplates = (
 export const hasTemplate = (id: number, name: string, type: string): boolean =>
   templates[id].some(matchTemplate(name, type));
 
-export const isPropMatch =
-  (name: string) =>
-  (prop: PropertyInfo | Knob<PropertyInfo>): boolean =>
-    prop.attribute === name || prop.name === name;
-
-export const normalizeType = (type: string | undefined = ''): string =>
-  type.replace(' | undefined', '').replace(' | null', '');
-
 export const unquote = (value?: string): string | undefined =>
-  typeof value === 'string' && value.startsWith('"') && value.endsWith('"')
+  typeof value === 'string' && value.startsWith("'") && value.endsWith("'")
     ? value.slice(1, value.length - 1)
     : value;
 
-const EMPTY_ELEMENT: ElementInfo = {
-  name: '',
-  description: '',
-  slots: [],
-  attributes: [],
-  properties: [],
-  events: [],
-  cssParts: [],
-  cssProperties: []
-};
-
-export const getElementData = (elements: ElementInfo[], selected?: string) => {
-  const index = selected ? elements.findIndex((el) => el.name === selected) : 0;
-
-  const result = { ...EMPTY_ELEMENT, ...elements[index] };
-
-  // TODO: analyzer should sort CSS custom properties
-  result.cssProperties = result.cssProperties.sort((a, b) =>
-    a.name > b.name ? 1 : -1
-  );
-
-  return result;
-};
-
 const capitalize = (name: string): string =>
   name[0].toUpperCase() + name.slice(1);