api-viewer-element

<api-viewer>

API viewer for web-component-analyzer JSON output.

Usage

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

Live Demo ↗

Preparing a JSON

First, install web-component-analyzer:

npm install -g web-component-analyzer

Analyze your components using --format json:

wca analyze my-element.js --outFile custom-elements.json --format json

Styling

The following custom CSS properties are available:

Property	Description
--ave-accent-color	Accent color, used for property names
--ave-border-color	Color used for borders and dividers
--ave-border-radius	Border radius used for the outer border
--ave-header-color	Header text color used for tag name
--ave-item-color	API items content color (main text)
--ave-label-color	API items labels color
--ave-monospace-font	Monospace font stack for the API items
--ave-primary-color	Primary color, used for header and active tab
--ave-tab-color	Inactive tabs color

Contributing

Install dependencies

yarn

Run demo in browser

yarn dev

Open http://127.0.0.1:8081/demo/

Create dist folder

yarn dist

Serve dist folder

yarn serve:dist

Acknowledgements

• Big thanks to @runem for creating Web Component Analyzer.
• 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.

Changelog

[0.1.0] - 2019-10-22

Added

API docs viewer

• Properties: name, type, attribute, description
• Attributes: name, type, description
• Slots: name (if any), description
• Events: name, description