<SchemaViewer />

A JSON Schema viewer for EventCatalog.

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

Support

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

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.md

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" />

<!-- 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.
id (optional) (required on multi instance)	string	(empty)	A unique id for your SchemaViewer. Required if you use more than one in the page.
maxHeight (optional)	string	"500"	Max height of the JSON Schema viewer.
renderRootTreeLines (optional)	boolean	true	Renders the root tree lines in the viewer
hideExamples (optional)	boolean	false	Renders examples
defaultExpandedDepth (optional)	number	3	Renders examples

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" />

Using more than one Schema Viewers?

Remember you have to add an id to your SchemaViewers if you want more than one.