API Viewer Element API Viewer Element Toggle darkmode

Guide: Introduction

API Viewer is a set of custom elements and helpers providing interactive UI for documenting web components. This project is based on Custom Elements Manifest, a file format that describes custom HTML elements.


npm i api-viewer-element --save-dev


  1. Install custom elements manifest analyzer:
npm install @custom-elements-manifest/analyzer
  1. Analyze your components:
cem analyze --globs "src/components/my-element.js"
  1. Create an HTML file and import the component:
<!DOCTYPE html>
    <script type="module">
      import 'api-viewer-element';

    <api-viewer src="./custom-elements.json"></api-viewer>

ES modules

Api Viewer is authored using ES modules which are natively supported by modern browsers. However, it also uses "bare module imports" which are not yet standardized and require a small transform.

We recommend using of the modern tools that leverage ES modules based development, such as Web Dev Server or Vite. We also recommend Rollup Plugin HTML when bundling API Viewer docs for production.


You can import API Viewer from one of the content delivery networks that support ES modules:

unpkg.com CDN:

<script type="module" src="https://unpkg.com/api-viewer-element?module"></script>

Skypack CDN:

<script type="module" src="https://cdn.skypack.dev/api-viewer-element"></script>


<script type="module" src="https://jspm.dev/api-viewer-element"></script>