# `@api-viewer/demo`

Live playground for Web Components. Based on [custom elements manifest](https://github.com/webcomponents/custom-elements-manifest) JSON format.

```html
<api-demo src="./custom-elements.json"></api-demo>
```

[Documentation →](https://api-viewer.open-wc.org/docs/guide/intro/)

[Live Demo →](https://api-viewer.open-wc.org/docs/examples/api-demo/)

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

## Install

```sh
npm install @api-viewer/demo
```

Check out the [Getting Started](https://api-viewer.open-wc.org/docs/guide/intro/#usage) guide.

## Features

- [Source](https://api-viewer.open-wc.org/docs/guide/using-demo/#source) - Code snippet matching the rendered component.
- [Knobs](https://api-viewer.open-wc.org/docs/guide/using-demo/#knobs) - Change properties and slotted content dynamically.
- [Styles](https://api-viewer.open-wc.org/docs/guide/using-demo/#styles) - Change values of the custom CSS properties.
- [Event log](https://api-viewer.open-wc.org/docs/guide/using-demo/#events) - Output the events fired by the component.
- [Templates](https://api-viewer.open-wc.org/docs/api/templates/) - Provide additional HTML to be shown.