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 →

• 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.

npm install api-viewer-element

Check out the Getting Started guide.

The following web components are available:

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

yarn

yarn dev

Open http://127.0.0.1:8000

yarn start

Open http://127.0.0.1:8000

yarn dist

• Big thanks to @runem for creating Web Component Analyzer, which previous versions of this package were based on.
• Thanks to @bahrus for wc-info component which inspired me.
• The visual appearance is largely inspired by Vuetify API docs.
• The tabs component is based on the howto-tabs example.
• Thanks to Modern Web for Web Dev Server and Rollup Plugin HTML.