Awesome

<api-viewer>

API documentation and live playground for Web Components. Based on custom elements manifest JSON format.

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

Documentation →

Live Demo →

<img src="https://raw.githubusercontent.com/open-wc/api-viewer-element/master/screenshot-docs.png" alt="Screenshot of api-viewer docs" width="800">

<img src="https://raw.githubusercontent.com/open-wc/api-viewer-element/master/screenshot-demo.png" alt="Screenshot of api-viewer demo" width="800">

Features

• API docs viewer
  • Properties - JS properties publicly exposed by the component.
  • Attributes - HTML attributes (except those that match properties).
  • Events - DOM events dispatched by the component.
  • Slots - Default <slot> and / or named slots, if any.
  • CSS Custom Properties - Styling API of the component.
  • CSS Shadow Parts - Elements that can be styled using ::part().
• Live playground
  • Source - Code snippet matching the rendered component.
  • Knobs - Change properties and slotted content dynamically.
  • Styles - Change values of the custom CSS properties.
  • Event log - Output the events fired by the component.
  • Templates - Provide additional HTML to be shown.

Install

npm install api-viewer-element

Check out the Getting Started guide.

Usage

The following web components are available:

• <api-viewer>
• <api-docs>
• <api-demo>

Contributing

Install dependencies

yarn

Run demo in browser

yarn dev

Open http://127.0.0.1:8000

Run the docs locally

yarn start

Open http://127.0.0.1:8000

Build the docs site

yarn dist

Acknowledgements

• Big thanks to @thepassle for creating Custom Elements Manifest Analyzer, that this project is built upon.
• Big thanks to @runem for creating Web Component Analyzer used in older versions of API Viewer.
• Big thanks to Modern Web for Web Dev Server and Rocket used for the documentation website.
• Thanks to @bahrus for wc-info, a similar web component that served as a source of inspiration for me.
• The @api-viewer/tabs web component is based on tabs example from HowTo: Components project.
• The visual appearance is largely inspired by older version of Vuetify API documentation.