API Viewer Example

{"id":18123,"library":"api-viewer-element","title":"API Viewer Element","description":"Web component that generates interactive API documentation and live playgrounds for custom elements / web components. It parses custom-elements.json manifest and renders property, attribute, method, event, and slot documentation alongside a live demo editor. Version 1.0.0-pre.10 is the latest pre-release, with patches updating demo copy button styles. Key differentiator: fully custom-element-based, works in any framework or vanilla HTML, built on LitElement. Alternatives like Storybook or Docz typically require framework-specific integrations. Ships TypeScript types (from @open-wc). Part of Open Web Components ecosystem.","status":"active","version":"1.0.0-pre.10","language":"javascript","source_language":"en","source_url":"https://github.com/open-wc/api-viewer-element","tags":["javascript","API","documentation","web-components","typescript"],"install":[{"cmd":"npm install api-viewer-element","lang":"bash","label":"npm"},{"cmd":"yarn add api-viewer-element","lang":"bash","label":"yarn"},{"cmd":"pnpm add api-viewer-element","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Shared utilities for API viewing across packages","package":"@api-viewer/common","optional":false},{"reason":"Live demo/playground component","package":"@api-viewer/demo","optional":false},{"reason":"Documentation display component","package":"@api-viewer/docs","optional":false},{"reason":"Tab UI component","package":"@api-viewer/tabs","optional":false}],"imports":[{"note":"Importing the module registers the custom element globally; no need to import a class.","wrong":"default or named import","symbol":"ApiViewer","correct":"import 'api-viewer-element'"},{"note":"The element is registered as a custom element via side effect. To access the class, use `customElements.get('api-viewer')`.","wrong":"import { ApiViewer } from 'api-viewer-element'","symbol":"ApiViewer (as a constructor)","correct":"import 'api-viewer-element'; const viewer = document.querySelector('api-viewer')"},{"note":"The `loader` function returns a Promise that resolves when the component is ready. Useful for conditional loading or ensuring the element is defined.","wrong":"","symbol":"loader","correct":"import { loader } from 'api-viewer-element'; loader().then(() => ...)"}],"quickstart":{"code":"\n\n\n \n \n API Viewer Example\n \n\n\n \n\n","lang":"javascript","description":"Shows how to use the element: import the web component, fetch a custom-elements.json manifest, and set it as a property. The component renders documentation and a live demo."},"warnings":[{"fix":"Generate a manifest using @custom-elements/manifest or similar tool.","message":"The component requires a valid custom-elements.json manifest. Without it, nothing renders.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Fetch the JSON and assign the parsed object to the `manifest` property.","message":"The manifest must be set as a JavaScript object, not a string. Passing a URL string will not work.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Pin to a specific pre-release version and test updates carefully.","message":"Version 1.0.0-pre.10 is a pre-release; breaking changes may occur before stable. There is no stable release yet.","severity":"breaking","affected_versions":"1.0.0-pre.x"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure the manifest URL is valid and the server allows CORS. For local testing, use a local server or inline the manifest.","cause":"The manifest URL is incorrect or CORS issues.","error":"Error: Failed to load manifest: ..."},{"fix":"Check that the manifest is properly parsed JSON and contains the expected structure (e.g., tags array).","cause":"The manifest property is undefined or malformed.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'map')"},{"fix":"Ensure you have imported 'api-viewer-element' before using the tag.","cause":"The web component is not registered.","error":"api-viewer does not appear to be defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}