@eventcatalog/core 3.39.4 → 3.39.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/dist/analytics/analytics.cjs +1 -1
  2. package/dist/analytics/analytics.js +2 -2
  3. package/dist/analytics/log-build.cjs +1 -1
  4. package/dist/analytics/log-build.js +3 -3
  5. package/dist/{chunk-NSR4DZXS.js → chunk-4OSFLWLG.js} +1 -1
  6. package/dist/{chunk-WLUQZCIH.js → chunk-IKZ5ITXP.js} +1 -1
  7. package/dist/{chunk-PVOVC2UV.js → chunk-LEUIMTEQ.js} +1 -1
  8. package/dist/{chunk-O2CZERUN.js → chunk-MQAZ4LXP.js} +1 -1
  9. package/dist/{chunk-ONQOIF2X.js → chunk-ORVOST63.js} +1 -1
  10. package/dist/constants.cjs +1 -1
  11. package/dist/constants.js +1 -1
  12. package/dist/docs/api/03-domain-api.md +16 -0
  13. package/dist/docs/api/04-service-api.md +16 -0
  14. package/dist/docs/api/05-command-api.md +16 -0
  15. package/dist/docs/api/06-event-api.md +16 -0
  16. package/dist/docs/api/06-query-api.md +16 -0
  17. package/dist/docs/api/08-channel-api.md +16 -0
  18. package/dist/docs/api/09-flow-api.md +16 -0
  19. package/dist/docs/api/10-entity-api.md +15 -0
  20. package/dist/docs/api/12-data-product-api.md +17 -0
  21. package/dist/docs/development/01-fundamentals.md +7 -0
  22. package/dist/docs/development/01-getting-started/installation.md +8 -0
  23. package/dist/docs/development/01-getting-started/project-structure.md +2 -0
  24. package/dist/docs/development/bring-your-own-documentation/01-introduction.md +3 -1
  25. package/dist/docs/development/customization/customize-sidebars/00-application-sidebar.md +45 -5
  26. package/dist/docs/editor/00-overview.md +73 -0
  27. package/dist/docs/editor/01-first-edit.md +124 -0
  28. package/dist/docs/editor/_category_.json +12 -0
  29. package/dist/docs/editor/explanation/_category_.json +11 -0
  30. package/dist/docs/editor/explanation/beta-status-feedback.md +48 -0
  31. package/dist/docs/editor/explanation/how-it-works.md +49 -0
  32. package/dist/docs/editor/explanation/markdown-mdx-git.md +58 -0
  33. package/dist/docs/editor/how-to/_category_.json +11 -0
  34. package/dist/docs/editor/how-to/add-schemas-and-specifications.md +66 -0
  35. package/dist/docs/editor/how-to/edit-resource.md +88 -0
  36. package/dist/docs/editor/how-to/invite-editors.md +68 -0
  37. package/dist/docs/editor/how-to/open-catalog.md +44 -0
  38. package/dist/docs/editor/how-to/preview-changes.md +55 -0
  39. package/dist/docs/editor/how-to/revert-local-changes.md +43 -0
  40. package/dist/docs/editor/how-to/review-and-commit-changes.md +57 -0
  41. package/dist/docs/editor/how-to/run-locally.md +71 -0
  42. package/dist/docs/editor/how-to/use-flow-editor.md +66 -0
  43. package/dist/docs/editor/how-to/use-slash-commands.md +67 -0
  44. package/dist/docs/editor/reference/_category_.json +11 -0
  45. package/dist/docs/editor/reference/cli.md +61 -0
  46. package/dist/docs/editor/reference/supported-content.md +81 -0
  47. package/dist/docs/editor/reference/supported-resources.md +51 -0
  48. package/dist/docs/editor/reference/troubleshooting.md +76 -0
  49. package/dist/eventcatalog.cjs +1 -1
  50. package/dist/eventcatalog.js +5 -5
  51. package/dist/generate.cjs +1 -1
  52. package/dist/generate.js +3 -3
  53. package/dist/utils/cli-logger.cjs +1 -1
  54. package/dist/utils/cli-logger.js +2 -2
  55. package/eventcatalog/src/components/Badge.astro +50 -0
  56. package/eventcatalog/src/components/Tables/Discover/DiscoverTable.tsx +1 -0
  57. package/eventcatalog/src/components/Tables/Discover/columns.tsx +35 -13
  58. package/eventcatalog/src/components/Tables/Table.tsx +1 -0
  59. package/eventcatalog/src/components/Tables/columns/SharedColumns.tsx +24 -11
  60. package/eventcatalog/src/content.config-shared-collections.ts +1 -0
  61. package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro +2 -18
  62. package/eventcatalog/src/layouts/VerticalSideBarLayout.astro +250 -205
  63. package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId]/[docVersion]/index.astro +2 -14
  64. package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId]/index.astro +2 -14
  65. package/eventcatalog/src/pages/docs/[type]/[id]/[version]/changelog/index.astro +3 -15
  66. package/eventcatalog/src/pages/docs/[type]/[id]/[version]/graphql/[filename].astro +2 -18
  67. package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro +2 -18
  68. package/eventcatalog/src/pages/docs/[type]/[id]/language/[dictionaryId]/index.astro +2 -11
  69. package/eventcatalog/src/utils/badge-styles.ts +31 -0
  70. package/eventcatalog/src/utils/sidebar-visibility.ts +41 -0
  71. package/package.json +4 -4
