api-viewer-element

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

Usage no npm install needed!

<script type="module">
  import apiViewerElement from 'https://cdn.skypack.dev/api-viewer-element';
</script>

README

<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 →

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:

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.