sveltejs · andrevcaseiro · Feb 8, 2026 · Feb 13, 2026 · Feb 13, 2026
diff --git a/.prettierignore b/.prettierignore
@@ -14,4 +14,5 @@ packages/typescript-plugin/src/**/*.d.ts
 **/dist
 .github/**
 .history/**
-pnpm-lock.yaml
+pnpm-lock.yaml
+**/.vscode-test-web
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -139,6 +139,20 @@ To test your changes in VSCode:
 
 This launches a new VSCode window and a watcher for your changes. In this dev window you can choose an existing Svelte project to work against. When you make changes to `svelte-vscode` use the command "Reload Window" in the VSCode command palette to see your changes. When you make changes to `language-server` use the command "Svelte: Restart Language Server". When you make changes to `svelte2tsx`, you first need to run `pnpm build` within its folder, then restart the language server. When you make changes to`typescript-plugin`, you need to first run `pnpm build` within its folder and then use the command "TypeScript: Restart Server".
 
+#### Testing in VSCode web
+
+To test changes in the browser:
+
+```sh
+pnpm install
+pnpm bootstrap
+cd packages/svelte-vscode
+pnpm build
+pnpm run-in-browser
+```
+
+This hosts VSCode with the extension locally and launches Chromium. You can open the link in a different browser if you prefer, and open a Svelte project to see the result.
+
 #### Testing in other editors
 
 For other editors, you'll need to build the language server and configure your editor to use the local build. See the documentation for your specific editor.

diff --git a/packages/svelte-vscode/.gitignore b/packages/svelte-vscode/.gitignore
@@ -1,3 +1,4 @@
+/.vscode-test-web/
 /dist
 /node_modules
 /syntaxes/svelte.tmLanguage.json

diff --git a/packages/svelte-vscode/package.json b/packages/svelte-vscode/package.json
@@ -4,13 +4,15 @@
     "private": true,
     "description": "Svelte language support for VS Code",
     "main": "dist/src/extension.js",
+    "browser": "dist/src/extension.browser.js",
     "scripts": {
         "build:grammar": "npx js-yaml syntaxes/svelte.tmLanguage.src.yaml > syntaxes/svelte.tmLanguage.json && npx js-yaml syntaxes/postcss.src.yaml > syntaxes/postcss.json",
         "build:ts": "tsc -p ./",
         "build": "npm run build:ts && npm run build:grammar",
         "vscode:prepublish": "npm install && npm run build && npm prune --production",
         "watch": "npm run build:grammar && tsc -w -p ./",
-        "test": "npm run build:grammar && node test/grammar/test.js && vitest --run"
+        "test": "npm run build:grammar && node test/grammar/test.js && vitest --run",
+        "run-in-browser": "vscode-test-web --browserType=chromium --extensionDevelopmentPath=."
     },
     "repository": {
         "type": "git",
@@ -55,6 +57,10 @@
                 "svelte.language-server.runtime-args"
             ],
             "description": "The extension requires workspace trust because it executes code specified by the workspace. Loading the user's node_modules and loading svelte config files is disabled when untrusted"
+        },
+        "virtualWorkspaces": {
+            "supported": "limited",
+            "description": "In web, only syntax highlighting, snippets, and language configuration are available."
         }
     },
     "contributes": {
@@ -552,67 +558,82 @@
         "commands": [
             {
                 "command": "svelte.restartLanguageServer",
-                "title": "Svelte: Restart Language Server"
+                "title": "Svelte: Restart Language Server",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.showCompiledCodeToSide",
                 "title": "Svelte: Show Compiled Code",
                 "icon": {
                     "light": "icons/preview-right-light.svg",
                     "dark": "icons/preview-right-dark.svg"
-                }
+                },
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.extractComponent",
-                "title": "Svelte: Extract Component"
+                "title": "Svelte: Extract Component",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.migrate_to_svelte_5",
-                "title": "Svelte: Migrate Component to Svelte 5 Syntax"
+                "title": "Svelte: Migrate Component to Svelte 5 Syntax",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.typescript.findAllFileReferences",
-                "title": "Svelte: Find File References"
+                "title": "Svelte: Find File References",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.typescript.findComponentReferences",
-                "title": "Svelte: Find Component References"
+                "title": "Svelte: Find Component References",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.kit.generateMultipleFiles",
-                "title": "SvelteKit: Create route"
+                "title": "SvelteKit: Create route",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.kit.generatePage",
-                "title": "SvelteKit: Create +page.svelte"
+                "title": "SvelteKit: Create +page.svelte",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.kit.generatePageLoad",
-                "title": "SvelteKit: Create +page.js/ts"
+                "title": "SvelteKit: Create +page.js/ts",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.kit.generatePageServerLoad",
-                "title": "SvelteKit: Create +page.server.js/ts"
+                "title": "SvelteKit: Create +page.server.js/ts",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.kit.generateLayout",
-                "title": "SvelteKit: Create +layout.svelte"
+                "title": "SvelteKit: Create +layout.svelte",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.kit.generateLayoutLoad",
-                "title": "SvelteKit: Create +layout.js/ts"
+                "title": "SvelteKit: Create +layout.js/ts",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.kit.generateLayoutServerLoad",
-                "title": "SvelteKit: Create +layout.server.js/ts"
+                "title": "SvelteKit: Create +layout.server.js/ts",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.kit.generateServer",
-                "title": "SvelteKit: Create +server.js/ts"
+                "title": "SvelteKit: Create +server.js/ts",
+                "when": "!isWeb"
             },
             {
                 "command": "svelte.kit.generateError",
-                "title": "SvelteKit: Create +error.svelte"
+                "title": "SvelteKit: Create +error.svelte",
+                "when": "!isWeb"
             }
         ],
         "menus": {
@@ -751,6 +772,7 @@
         "@types/node": "^18.0.0",
         "@types/semver": "^7.7.0",
         "@types/vscode": "^1.67",
+        "@vscode/test-web": "^0.0.78",
         "js-yaml": "^3.14.0",
         "semver": "^7.7.2",
         "tslib": "^2.4.0",

diff --git a/packages/svelte-vscode/src/extension.browser.ts b/packages/svelte-vscode/src/extension.browser.ts
@@ -0,0 +1,12 @@
+import { ExtensionContext } from 'vscode';
+
+/**
+ * Web extension entry point, must be contained in a single file (or packaged into one file).
+ */
+export function activate(context: ExtensionContext) {
+    // No activation logic needed - declarative features work automatically
+}
+
+export function deactivate() {
+    // No cleanup needed
+}