Post title

AsyncAPI VS Code Preview Goes Web: Now Available in Your Browser 🚀

Post description

We’re excited to announce that the AsyncAPI VS Code Preview extension is now compatible with the web version of Visual Studio Code. This means you can preview AsyncAPI files directly in your browser, whether you’re using vscode.dev, github.dev, or a local web extension host.

Body

For years, the AsyncAPI VS Code Preview extension has been helping developers visualize and work with AsyncAPI documents directly inside VS Code. But until now, you needed a full desktop installation of VS Code to use it.

With this release, the extension is now fully web-compatible. That means:
✨ Open any GitHub repo in vscode.dev or github.dev, and you can instantly preview AsyncAPI files in your browser.
🌐 No local setup required — just your browser and an internet connection.
🔄 Works consistently across desktop and web, providing the same preview experience.

What changed under the hood?

• Removed Node.js-specific modules like fs, path, and external dependencies that are incompatible with browsers.
• Introduced lightweight browser utilities (pathUtils) for cross-platform file handling.
• Removed EDAVisualizer (unmaintained, not compatible with webmode).
• Updated VS Code dependencies (vscode and @types/vscode) to ensure web extension compatibility.

Why does it matter?

AsyncAPI adoption is growing quickly, and many contributors explore specs directly from GitHub repositories. Web compatibility lowers the barrier for:
📖 Contributors reviewing AsyncAPI specs on GitHub.
🚀 Teams adopting AsyncAPI in cloud-first workflows.
💡 New users experimenting without needing to install VS Code.

How to try it out

1. Open any repo with AsyncAPI files on vscode.dev.
2. Install the AsyncAPI Preview extension (now web-compatible).
3. Open a .yaml or .json file and run AsyncAPI: Preview Document from the Command Palette.

That’s it, your AsyncAPI docs will render beautifully in your browser. 🚀

Maintenance Mode

This extension is now in maintenance mode:

• We’ll continue updating dependencies and ensuring compatibility.
• No new major features are planned at the moment.

Closing

We’re excited to bring AsyncAPI Preview into the browser, making it even easier for developers to adopt and explore AsyncAPI. Give it a try on vscode.dev today, and let us know what you think in the AsyncAPI community Slack.

Guide

Here are a few steps you can follow to write an AsyncAPI blog post:

1. After getting feedback on the issue, fork the website repository or open it in Gitpod. You can do that by prefixing the issue URL with gitpod.io/#.
2. Run the command npm run write:blog.
3. Run the website by using instructions from the README to test your changes.
4. Open a PR with your blog post and test your changes with a preview of the site on Netlify. If you use Gitpod, it will create a fork of the website repo for you before you create a PR.
5. Maintainers reviewing the article (e.g., language, images) may ask for improvements.
6. Once it's merged, it will be available live in production. 🚀

We encourage you to write a blog post and share it with the community. We can't wait to read it 😄!