Skip to main content

Introducing Custom Components

· 3 min read
David Boyne
David Boyne
Founder of EventCatalog

I'm excited to share that EventCatalog 2.3.1 is now available, featuring support for custom components.

You can now add custom components to your domains, services and messages.

Custom components allows you to create dynamic templates, reuse markdown across pages, client-side JavaScript and more.

Example of a new custom component

  1. Define your custom component in the new /components folder.
/components/my-component.astro
---
# Import data from your eventcatalog.config.js file
import config from "@config"
# Access passed-in component props, like `<MyComponent title="Hello, World" />`
const { subtitle } = Astro.props;
---

<main>
    <span>This catalog belongs to the company:{config.organizationName}</span>
    <span>Data given to this component {subtitle}</span>
</main>

  1. Import and use your component in EventCatalog
events/OrderAccepted/index.md
---
id: OrderAccepted
name: Order Accepted
# ... other event data
---

<!-- Import the component into your page -->
import MyComponent from '@catalog/components/my-component.astro"

<!-- EventCatalog supports variables -->
export const subtitle = "This is my new subtitle"

# Overview 

This event represents when an order has been accepted on our system.

<!-- Render the component and pass props into it -->
<MyComponent subtitle="This is a component" />

<!-- Render the component and reference your resource -->
<MyComponent subtitle={frontmatter.name} />

<!-- Render the component with a local variable -->
<MyComponent subtitle={subtitle} />

Why custom components?​

EventCatalog provides a list of components out the box including Accordions, Schemas, OpenAPI and NodeGraphs.

Users of EventCatalog can now define their own components and use them across their catalog. This provides extra functionality and customization for your catalogs.

Component features include:

Getting started​

If you already have an EventCatalog you need to upgrade to the version @eventcatalog/core@2.3.0.

Don't have a catalog?

You can try out the new features by installing a new catalog

npx @eventcatalog/create-eventcatalog@latest my-catalog

Summary​

EventCatalog now supports custom components.

Custom components give you the ability to build and share components across your domains, services and messages.

Custom components support styling with TailwindCSS, Client side JavaScript, Dynamic templating, data fetching and more.

If you have any questions, feature ideas, or would like to discuss EventCatalog features with your team, join our Discord community.

Using EventCatalog?​

Want to learn more about EventCatalog and how it can help you? Reach out to me on socials or Discord, and I would be happy to join a call with you and your team.