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.

Install

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

Usage

Install custom elements manifest analyzer:

npm install @custom-elements-manifest/analyzer

Analyze your components:

cem analyze --globs "src/components/my-element.js"

Create an HTML file and import the component:

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import 'api-viewer-element';
    </script>
  </head>

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

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.

CDN

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>

JSPM CDN:

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

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!