feat: enable web compatibility for extension (#286)

Co-authored-by: Ruchi Pakhle <ruchipakhle@gmail.com>

Author: Ruchip16

.gitignore

@@ -4,3 +4,5 @@ node_modules
 .vscode-test/
 *.vsix
 .DS_Store
+*.vscode-test-web/
+.vscode/

CODEOWNERS

@@ -5,4 +5,4 @@
 # For more details, read the following article on GitHub: https://help.github.com/articles/about-codeowners/.
 
 # These are the default owners for the whole content of this repository. The default owners are automatically added as reviewers when you open a pull request unless different owners are specified in the file.
-* @ivangsa @derberg @asyncapi-bot-eve
+* @ivangsa @derberg @asyncapi-bot-eve @Ruchip16

README.md

@@ -10,6 +10,65 @@ You can open AsyncAPI Preview from the editor title/context menu. (If you don't
 
 ![AsyncAPI Preview](docs/asyncapi-editor-title-context.png)
 
+## Web Extension Compatibility
+
+The extension now runs in the web version of VS Code i.e. directly in your browser on `vscode.dev`, `github.dev`, `gitlab.com/-/ide`, `gitpod.io`, and other cloud development environments, as well as a local browser host for development.
+
+### Key Benefits
+
+- No install required: open a repo in your browser and preview AsyncAPI files without a desktop VS Code.
+- Works on vscode.dev, github.dev, GitLab Web IDE, Gitpod & more: perfect for quick reviews during PRs or exploring examples.
+- Consistent experience: same preview workflow on desktop and web.
+
+### Usage
+
+A) On vscode.dev / github.dev
+
+1. Open your repo:
+   - https://vscode.dev/github/<org>/<repo> (or use the . keyboard shortcut on GitHub to open github.dev).
+2. Install AsyncAPI Preview in that browser session (Command Palette → "Extensions: Install from VSIX…" if you're side-loading, or from Marketplace once the web-ready version is published).
+3. Open an *.yaml / *.yml (or JSON) AsyncAPI file.
+4. Run AsyncAPI: Preview Document from the Command Palette (⇧⌘P / Ctrl+Shift+P).
+
+B) Locally in a browser (dev/test)
+1. Install dependencies & build:
+```
+npm install
+npm run build
+```
+
+2. (If not already present) add a dev script to package.json to launch a web host:
+
+```
+{
+  "scripts": {
+    "open-in-browser": "vscode-test-web --extensionDevelopmentPath=. --port=8082 ."
+  },
+  "devDependencies": {
+    "@vscode/test-web": "^1.x.x"
+  }
+}
+```
+
+Then:
+```
+npm run open-in-browser
+```
+This opens a web VS Code at http://localhost:8082. Open a workspace/folder that contains your AsyncAPI YAMLs, then run AsyncAPI: Preview Document.
+
+Tip: If you don’t see the preview, ensure your file’s language mode is YAML (bottom-right of the status bar), and check Developer: Show Running Extensions to confirm activation.
+
+### Technical Changes
+- Removed Node-only modules (e.g., direct path/fs usage).
+- Introduced a lightweight pathUtils.ts for browser-safe path handling.
+- Updated VS Code engine/types to enable web extension support.
+- Removed unmaintained or web-incompatible pieces (e.g., legacy visualizer & Node-specific deps) to simplify the runtime and reduce bundle size.
+
+### Current limitations
+- The web host cannot use Node APIs; all file access must go through vscode.workspace.fs.
+- Auto-reload works on the active document save; changes to externally referenced files may not hot-reload yet.
+- vscode.dev can’t read your local disk—open files from a GitHub repo or use File → Open File… (upload) for one-off files.
+
 ## Automatic hot-reloading
 
 Automatic hot-reloading on editor save, but currently, it doesn't reload when saving referenced external files.
@@ -44,3 +103,4 @@ AsyncAPI Viewer utilizes the following open source projects:
 ### Contributors
 
 Ivan Garcia Sainz-Aja [ivangsa](https://github.com/ivangsa)
+Ruchi Pakhle [Ruchip16](https://github.com/Ruchip16)