@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
37
37
  var import_os = __toESM(require("os"), 1);
38
38
 
39
39
  // package.json
40
- var version = "3.39.4";
40
+ var version = "3.39.6";
41
41
 
42
42
  // src/constants.ts
43
43
  var VERSION = version;
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  raiseEvent
3
- } from "../chunk-ONQOIF2X.js";
4
- import "../chunk-WLUQZCIH.js";
3
+ } from "../chunk-ORVOST63.js";
4
+ import "../chunk-IKZ5ITXP.js";
5
5
  export {
6
6
  raiseEvent
7
7
  };
@@ -111,7 +111,7 @@ var import_axios = __toESM(require("axios"), 1);
111
111
  var import_os = __toESM(require("os"), 1);
112
112
 
113
113
  // package.json
114
- var version = "3.39.4";
114
+ var version = "3.39.6";
115
115
 
116
116
  // src/constants.ts
117
117
  var VERSION = version;
@@ -1,9 +1,9 @@
1
1
  import {
2
2
  log_build_default
3
- } from "../chunk-O2CZERUN.js";
4
- import "../chunk-ONQOIF2X.js";
3
+ } from "../chunk-MQAZ4LXP.js";
4
+ import "../chunk-ORVOST63.js";
5
5
  import "../chunk-4UVFXLPI.js";
6
- import "../chunk-WLUQZCIH.js";
6
+ import "../chunk-IKZ5ITXP.js";
7
7
  import "../chunk-5T63CXKU.js";
8
8
  export {
9
9
  log_build_default as default
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  VERSION
3
- } from "./chunk-WLUQZCIH.js";
3
+ } from "./chunk-IKZ5ITXP.js";
4
4
 
5
5
  // src/utils/cli-logger.ts
6
6
  import pc from "picocolors";
@@ -1,5 +1,5 @@
1
1
  // package.json
2
- var version = "3.39.4";
2
+ var version = "3.39.6";
3
3
 
4
4
  // src/constants.ts
5
5
  var VERSION = version;
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  logger
3
- } from "./chunk-NSR4DZXS.js";
3
+ } from "./chunk-4OSFLWLG.js";
4
4
  import {
5
5
  cleanup,
6
6
  getEventCatalogConfigFile
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  raiseEvent
3
- } from "./chunk-ONQOIF2X.js";
3
+ } from "./chunk-ORVOST63.js";
4
4
  import {
5
5
  countResources,
6
6
  serializeCounts
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  VERSION
3
- } from "./chunk-WLUQZCIH.js";
3
+ } from "./chunk-IKZ5ITXP.js";
4
4
 
5
5
  // src/analytics/analytics.js
6
6
  import axios from "axios";
