<SchemaViewer />

A JSON Schema viewer for EventCatalog.

Renders the given schema (.json or .yaml formats) into the page.

tip

The <SchemaViewer/> component only works with JSON Schema.

If you need to render other schema formats, please use the <Schema/> component.

Support

The <SchemaViewer/> component is supported in domains, services, and all messages, changelogs, and custom documentation pages.

Usage

1. Add a JSON schema file to your folder.
   • e.g /events/MyEvent/schema.json
2. Include the <SchemaViewer/> component inside the markdown
   • e.g /events/MyEvent/index.mdx

Example

---
#event frontmatter
---

The Inventory Adjusted event is triggered whenever there is a change in the inventory levels of a product. 
This could occur due to various reasons such as receiving new stock, sales, returns, or manual adjustments by the inventory management team.

<!-- Renders the schema with search and expand options -->
<SchemaViewer file="schema.json" title="JSON Schema" maxHeight="500" search="true" expand="true" />

<!-- Also supports YAML formats -->
<SchemaViewer file="schema.yaml" title="YAML Schema" maxHeight="500" />

Output example in EventCatalog

Props

Name	Type	Default	Description
title (optional)	string	(empty)	Title to render above your schema
file (required)	string	(empty)	The file to load into the schema block. Path is resolved by EventCatalog.
maxHeight (optional)	string	"500"	Max height of the JSON Schema viewer (in pixels).
search (optional)	boolean	false	Renders a search input in the viewer
expand (optional)	boolean	false	Expands all properties by default

Rendering multiple schemas

You can use the SchemaViewer multiple times in your page.

Example

---
#event frontmatter
---

The Inventory Adjusted event is triggered whenever there is a change in the inventory levels of a product. 
This could occur due to various reasons such as receiving new stock, sales, returns, or manual adjustments by the inventory management team.

<SchemaViewer file="schema.json" title="JSON Schema" maxHeight="500" id="json-schema" />
<SchemaViewer file="old-schema.json" title="Another Version" maxHeight="500" id="json-schema2" />
<SchemaViewer file="new-schema.yml" title="Another Version" maxHeight="500" id="yaml-schema" />