Skip to main content

eventcatalog.config.js

Overview​

eventcatalog.config.js contains configurations for your site and is placed in the root directory of your site.

Required fields​

cId​

  • Type: string

An automated generated ID for your catalog. EventCatalog will generate this for you.

eventcatalog.config.js
module.exports = {
  cId: '107fdebb-7c68-42cc-975d-413b1d30d758',
};

title​

  • Type: string

Title for your website.

eventcatalog.config.js
module.exports = {
  title: 'EventCatalog',
};

organizationName​

  • Type: string

Your organization name.

eventcatalog.config.js
module.exports = {
  organizationName: 'Your Company',
};

Optional fields​

base​

  • Type: string
  • Default value: /

The base path to deploy to. EventCatalog will use this path as the root for your pages and assets both in development and in production build.

eventcatalog.config.js
module.exports = {
  base: '/',
};

The example below will output EventCatalog under http://{your-site}.com/my-company

eventcatalog.config.js
module.exports = {
  // renders as https://website.com/my-company/{routes}
  base: 'my-company',
};

outDir​

Added in eventcatalog@2.11.4
  • Type: string
  • Default value: dist

The output path of your EventCatalog. By default it will output to the dist folder.

eventcatalog.config.js
module.exports = {
  // Catalog would output to the /build folder
  outDir: 'build',
};

trailingSlash​

  • Type: boolean
  • Default: false

Set the route matching behavior of the dev server. Choose from the following options:

'true' - Only match URLs that include a trailing slash (ex: “/foo/“) 'false' - Match URLs regardless of whether a trailing ”/” exists

Use this configuration option if your production host has strict handling of how trailing slashes work or do not work.

eventcatalog.config.js
module.exports = {
  // Setting to true will add / onto all routes e.g http://website.com/visualiser/
  trailingSlash: true,
};

port​

  • Type: number
  • Default: 3000

Configure the port EventCatalog is running on.

eventcatalog.config.js
module.exports = {
  // Changes the port from default 3000 to 5000
  port: 5000,
};

generators​

  • Type: Generator[]
  • Default: []

Generators are the foundation of plugins with EventCatalog. EventCatalog will call your generators on build.

Generators are still in beta

This API is still in beta, as generators at the moment require your code to be in CJS format. We are working on supporting typescript and import statements too.

eventcatalog.config.js
module.exports = {
  generators: [
    [
      // This will load plugin.js in the root of your catalog
      '<rootDir>/plugin.js',
      // configuration for your generator
      {
        customValue: true,
        test: "Add any configuration values you want"
      },
    ],
  ],
};

landingPage​

  • Type: string
  • Default: '/docs'

Configure the landing page URL your EventCatalog loads. By default EventCatalog loads /docs. Clicking on the EventCatalog logo (or your custom logo), will also go to this URL.

Examples include /visualiser, discover/events or custom pages /docs/services/InventoryService/0.0.2

eventcatalog.config.js
module.exports = {
  landingPage: '/visualiser',
};

docs​

  • Type: object
eventcatalog.config.js
module.exports = {
   docs: {
    sidebar: {
      type: 'TREE_VIEW'
    }
  }
};

Configuration for the documentation sidebar.

docs.sidebar options​

You can choose between TREE_VIEW or FLAT_VIEW to render your documentation.

  • TREE_VIEW will render the DOCS as a tree view and map your file system folder structure.
    • Useful for large catalogs and navigation
  • FLAT_VIEW will render the DOCS as a flat list (no nested folders).
    • Useful for smaller catalogs and navigation
Added in eventcatalog@2.23.0
eventcatalog.config.js
docs: {
    sidebar: {
      // TREE_VIEW will render the DOCS as a tree view and map your file system folder structure
      // FLAT_VIEW will render the DOCS as a flat list (no nested folders)
      type: 'TREE_VIEW'
    },
  },

See a demo of the TREE_VIEW at https://demo.eventcatalog.dev/docs

editUrl​

  • Type: string

URL used when people want to edit the documentation. For example your GitHub repo and branch.

eventcatalog.config.js
module.exports = {
  editUrl: 'https://github.com/boyney123/eventcatalog-demo/edit/master',
};
  • Type: object

Logo, alt and text for your company logo.

Public directory

Add your logo to your /public directory.

eventcatalog.config.js
module.exports = {
  logo: {
    // This logo is located at public/logo.svg
    src: '/logo.svg',
    alt: 'Company logo',
    text: 'Urban Slice | EventCatalog',
  },
};

Example output

./logo.png

  • Type: string

URL used when people want to link the logo & title in the top navigation to the homepage of a website.

eventcatalog.config.js
module.exports = {
  homepageLink: 'https://eventcatalog.dev',
};

mdxOptimize​

  • Type: string

This is an optional configuration setting to optimize the MDX output for faster builds. This may be useful if you have many catalog files and notice slow builds. However, this option may generate some unescaped HTML, so make sure your catalog interactive parts still work correctly after enabling it.

This is disabled by default.

Read Astro documentation on optimize for MDX for more information.

eventcatalog.config.js
module.exports = {
  mdxOptimize: true
};

asyncAPI.renderParsedSchemas​

Added in eventcatalog@2.12.1
  • Type: boolean

EventCatalog will render your AsyncAPI files into their own pages. By default EventCatalog will read your AsyncAPI files and parse your schemas to render them on the screen. Part of this process is validating your schemas and also adding metadata onto them (default).

If you want to keep your schemas as they are then you can set the asyncAPI.renderParsedSchemas to false.

Having issues rendering AsyncAPI files?

If you are having issues seeing or rendering your AsyncAPI file try setting the renderParsedSchemas to false

eventcatalog.config.js
module.exports = {
  asyncAPI: {
    renderParsedSchemas: false // default is true
  }
};

mermaid​

Added in eventcatalog@2.18.1
  • Type: object

EventCatalog uses mermaid to render diagrams.

Using mermaid you can render icons in your diagrams (e.g AWS architecture icons).

Example output of mermaid
eventcatalog.config.js
module.exports = {
  mermaid: {
    iconPacks: ['logos'] // will load https://icones.js.org/collection/logos into eventcatalog
  }
};

You can choose from over 200,000 icons from icones.js.org.

rss​

Added in eventcatalog@2.21.1

Enable RSS feeds for messages, services, domains and flows.

RSS feeds are disabled by default.

eventcatalog.config.js
{
  rss: {
    // Turn rss on or off 
    enabled: true,
    // The number of items to include in the RSS feed
    limit: 20
  }
}

See the RSS documentation for more information and examples.

llms.txt​

Added in eventcatalog@2.20.0

Enable tools like Claude, ChatGPT, GitHub Copilot, and Cursor to quickly understand your EventCatalog.

eventcatalog.config.js
{
  llms: {
    enabled: true,
  }
}

See the LLMs documentation for more information, how you can use it and examples.