asyncapi-try-it-plugin

Plugin for @asyncapi/react-component that adds a Try it out action for operation blocks.

Install

npm i asyncapi-try-it-plugin

Usage

import AsyncApiComponent from '@asyncapi/react-component';
import { createTryItOutPlugin } from 'asyncapi-try-it-plugin';

const tryItOutPlugin = createTryItOutPlugin({
  endpointBase: 'asyncapi/try',
});

<AsyncApiComponent schema={schema} plugins={[tryItOutPlugin]} />;

API

createTryItOutPlugin({
  endpointBase?: string;
  showEndpointInput?: boolean;
  showPayloadSchema?: boolean;
  showRealBrokerToggle?: boolean;
  buttonLabel?: string;
  additionalFields?: Array<{
    key: string;
    type: 'string' | 'number' | 'integer' | 'boolean';
    label?: string;
    defaultValue?: unknown;
  }>;
  resolveEndpoint?: (ctx: {
    operationId: string;
    operationAction: string;
    channelName: string;
    type: string;
    endpointBase: string;
  }) => string;
});

Defaults:

• endpointBase: 'asyncapi/try'
• showEndpointInput: false
• showPayloadSchema: false
• showRealBrokerToggle: true
• buttonLabel: 'Try it out'
• additionalFields: []

Default endpoint:

/${endpointBase}

Behavior

• Two input modes are supported: Form and Raw JSON.
• operation_id and operation_type are always added to outgoing payload automatically.
• In Form mode these metadata fields are hidden from the form.
• In Raw JSON mode these metadata fields are prefilled and kept in sync.
• For array payload schemas, the Form mode renders an add/remove item editor.

POST body:

{
  "channelName": "string",
  "message": {
    "operation_id": "string",
    "operation_type": "string",
    "message": "<payload>"
  },
  "options": {
    "sendToRealBroker": false,
    "timestamp": "ISO string"
  }
}

message.message matches the AsyncAPI payload schema type:

Schema type	message.message value
object	{ "field": "value", ... }
string	"hello"
integer / number	42
boolean	true
array	["a", "b"]
null	null