@@ -25,7 +25,7 @@ __export(constants_exports, {
25
25
  module.exports = __toCommonJS(constants_exports);
26
26
 
27
27
  // package.json
28
- var version = "3.39.4";
28
+ var version = "3.39.6";
29
29
 
30
30
  // src/constants.ts
31
31
  var VERSION = version;
package/dist/constants.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  VERSION
3
- } from "./chunk-WLUQZCIH.js";
3
+ } from "./chunk-IKZ5ITXP.js";
4
4
  export {
5
5
  VERSION
6
6
  };
@@ -283,6 +283,22 @@ You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`,
283
283
  ---
284
284
  ```
285
285
 
286
+ #### Link to external URLs
287
+
288
+ <AddedIn version="3.39.6" />
289
+
290
+ Add a `url` to a badge to make it render as a clickable link with an external-link icon. When `url` is omitted, the badge renders as a plain label.
291
+
292
+ ```md title="Link badge example"
293
+ ---
294
+ badges:
295
+ - content: View Runbook
296
+ url: https://runbooks.example.com/my-domain
297
+ backgroundColor: blue
298
+ textColor: white
299
+ ---
300
+ ```
301
+
286
302
  ### `specifications` {#specifications}
287
303
 
288
304
  <AddedIn version="2.6.0" />
@@ -263,6 +263,22 @@ You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`,
263
263
  ---
264
264
  ```
265
265
 
266
+ #### Link to external URLs
267
+
268
+ <AddedIn version="3.39.6" />
269
+
270
+ Add a `url` to a badge to make it render as a clickable link with an external-link icon. When `url` is omitted, the badge renders as a plain label.
271
+
272
+ ```md title="Link badge example"
273
+ ---
274
+ badges:
275
+ - content: View Runbook
276
+ url: https://runbooks.example.com/my-service
277
+ backgroundColor: blue
278
+ textColor: white
279
+ ---
280
+ ```
281
+
266
282
  ### `specifications` {#specifications}
267
283
 
268
284
  <AddedIn version="2.39.1" />
@@ -186,6 +186,22 @@ You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`,
186
186
  ---
187
187
  ```
188
188
 
189
+ #### Link to external URLs
190
+
191
+ <AddedIn version="3.39.6" />
192
+
193
+ Add a `url` to a badge to make it render as a clickable link with an external-link icon. When `url` is omitted, the badge renders as a plain label.
194
+
195
+ ```md title="Link badge example"
196
+ ---
197
+ badges:
198
+ - content: View Runbook
199
+ url: https://runbooks.example.com/my-command
200
+ backgroundColor: blue
201
+ textColor: white
202
+ ---
203
+ ```
204
+
189
205
  ### `schemaPath` {#schemaPath}
190
206
 
191
207
  Path to the schema of the message.
@@ -185,6 +185,22 @@ You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`,
185
185
  ---
186
186
  ```
187
187
 
188
+ #### Link to external URLs
189
+
190
+ <AddedIn version="3.39.6" />
191
+
192
+ Add a `url` to a badge to make it render as a clickable link with an external-link icon. When `url` is omitted, the badge renders as a plain label.
193
+
194
+ ```md title="Link badge example"
195
+ ---
196
+ badges:
197
+ - content: View Runbook
198
+ url: https://runbooks.example.com/my-event
199
+ backgroundColor: blue
200
+ textColor: white
201
+ ---
202
+ ```
203
+
188
204
  ### `schemaPath` {#schemaPath}
189
205
 
190
206
  Path to the schema of the message.
@@ -183,6 +183,22 @@ You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`,
183
183
  ---
184
184
  ```
185
185
 
186
+ #### Link to external URLs
187
+
188
+ <AddedIn version="3.39.6" />
189
+
190
+ Add a `url` to a badge to make it render as a clickable link with an external-link icon. When `url` is omitted, the badge renders as a plain label.
191
+
192
+ ```md title="Link badge example"
193
+ ---
194
+ badges:
195
+ - content: View Runbook
196
+ url: https://runbooks.example.com/my-query
197
+ backgroundColor: blue
198
+ textColor: white
199
+ ---
200
+ ```
201
+
186
202
  ### `schemaPath` {#schemaPath}
