Live demo¶

Select the spec you want to view.

Custom badge labels for the send and receive operations.

```asyncapi
src: examples/orders-v3.yaml
sendLabel: EMIT
receiveLabel: ON
```

A request with its reply, Kafka bindings, and Avro payloads that the browser fetches from asyncapi.com and shows as trees. The sidebar opens from the menu button in a column this narrow.

<asyncapi-viewer src="examples/adeo-kafka-request-reply-asyncapi.yml" sidebar></asyncapi-viewer>

Servers grouped by their tags in the sidebar, and operations labelled by channel address.

<asyncapi-viewer src="examples/streetlights-kafka-asyncapi.yml" sidebar showServers="byServersTags" useChannelAddressAsIdentifier></asyncapi-viewer>

The sidebar with operations grouped by the document's tags; example panels start collapsed.

<asyncapi-viewer src="examples/accounts-v2.json" sidebar showOperations="bySpecTags" messageExamples="false"></asyncapi-viewer>

This one is meant to fail: the host does not exist. Readers get a message naming the URL instead of a blank box. A wrong local path is caught earlier, because mkdocs build --strict fails on it.

<asyncapi-viewer src="https://example.invalid/asyncapi.yaml"></asyncapi-viewer>

The Adeo and Streetlights documents are from the AsyncAPI specification examples (Apache-2.0).