Skip to main content

Customize landing page

Added in eventcatalog@2.37.1

EventCatalog provides a landing page for your catalog, this is the first page that users see when they visit your catalog. See the demo here.

You can customize the landing page with your own content, HTML and EventCatalog components.

info

Landing page customization is only available for customers on paid plans. You can get a 14 day free trial of EventCatalog Starter Plan on EventCatalog Cloud.

Example of a custom landing page​

You can add any HTML you want to your landing page, in this example we have added custom content using EventCatalog components, which includes the visualizer for a domains, subdomains and flows.

EventCatalog Custom Landing PageView custom landing page demo

How to customize your landing page​

  1. Setup and configure your EventCatalog Starter or Scale License key.
  2. Create a new folder called pages and an Astro file called homepage.astro
    • Example: /pages/homepage.astro
  3. Add the contents to your Astro file.
  4. Run npm run dev or npm run build to see your changes.
What is Astro?

Astro is a static site builder that powers EventCatalog. You can learn more about Astro here.

Example of homepage.astro

/pages/homepage.astro
---
# Import EventCatalog components to use in your landing page
const { Tile, Tiles, Flow, NodeGraph, Admonition } = Astro.props.components;
---

<div class="p-8 pt-2 max-w-8xl mx-auto">
  <h1 class="text-4xl font-bold text-gray-800 mb-4">Welcome to FlowMart's EventCatalog</h1>
  <p class="text-lg text-gray-600 mb-8">Explore the events, services, and domains that power the FlowMart ecosystem. This catalog provides a centralized place to discover and understand our asynchronous architecture.</p>

  <Admonition type="info" title="Demo application">
    <p>This is a demo of the EventCatalog and what it can do. The company is called FlowMart and they are an e-commerce company.</p>
    <p>Using EventCatalog, we documented their systems (domains, services, events, commands, flows) and how they fit together.</p>
  </Admonition>

  <div class="grid grid-cols-2 gap-4 border-b border-gray-200 pb-8 pt-4">
    <div class="col-span-1">
      <h2 class="text-2xl font-semibold text-gray-700 mb-2">E-Commerce Domain</h2>
      <p class="text-gray-500 mb-2">The core domain of FlowMart, responsible for all e-commerce operations.</p>
      <NodeGraph id="E-Commerce" version="1.0.0" type="domain" />
    </div>
    <div class="col-span-1">
      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Orders Domain</h2>
      <p class="text-gray-500 mb-2">The sub-domain responsible for all orders.</p>
      <NodeGraph id="Orders" version="0.0.3" type="domain" />
    </div>
    <div class="col-span-1">
      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Payment Domain</h2>
      <p class="text-gray-500 mb-2">The sub-domain responsible for all payments.</p>
      <NodeGraph id="Payment" version="0.0.1" type="domain" />
    </div>
    <div class="col-span-1">
      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Subscription Domain</h2>
      <p class="text-gray-500 mb-2">The sub-domain responsible for all subscriptions.</p>
      <NodeGraph id="Subscription" version="0.0.1" type="domain" />
    </div>
  </div>

  <div class="bg-blue-50 p-6 rounded-lg shadow-md mb-12">
    <h2 class="text-2xl font-semibold text-blue-800 mb-3">Discover Our Architecture</h2>
    <p class="text-gray-700 mb-4">
      Navigate through our Domains to understand the different business capabilities, explore Services to see the microservices involved, and dive into Events and Commands to see how they communicate.
    </p>
    <p class="text-gray-700">
      Use the search bar above or browse the sections in the sidebar to get started.
    </p>
  </div>

  <div class="grid grid-cols-2 gap-4 border-b border-gray-200 pb-8">
    <div class="col-span-1">
      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Cancel Subscription Flow</h2>
      <p class="text-gray-500 mb-2">This flow is triggered when a user cancels their subscription.</p>
      <Flow id="CancelSubscription" version="latest" includeKey={false} />
    </div>
    <div class="col-span-1">
      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Payment Flow</h2>
      <p class="text-gray-500 mb-2">This flow documents how a payment is processed at FlowMart.</p>
      <Flow id="PaymentFlow" version="latest" includeKey={false} />
    </div>
  </div>

  <div class="border-b border-gray-200 pb-8 py-4">
    <h2 class="text-3xl font-semibold text-gray-700 py-4">Quick Links</h2>
    <p class="text-gray-700 mb-4">Learn how to get started with EventCatalog, create domains, services, events, and commands.</p>
    <Tiles columns={3}>
      <Tile icon="BookOpenIcon" href="https://eventcatalog.dev/docs/development/getting-started/introduction" title="Getting started with EventCatalog" description="How to get started with EventCatalog" />
      <Tile icon="RectangleGroupIcon" href="https://eventcatalog.dev/docs/development/guides/domains/adding-domains" title="Creating domains" description="Learn how to create domains in your event catalog" />
      <Tile icon="ServerIcon" href="https://eventcatalog.dev/docs/development/guides/services/adding-services" title="Creating services" description="Learn how to create services in your event catalog" />
      <Tile icon="ChatBubbleLeftIcon" iconColor="text-blue-500" href="https://eventcatalog.dev/docs/development/guides/messages/commands/introduction" title="Creating commands" description="Learn how to create commands in your event catalog" />
      <Tile icon="BoltIcon" iconColor="text-orange-500" href="https://eventcatalog.dev/docs/development/guides/messages/events/introduction" title="Creating events" description="Learn how to create events in your event catalog" />
      <Tile icon="UserGroupIcon" iconColor="text-green-500" href="https://eventcatalog.dev/docs/owners" title="Assigning owners to resources" description="Learn how to assign owners to resources in your event catalog" />
    </Tiles>
  </div>

  <div class="pb-8 py-4">
    <h2 class="text-3xl font-semibold text-gray-700 mb-6 pt-4">Join the community</h2>

    <p class="text-gray-700 mb-4">Our project and community is growing fast. We have over 1000+ members in our <a href="https://discord.gg/3rjaZMmrAm" class="text-blue-500 hover:text-blue-600">Discord community</a>.</p>

    <Tiles columns={2}>
      <Tile icon="UserGroupIcon" iconColor="text-green-500" href="https://discord.gg/3rjaZMmrAm" title="Join the Discord community" description="Join the community to get help and support" />
      <Tile icon="StarIcon"  iconColor="text-yellow-500" href="https://github.com/event-catalog/eventcatalog/stargazers" title="Star EventCatalog on GitHub" description="If you like the project, please star it on GitHub to show your support ❤️" />
    </Tiles>
  </div>

</div>


See the example output here

Using components​

You can use EventCatalog components in your custom landing page.

These include embedding visuals, flows, and more.

Example:

<Tiles columns={3}>
  <Tile icon="BookOpenIcon" href="https://eventcatalog.dev/docs/development/getting-started/introduction" title="Getting started with EventCatalog" description="How to get started with EventCatalog" />
</Tiles>

You can get a list of components here.