187
203
 
188
204
  Path to the schema of the message.
@@ -251,6 +251,22 @@ You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`,
251
251
  ---
252
252
  ```
253
253
 
254
+ #### Link to external URLs
255
+
256
+ <AddedIn version="3.39.6" />
257
+
258
+ Add a `url` to a badge to make it render as a clickable link with an external-link icon. When `url` is omitted, the badge renders as a plain label.
259
+
260
+ ```md title="Link badge example"
261
+ ---
262
+ badges:
263
+ - content: View Runbook
264
+ url: https://runbooks.example.com/my-channel
265
+ backgroundColor: blue
266
+ textColor: white
267
+ ---
268
+ ```
269
+
254
270
  ### `repository` {#repository}
255
271
 
256
272
  <AddedIn version="2.11.2" />
@@ -360,6 +360,22 @@ You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`,
360
360
  ---
361
361
  ```
362
362
 
363
+ #### Link to external URLs
364
+
365
+ <AddedIn version="3.39.6" />
366
+
367
+ Add a `url` to a badge to make it render as a clickable link with an external-link icon. When `url` is omitted, the badge renders as a plain label.
368
+
369
+ ```md title="Link badge example"
370
+ ---
371
+ badges:
372
+ - content: View Runbook
373
+ url: https://runbooks.example.com/my-flow
374
+ backgroundColor: blue
375
+ textColor: white
376
+ ---
377
+ ```
378
+
363
379
  ### `editUrl` {#editUrl}
364
380
 
365
381
  <AddedIn version="2.49.4" />
@@ -233,6 +233,21 @@ You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`,
233
233
  ---
234
234
  ```
235
235
 
236
+ #### Link to external URLs
237
+
238
+ <AddedIn version="3.39.6" />
239
+
240
+ Add a `url` to a badge to make it render as a clickable link with an external-link icon. When `url` is omitted, the badge renders as a plain label.
241
+
242
+ ```md title="Link badge example"
243
+ ---
244
+ badges:
245
+ - content: View Runbook
246
+ url: https://runbooks.example.com/my-entity
247
+ backgroundColor: blue
248
+ textColor: white
249
+ ---
250
+ ```
236
251
 
237
252
  ### `editUrl` {#editUrl}
238
253
 
@@ -229,6 +229,7 @@ Badge properties:
229
229
  | `content` | `string` | Yes | Text content of the badge |
230
230
  | `backgroundColor` | `string` | Yes | Background color (named token or CSS value) |
231
231
  | `textColor` | `string` | Yes | Text color (named token or CSS value) |
232
+ | `url` | `string` | No | When set, the badge renders as a clickable link with an external-link icon |
232
233
 
233
234
  #### Use named colors
234
235
 
@@ -240,6 +241,22 @@ Supported names: `slate`, `gray`, `zinc`, `neutral`, `stone`, `red`, `orange`, `
240
241
 
241
242
  You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`, `hsl()`, `oklch()`, or a CSS variable (`var(--my-color)`).
242
243
 
244
+ #### Link to external URLs
245
+
246
+ <AddedIn version="3.39.6" />
247
+
248
+ Add a `url` to a badge to make it render as a clickable link with an external-link icon. When `url` is omitted, the badge renders as a plain label.
249
+
250
+ ```md title="Link badge example"
251
+ ---
252
+ badges:
253
+ - content: View Runbook
254
+ url: https://runbooks.example.com/my-data-product
255
+ backgroundColor: blue
256
+ textColor: white
257
+ ---
258
+ ```
259
+
243
260
  ### `repository`
244
261
 
245
262
  - Type: `object`
