@api-viewer/demo

Live demo playground for Web Components

Usage no npm install needed!

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

README

@api-viewer/demo

Live playground for Web Components. Based on custom elements manifest JSON format.

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

Documentation →

Live Demo →

Screenshot of api-viewer demo

Install

npm install @api-viewer/demo

Check out the Getting Started guide.

Features

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