chore(blog): add asyncapi vscode preview goes web now available in your browser 🚀 #4484
+88
−0
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| /// <reference types="next" /> | ||
| /// <reference types="next/image-types/global" /> | ||
| /// <reference path="./.next/types/routes.d.ts" /> | ||
|
|
||
| // NOTE: This file should not be edited | ||
| // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,82 @@ | ||||||
| --- | ||||||
| title: AsyncAPI VS Code Preview Goes Web: Now Available in Your Browser 🚀 | ||||||
| date: 2025-10-14T03:45:29+05:30 | ||||||
| type: Community | ||||||
| canonical: | ||||||
| tags: ['vscode-extension','webview'] | ||||||
| cover: /img/posts/may-2021-at-asyncapi/cover.webp | ||||||
| authors: | ||||||
| - name: Ruchi Pakhle | ||||||
| photo: /img/avatars/lpgornicki.webp | ||||||
| link: https://twitter.com/Ruchicodess | ||||||
| byline: AsyncAPI Maintainer | ||||||
| excerpt: 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. | ||||||
| --- | ||||||
|
|
||||||
| 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? | ||||||
|
|
||||||
| Making the extension web-compatible required several technical improvements: | ||||||
|
|
||||||
| - **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 integration** (unmaintained, incompatible with webmode) | ||||||
| - **Updated VS Code dependencies** (`vscode` and `@types/vscode`) to ensure web extension compatibility | ||||||
|
|
||||||
| ## Why Does This 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** - No need to clone repos locally just to preview files | ||||||
| 🚀 **Teams adopting AsyncAPI in cloud-first workflows** - Work entirely in the browser | ||||||
| 💡 **New users experimenting** without needing to install VS Code | ||||||
|
|
||||||
| This is a **huge usability improvement** that makes AsyncAPI more accessible to everyone. Whether you're working with public repositories or have access to private ones, you can now preview AsyncAPI files directly from GitHub with just a few clicks! | ||||||
|
|
||||||
| ## How to Try It Out | ||||||
|
|
||||||
| 1. Open any repo with AsyncAPI files on [vscode.dev](https://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 | ||||||
| 4. That's it! Your AsyncAPI docs will render beautifully in your browser 🚀 | ||||||
|
|
||||||
| ## 🎥 Demo | ||||||
|
|
||||||
| See the AsyncAPI VS Code Preview running in web mode below: | ||||||
|
|
||||||
| [](https://docs.google.com/videos/d/1a9raPb68NdEjj6qExkp81CBQicLPwqYg3V9WeG_P1lg/edit?usp=sharing "Click to watch demo") | ||||||
|
|
||||||
|
|
||||||
| ## Spreading the Word | ||||||
|
|
||||||
| This web compatibility represents a significant step forward for AsyncAPI tooling accessibility. Here's how we can make the community aware of this improvement: | ||||||
|
|
||||||
| - **Share your experience** on social media when you try the web extension | ||||||
| - **Demonstrate it during team meetings** to show how easy AsyncAPI adoption can be | ||||||
| - **Contribute to discussions** in the AsyncAPI community Slack about web-based tooling | ||||||
| - **Write about your use cases** and how web compatibility improves your workflow | ||||||
|
|
||||||
| ## Maintenance Mode | ||||||
|
|
||||||
| This extension is now in maintenance mode: | ||||||
|
|
||||||
| - We'll continue updating dependencies and ensuring compatibility | ||||||
| - No new major features are planned currently | ||||||
| - Community contributions for bug fixes and improvements are welcome | ||||||
|
|
||||||
| ## What's Next? | ||||||
|
|
||||||
| We're excited to bring AsyncAPI Preview into the browser, making it even easier for developers to adopt and explore AsyncAPI. This web compatibility opens up new possibilities for: | ||||||
|
|
||||||
| - **Educational content** - Easier to demonstrate AsyncAPI concepts | ||||||
| - **Open source contributions** - Lower barrier for reviewing and contributing to AsyncAPI projects | ||||||
|
Contributor
There was a problem hiding this comment. Use hyphen for compound adjective. Line 79 reads "Open source contributions" but when used as a compound adjective modifying a noun, it should be hyphenated: "open-source contributions". Apply this diff: - **Open source contributions** - Lower barrier for reviewing and contributing to AsyncAPI projects
+ **open-source contributions** - Lower barrier for reviewing and contributing to AsyncAPI projects📝 Committable suggestion
Suggested change
🧰 Tools🪛 LanguageTool[uncategorized] ~79-~79: If this is a compound adjective that modifies the following noun, use a hyphen. (EN_COMPOUND_ADJECTIVE_INTERNAL) 🤖 Prompt for AI Agents |
||||||
| - **Remote collaboration** - Teams can work with AsyncAPI files without local setup requirements | ||||||
|
|
||||||
| Give it a try on [vscode.dev](https://vscode.dev) today, and let us know what you think in the [AsyncAPI community Slack](https://www.asyncapi.com/slack-invite). Your feedback helps us continue improving the AsyncAPI developer experience! 🚀 | ||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Replace Google Drive video links with accessible demo format.
The video demo section uses Google Drive sharing URLs that are not suitable for direct embedding or browser preview. Readers will be redirected away from the blog to external video services rather than seeing the demo inline. Please replace with:
🤖 Prompt for AI Agents