API Viewer Element API Viewer Element Toggle darkmode

API: Properties

API Viewer uses reactive properties for configuration. String properties, such as src, can be set declaratively using HTML attributes. In such cases, it's up to you to decide whether to use a property or an attribute.


The following properties can be set on each of the web components that are public parts of the API Viewer.


Use src property to provide URL for fetching manifest data as JSON:

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


Use manifest property instead of src to pass manifest data directly:

    .then((res) => res.json())
    .then((manifest) => {
      document.querySelector('api-viewer').manifest = manifest;


Use only to display API only for one or a few elements in the scope of a certain documentation page and filter out the rest.

<api-viewer src="./custom-elements.json" only="my-el,my-other-el"></api-viewer>


Use selected property to configure the displayed element. This property is only used if the manifest contains data about multiple elements. When a user selects another element, the property is updated accordingly.

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


The following properties are not available for all the web components, but only for a subset of them.


Use section property on the <api-viewer> to toggle between demo and API docs:

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


Use exclude-knobs property to prevent creating knobs for certain properties. For example, you can exclude properties that accept objects or arrays. This property is available on both <api-viewer> and <api-demo>.