@@ -29,6 +29,13 @@ EventCatalog is a [docs-as-code](https://www.writethedocs.org/guide/docs-as-code
29
29
 
30
30
  EventCatalog does not force you to use a specific broker, schema format, or stack. You can use it with any broker, schema format, or stack and can fit into any workflow you have. EventCatalog fits your workflow, not the other way around.
31
31
 
32
+ ### Visual editing
33
+
34
+ You can also use [EventCatalog Editor](/docs/editor/overview) to maintain your catalog through a local visual workflow.
35
+
36
+ The editor runs on top of your EventCatalog project, writes changes back to the same local files, and gives you a Git-backed way to review and publish changes. This helps developers, architects, analysts, and product owners contribute to the catalog without needing to work directly in Markdown files.
37
+
38
+
32
39
  ## Ready to build?
33
40
 
34
41
  Now that you understand the fundamentals, [get started with EventCatalog](/docs/development/getting-started/installation).
@@ -94,6 +94,14 @@ Look at my directory and generate EventCatalog documentation from information yo
94
94
 
95
95
  The generated files can be edited like any other EventCatalog documentation. Learn more about [EventCatalog skills](/docs/development/ask-your-architecture/skills/introduction).
96
96
 
97
+ ## Optional: Use EventCatalog Editor
98
+
99
+ You can edit your catalog files directly in Markdown, or use [EventCatalog Editor](/docs/editor/overview) for a local visual editing workflow.
100
+
101
+ The editor runs on top of your EventCatalog project, writes changes back to your local files, and gives you a Git-backed way to review and publish changes. This is useful when architects, developers, analysts, or product owners need to help maintain the catalog without working directly in Markdown.
102
+
103
+ To use the editor, you need Git installed and editor access through [EventCatalog Cloud](https://eventcatalog.cloud). Learn how to [run EventCatalog Editor locally](/docs/editor/how-to/run-locally).
104
+
97
105
  ## Next steps
98
106
 
99
107
  - [Understand the project structure](/docs/development/getting-started/project-structure)
@@ -11,6 +11,8 @@ import ProjectTree from '@site/src/components/MDX/ProjectTree';
11
11
 
12
12
  An EventCatalog project is a folder of Markdown files that describe and model your architecture.
13
13
 
14
+ You can edit these files directly, or use the optional [EventCatalog Editor](/docs/editor/overview) to create, preview, review, and commit catalog content through a visual workflow.
15
+
14
16
  Each resource in your catalog, such as a domain, service, event, command, query, team, or diagram, is represented by a file or folder in your project. EventCatalog reads those files and turns them into a catalog.
15
17
 
16
18
  You can also bring your own documentation into EventCatalog, such as architecture decision records, guides, onboarding material, or runbooks. Learn more about [bringing your own documentation](/docs/development/bring-your-own-documentation/introduction).
@@ -9,6 +9,8 @@ description: Bring your own documentation to EventCatalog
9
9
 
10
10
  EventCatalog allows you to centralise architecture documentation alongside your domains, services, and events — keeping knowledge and context in one place.
11
11
 
12
+ You can write this documentation with Markdown and MDX, or use the optional [EventCatalog Editor](/docs/editor/overview) for a visual editing workflow.
13
+
12
14
  Common use cases include:
13
15
 
14
16
  - Architecture decision records (ADRs)
@@ -45,4 +47,4 @@ This can be useful if you want to document details tied to a specific domain, se
45
47
 
46
48
  EventCatalog will render your custom documentation alongside the resource it is tied to in the sidebar.
47
49
 
48
- [Read the resource docs guide](/docs/guides/bring-your-own-documentation/resource-docs).
50
+ [Read the resource docs guide](/docs/guides/bring-your-own-documentation/resource-docs).
@@ -15,9 +15,11 @@ The application sidebar is the sidebar that is rendered on every page in EventCa
15
15
 
16
16
  ### Show/hide items in the application sidebar
17
17
 
18
+ <AddedIn version="3.39.5" />
19
+
18
20
  You can show or hide items in the application sidebar by using the `sidebar` property in your `eventcatalog.config.js` file.
19
21
 
20
- **By default, all items is the sidebar are shown.**
22
+ **By default, all items in the sidebar are shown.**
21
23
 
22
24
  ```js title="eventcatalog.config.js"
23
25
  // rest of the config
@@ -27,6 +29,11 @@ sidebar: [
27
29
  // This will hide the Schema Explorer
28
30
  visible: false,
29
31
  },
32
+ {
33
+ id: '/discover/events',
34
+ // This will hide the Events item
35
+ visible: false,
36
+ },
30
37
  ]
31
38
  ```
32
39
 
@@ -38,8 +45,41 @@ Options for the `sidebar` property:
38
45
  | ID | Description |
39
46
  | --- | --- |
40
47
  | `/` | The home page icon |
41
- | `/docs` | The documentation page icon |
42
- | `/discover` | The discover page icon |
43
- | `/directory` | The users directory page icon |
48
+ | `/docs/custom` | The custom documentation page |
49
+ | `/discover/domains` | The domains page |
50
+ | `/discover/services` | The services page |
51
+ | `/discover/external-systems` | The external systems page |
52
+ | `/discover/events` | The events page |
53
+ | `/discover/commands` | The commands page |
54
+ | `/discover/queries` | The queries page |
55
+ | `/discover/flows` | The flows page |
56
+ | `/discover/containers` | The data stores page |
57
+ | `/discover/data-products` | The data products page |
58
+ | `/directory/teams` | The teams page |
59
+ | `/directory/users` | The users page |
60
+ | `/settings/general` | The settings page |
44
61
  | `/studio` | The EventCatalog Studio icon |
45
- | `/schemas/explorer` | The schema explorer page |
62
+ | `/schemas/explorer` | The schema explorer page |
63
+ | `/schemas/fields` | The schema insights page (SSR only) |
64
+
65
+ ### Use legacy group ids
66
+
67
+ You can also use legacy group ids to hide all items in a section at once. Setting a group id to `visible: false` hides every item that belongs to that group.
68
+
69
+ | Legacy ID | Items hidden |
70
+ | --- | --- |
71
+ | `/docs` | `/docs/custom` |
72
+ | `/discover` | All discover items (domains, services, events, commands, queries, flows, data stores, data products, external systems) |
73
+ | `/directory` | `/directory/teams` and `/directory/users` |
74
+ | `/settings` | `/settings/general` |
75
+
76
+ ```js title="eventcatalog.config.js"
77
+ // rest of the config
78
+ sidebar: [
79
+ {
80
+ id: '/directory',
81
+ // This will hide both Teams and Users
82
+ visible: false,
83
+ },
84
+ ]
85
+ ```
@@ -0,0 +1,73 @@
1
+ ---
2
+ sidebar_position: 1
3
+ sidebar_label: Overview
4
+ title: EventCatalog Editor
5
+ description: Understand what EventCatalog Editor is, who it is for, and how it fits into your catalog workflow.
6
+ ---
7
+
8
+ EventCatalog Editor is a local visual editor for maintaining an EventCatalog.
9
+
10
+ It runs on your machine, opens your catalog from disk, lets you edit architecture resources without working directly in Markdown or MDX, and gives you a Git-backed view of the changes before you commit them.
11
+
12
+ ![EventCatalog Editor open on a service resource](./images/editor.png)
13
+
14
+ ## Who the editor is for
15
+
16
+ The editor is for people who maintain an EventCatalog:
17
+
18
+ - Architects documenting [domains](/docs/development/guides/domains/introduction), [services](/docs/development/guides/services/introduction), [messages](/docs/development/guides/messages/overview), and [ownership](/docs/owners)
19
+ - Developers keeping resource documentation, schemas, and specifications up to date
20
+ - Analysts, product owners, or domain experts who can improve catalog content but do not want to edit MDX files directly
21
+
22
+ You still own your catalog as files. The editor makes those files easier to browse, edit, preview, review, and commit.
23
+
24
+ ::::info Need an EventCatalog first?
25
+
26
+ These docs assume you already have an EventCatalog project. If you are just getting started, create a catalog first with the [EventCatalog installation guide](/docs/development/getting-started/installation), then come back here.
27
+
28
+ ::::
29
+
30
+ ## What the editor does
31
+
32
+ Use EventCatalog Editor to:
33
+
34
+ - Open a local EventCatalog project
35
+ - Browse [domains](/docs/development/guides/domains/introduction), [services](/docs/development/guides/services/introduction), [messages](/docs/development/guides/messages/overview), [channels](/docs/development/guides/channels/introduction), [entities](/docs/development/guides/domains/entities/introduction), [data stores](/docs/development/guides/data/introduction), [flows](/docs/development/guides/flows/introduction), [users](/docs/development/guides/owners/users/introduction), and [teams](/docs/development/guides/owners/teams/introduction)
36
+ - Edit documentation in a rich editor or source editor
37
+ - Update common frontmatter fields through forms
38
+ - Add schemas to [events](/docs/development/guides/messages/events/introduction), [commands](/docs/development/guides/messages/commands/introduction), and [queries](/docs/development/guides/messages/queries/introduction)
39
+ - Add OpenAPI, AsyncAPI, and GraphQL specifications to domains and services
40
+ - Preview resources in a running EventCatalog site
41
+ - Inspect local Git changes, view diffs, revert files, and commit work
42
+ - Invite editors through [EventCatalog Cloud](https://eventcatalog.cloud) and assign editor seats
43
+
44
+ ## Local workflow
45
+
46
+ The editor sits on top of the same files that EventCatalog already uses.
47
+
48
+ ```mermaid
49
+ flowchart LR
50
+ A[Local EventCatalog files] --> B[EventCatalog Editor]
51
+ B --> C[Markdown, MDX, schema, and config changes]
52
+ C --> D[Git changes view]
53
+ D --> E[Commit locally]
54
+ E --> F[Your existing review and publishing workflow]
55
+ ```
56
+
57
+ The editor does not replace Git, Markdown, MDX, or your deployment process. It gives catalog maintainers a safer interface for making changes before those changes go through the workflow your team already uses.
58
+
59
+ ## Beta status
60
+
61
+ EventCatalog Editor is in beta. You can use it today, but some workflows and features may change before general availability.
62
+
63
+ The editor is a seat-based paid product. Community includes 1 editor seat, Starter includes 3 editor seats, Scale includes 10 editor seats, and Enterprise includes unlimited editor seats. See the [pricing page](/pricing) for current plan details.
64
+
65
+ If you want to help shape the editor, join the [EventCatalog Discord](https://eventcatalog.dev/discord) or [open an issue in the editor repository](https://github.com/event-catalog/eventcatalog-editor-code/issues).
66
+
67
+ ## Next steps
68
+
69
+ - Follow the [first edit tutorial](/docs/editor/first-edit).
70
+ - Learn how to [run the editor locally](/docs/editor/how-to/run-locally).
71
+ - Learn how to [use the Flow Editor](/docs/editor/how-to/use-flow-editor).
72
+ - Learn how to [invite editors](/docs/editor/how-to/invite-editors).
73
+ - Understand [how the editor works](/docs/editor/explanation/how-it-works).
@@ -0,0 +1,124 @@
1
+ ---
2
+ sidebar_position: 2
3
+ sidebar_label: First edit tutorial
4
+ title: Make your first edit with EventCatalog Editor
5
+ description: Learn the basic editor workflow by opening a local catalog, changing a resource, previewing it, and reviewing the Git change.
6
+ slug: /editor/first-edit
7
+ ---
8
+
9
+ This tutorial takes you through the first successful editor workflow:
10
+
11
+ 1. Run EventCatalog locally
12
+ 2. Run EventCatalog Editor
13
+ 3. Open a catalog resource
14
+ 4. Make a small documentation change
15
+ 5. Preview the resource
16
+ 6. Review the Git diff
17
+ 7. Publish the change
18
+
19
+ The goal is not to document a whole architecture. The goal is to learn the editor loop.
20
+
21
+ ::::info Need a catalog?
22
+
23
+ This tutorial assumes you already have an EventCatalog project on your machine. If you do not, follow the [EventCatalog installation guide](/docs/development/getting-started/installation) first.
24
+
25
+ ::::
26
+
27
+ ## Prerequisites
28
+
29
+ Before you start, make sure you have:
30
+
31
+ - Node.js 22 or later
32
+ - Git installed
33
+ - An EventCatalog project containing `eventcatalog.config.js`
34
+ - Access to EventCatalog Editor through [EventCatalog Cloud](https://eventcatalog.cloud)
35
+ - A terminal open in or near your catalog project
36
+
37
+ If a teammate needs access, an organization admin can [invite them as an editor](/docs/editor/how-to/invite-editors).
38
+
39
+ Check Node and Git with:
40
+
41
+ ```bash
42
+ node -v
43
+ git --version
44
+ ```
45
+
46
+ ## Start your EventCatalog preview
47
+
48
+ Open a terminal in your EventCatalog project and start EventCatalog:
49
+
50
+ ```bash
51
+ npm run dev
52
+ ```
53
+
54
+ By default, EventCatalog runs at [http://localhost:3000](http://localhost:3000).
55
+
56
+ The editor can still run without a preview, but preview links are only available when EventCatalog is running locally.
57
+
58
+ ## Start the editor
59
+
60
+ Open another terminal in the same catalog directory and run:
61
+
62
+ ```bash
63
+ npx @eventcatalog/editor
64
+ ```
65
+
66
+ The editor starts on [http://localhost:3900](http://localhost:3900) and opens your browser.
67
+
68
+ If the editor asks you to sign in, sign in with [EventCatalog Cloud](https://eventcatalog.cloud) and return to the local editor.
69
+
70
+ ## Open a resource
71
+
72
+ Choose a resource from the left navigation. A good first edit is a [service](/docs/development/guides/services/introduction), [domain](/docs/development/guides/domains/introduction), [event](/docs/development/guides/messages/events/introduction), [command](/docs/development/guides/messages/commands/introduction), or [query](/docs/development/guides/messages/queries/introduction) that already exists in your catalog.
73
+
74
+ The editor shows:
75
+
76
+ - The resource list on the left
77
+ - The resource documentation in the center
78
+ - Metadata and relationship fields around the editor
79
+
80
+ ![Service resource open in EventCatalog Editor](./images/editor.png)
81
+
82
+ ## Make a small change
83
+
84
+ Change a short paragraph, summary, [owner](/docs/owners), badge, or other low-risk field.
85
+
86
+ The editor writes changes back to your local catalog files. For example, editing a service updates the matching `index.mdx` file in your catalog.
87
+
88
+ You can use the rich editor for normal writing, or switch to source mode when you need to work directly with Markdown, MDX, or frontmatter.
89
+
90
+ ## Preview the resource
91
+
92
+ Use **Open Preview** to view the resource in your running EventCatalog site.
93
+
94
+ ![Open Preview button in EventCatalog Editor](./images/open-preview.png)
95
+
96
+ Preview opens the page from your local EventCatalog development server. If preview is unavailable, check that EventCatalog is running and that the editor detected the correct preview port.
97
+
98
+ ## Review the change
99
+
100
+ Open **Changes** from the editor navigation.
101
+
102
+ The changes page groups local Git changes by EventCatalog resource. Open the changed file to inspect the diff.
103
+
104
+ ![Changes page showing a local Git diff](./images/change-diff.png)
105
+
106
+ ## Publish the change
107
+
108
+ When the diff looks right, click **Publish** in the editor.
109
+
110
+ In the beta editor, **Publish** commits your changes locally to Git. It does not deploy your catalog or open a pull request.
111
+
112
+ After publishing, continue with your team's normal review and release workflow. For example, you might push a branch and open a pull request, or push directly if that is how your catalog is maintained.
113
+
114
+ ## What you learned
115
+
116
+ You have completed the core editor loop:
117
+
118
+ - Open a local catalog
119
+ - Edit a resource
120
+ - Preview the resource locally
121
+ - Review the Git diff
122
+ - Publish a local commit
123
+
124
+ Next, learn how to [edit resources](/docs/editor/how-to/edit-resource), [add schemas and specifications](/docs/editor/how-to/add-schemas-and-specifications), or [review and publish changes](/docs/editor/how-to/review-and-commit-changes).