AsyncAPI React Component

AsyncAPI React Component

A official React component for AsyncAPI 2.0 specification .AsyncAPI React Component

A official React component for AsyncAPI 2.0 specification


A official React component for AsyncAPI 2.0 specification. It allows you to render the documentation of your asynchronous API provided in the AsyncAPI specification format and validate this specification. You can fully restyle the component using your own styles.

CAUTION: This package only supports AsyncAPI 2.0 specification. If you use 1.x, we recommend that you upgrade to the latest AsyncAPI version using the Node.js or Go converters.


This repository comes in with a Playground application. Test it to see the component in action and play with it before you use it in your application.

You can also run the Playground application locally by following this instruction from the development guide.


  • react (version 16.8.0 or higher)


Run this command to install the component in your project:

npm install --save @asyncapi/react-component

Check out this simple sandbox application that uses the asyncapi-react component:

Edit asyncapi-react-in-action


The list of props for the AsyncAPI React component includes:

  • schema: string | AsyncApiInterface | FetchingSchemaInterface

    The schema property is required and contains AsyncAPI specification. Use the string type, the AsyncApiInterface type, or the FetchingSchemaInterface object to fetch the schema from an external resource. For more information on what it contains and what it should look like, read AsyncAPI Specification.

  • config?: Partial<ConfigInterface>

    The config property is optional and contains configuration for the AsyncAPI component. For more information on the available configuration options, read the Configuration Modification document. This property is concatenated with the default configuration.

    NOTE: The Partial<T> type means that every field in the T type is optional.


For a list and description of features offered by the AsyncAPI React component, see this directory.


To use default styles based on SAP Fundamentals, import them as follows:

import "@asyncapi/react-component/lib/styles/fiori.css";

For information on how to change styles, read the Style Modification document.

Web Component

If you are not using React you may want to use the @asyncapi/web-component component as a plain web component. This is achieved by making use of web-react-components.


Run this command to install the component in your project:

npm install --save @asyncapi/web-component

Using in Angular

To use component in Angular, follow these steps:

  1. Update AppModule by adding the CUSTOM_ELEMENTS_SCHEMA to the schemas array in the NgModule metadata:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

  schemas: [
export class AppModule {}
  1. Import the @asyncapi/web-component module in an Angular's component where you want to use the web component:
import { Component } from '@angular/core';
import '@asyncapi/web-component/lib/asyncapi-web-component';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  1. Use web component in the template as follows:
<asyncapi-component [schema]="schema" [config]="config" [cssImportPath]="cssImportPath"></asyncapi-component>


  • schema is a schema property from React component,
  • config is a config property from React component,
  • cssImportPath is the path to styles. By default it is assets/fiori.css

NOTE: The easiest way to use the default css is to copy the content of the @asyncapi/react-component/lib/styles/fiori.css file to a assets/asyncapi.css file.


For information on how to set up a development environment, write and run tests, follow the naming and architecture convention defined for the project in the Development Guide.


For information on how to release a new version of the library or the playground application, or details on creating a changelog file, read the Releasing document.


If you have a feature request, add it as an issue or propose changes in a pull request (PR). If you create a feature request, use the dedicated Feature request issue template. When you create a PR, follow the contributing rules described in the document.

If you have a bug to report, reproduce it in an online code editor. For example, use CodeSandbox. Attach the link to the reproduced bug to your issue. Log the bug using the Bug report template.

Missing features

See the list of features that are still missing in the component:

If you want to help us develop them, feel free to contribute.

Download Details:

Author: asyncapi


Source Code:

react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.