Web Components Preview

A storybook alike preview application for web components. It processes a given custom element manifest and renders a preview for each element with its properties and events.

Configuration is done by providing a schema file of your custom elements. The schema is a JSON file that describes the custom elements and their properties and should comply to the draft Custom element manifest specification.

Usage

Generating a custom element manifest

We recommend to use the @custom-elements-manifest/analyzer package to generate a custom element manifest.

Generating readmes

Once you documented your components with jsdoc, you can use e.g. the web-component-analyzer package to generate readme files for your components as well.

Configuration

Just add the following script tag to your html file:

via JsDelivr

<script type="module" src="https://cdn.jsdelivr.net/npm/@webcomponents-preview/client"></script>

via unpkg

<script type="module" src="https://unpkg.com/@webcomponents-preview/client"></script>

Then add the following markup to your html and pass in the manifest url:

<wcp-root manifest-url="/custom-elements.json"></wcp-root>

Extras

tbd

• [ ] How to add previews from jsdoc -> cem analyzer plugin
• [ ] How to add existing readmes
• [ ] Plugin infrastructure

Development

tbd