- Published on
Working with AsyncAPI documents locally
- Plain IDE
- SchemaStore
- File Naming
- (Optional) YAML Extension
- Summary
- IDE Plugins and Extensions
- VSCode
- IntelliJ
- Summary
- AsyncAPI CLI
- Summary
- My Choice
Read below article, as ChatGPT will give you a very misleading answer with links poining to not existing resources - as usual.
We live in times where people seem tired of cloud tools, not only for privacy reasons. In recent years, there’s been a big push towards online IDEs, code spaces, and other flashy solutions. But we all know how the web works. You start with a simple online tool, like a basic REST client, and before you know it, it’s a bloated app loaded with features you’ll never use, and it takes forever to load.
To move fast, you need local and minimal setups. In this article, I’ll explore tools that help you work with AsyncAPI documents with just the basics.
In this article intentionally I ignore existance of AsyncAPI documents created with JSON. Editing huge JSON files manually is a nightmare. My assumption is that if someone stores an AsyncAPI document with JSON, it is most probably generated from code, and therefore below article is not interesting for such users.
Plain IDE
You don’t need much more than your favorite IDE.
If your favorite IDE isn’t on this list, it might be time to consider a better one.
With just your IDE, you can get awesome features like:
Validation
Instant feedback on whether your document is valid.
Tooltips
Ace has worked hard to ensure the descriptions in the AsyncAPI spec markdown are reflected in JSON Schema tooltips. This means you’ll see detailed descriptions like this:
Autocompletion
But how does it work?
AsyncAPI is essentially a markdown document that defines all rules, fields, and vocabularies. Cool, but it’s massive! AsyncAPI documents can represent complex structures. How do you ensure your document is valid? Use JSON Schema.
At AsyncAPI, we provide JSON Schemas that define validation rules described initially in specification markdown file. These schemas integrate with SchemaStore — a fantastic open-source project.
SchemaStore
SchemaStore is a community-driven project that hosts JSON Schemas for many tools and frameworks (GitHub Actions, OpenAPI, Angular, ESLint, etc.). IDEs use SchemaStore’s API to enable features like validation and autocompletion.
SchemaStore also holds information on how to match schemas to files based on given patterns, making it even easier to use.
File Naming
AsyncAPI doesn’t enforce naming conventions for documents. However, we recommend the following pattern:
"fileMatch": ["asyncapi.json", "asyncapi.yml", "asyncapi.yaml"]
This means your file name should include asyncapi
(lowercase):
asyncapi-client.yml
websocket_asyncapi.yaml
(Optional) YAML Extension
If you use VSCode, install the YAML extension for SchemaStore support with YAML files. IntelliJ IDEA users—you’re in luck; it’s built-in.
When your IDE recognizes the file as AsyncAPI, you’re set.
Summary
By simply naming your files correctly and installing an extension when needed, you get great features:
✅ Pros:
- Easy to set up, you just need to name your files properly.
- No dependencies.
- Validation!
- Autocompletion and detailed descriptions.
⚠️ Cons:
- Limited validation (JSON Schema covers ~80% of cases). Not all rules can be described with JSON Schema.
- No human-readable preview unless you count YAML as human format 😊.
IDE Plugins and Extensions
Want more power? Add plugins or extensions to your IDE. I still recommend you stick to the naming convention for AsyncAPI documents.
VSCode
The asyncapi-preview
extension offers features like:
- Scaffold an example AsyncAPI document.
- Render documentation for humans.
- Visualize application communication (EDA visualizer).
Check out the extension’s source code, its integrated docs view, and the visualizer.
IntelliJ
There’s also a plugin for IntelliJ called...surprise surprise: AsyncAPI. It offers:
- Scaffold an example AsyncAPI document.
- Resolve references with autocompletion 😍
- Render previews in a browser.
Check out the plugin’s source code.
Summary
No real downsides here!
✅ Pros:
- Human-readable previews
- Community-driven: contribute if needed
- Detailed validation (beyond JSON Schema). These tools use official AsyncAPI component for docs rendering, with official AsyncAPI Parser included for validation purposes.
AsyncAPI CLI
Let’s level up with AsyncAPI CLI. Whether you use it alone or with an IDE, it’s packed with features:
-
Detailed validation:
asyncapi validate ./asyncapi-client.yaml Errors: 39:9 error asyncapi3-operation-messages-from-referred-channel Operation message does not belong to the specified channel. operations.sendUserSignedup.messages[0]
-
Run AsyncAPI Studio locally with hot reload:
asyncapi start studio -f ./asyncapi-client.yaml
-
Scaffold an example document:
asyncapi new --file-name=my-asyncapi.yml --example=default-example.yaml --no-tty
And much more, like code generation, bundling, and conversion.
Summary
AsyncAPI CLI is fantastic. CLIs are underrated tools every developer should use.
✅ Pros:
- Works without an IDE
- Comprehensive validation and features
- Integrated Studio for previews
⚠️ Cons:
- Studio (preview tool) is still a web app and lacks local file system references support.
Pro Tip: Contribute to the project to solve the limitation.
My Choice
I'm a VSCode user so:
- I follow AsyncAPI recommended naming convention for AsyncAPI documents and use YAML extension.
- The asyncapi-preview extension and the EDA visualizer 😍
- For all the extra feature, I always have a dedicated terminal window to run AsyncAPI CLI commands.
Stay local, stay free.