Editor support

Install

Install typeshade.vscode-typeshade from the Visual Studio Marketplace, or from Open VSX in an editor that installs from there. From a terminal, one line does it:

code --install-extension typeshade.vscode-typeshade

The desktop needs VS Code 1.90 or newer. The extension turns its TypeScript server plugin on for the TypeScript version the workspace uses, so a repository that pins its own typescript gets the plugin too.

In VS Code

Open a file that starts with "use typeshade". The extension answers for it the way the compiler does.

• Diagnostics, hover, completion, signature help, go to definition, references and rename come from the TypeShade language service, through a TypeScript server plugin. TypeScript's own false errors on a shader file go away. Every other TypeScript file is left as it is.
• TypeShade: Show WGSL, TypeShade: Show GLSL and TypeShade: Show Reflection open a preview beside the editor. It follows the active file and recompiles as you type.
• TypeShade: Show Canvas draws the shader in the preview with WebGPU. It needs a VS Code webview that has a WebGPU adapter, and says so where there is none.
• TypeShade: Run Entry on CPU runs a function of the file on the CPU with the arguments you type.

VS Code for the Web

On vscode.dev and other VS Code for the Web pages, a shader file gets diagnostics, hover and imports between shader files, through the same plugin. Every command above needs the desktop version. On the web each one shows a message that says so and does nothing else.

Two conditions apply.

• VS Code for the Web 1.110 or newer. An older one does not load the plugin, so TypeScript's own false errors stay on a shader file.
• A page that is cross-origin isolated. Without it the TypeScript server runs no semantic checks in the browser, so neither TypeShade nor TypeScript reports an error. A VS Code for the Web you host yourself needs the Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers.

When a condition is missing, the extension shows a warning once. The web build was tested in Chromium on VS Code for the Web 1.110 and 1.139.1, and no other browser was tried. On vscode.dev itself the published extension was checked by hand: the page and the TypeScript servers are cross-origin isolated, and the diagnostics and hover arrive. github.dev was not checked, and completion, signature help, references and rename have no browser test.

Playground round trip

The Playground's Download as a folder button downloads a zip of the workspace as a folder: the files, a typeshade.json that names the main file and the passes, and a recommendation for this extension. Open in VS Code, the button beside it, hands the workspace to the extension, which asks for a folder, writes the files there and opens it.

In the other direction, TypeShade: Open in Playground opens the active file, the files it imports and its passes in the Playground. TypeShade: Open Playground Link writes the workspace that a Playground link carries to a folder and opens it. Both need the desktop version.

Coding agents

@typeshade/mcp is a Model Context Protocol server on npm. It gives a coding agent the diagnostics the editor shows, the WGSL and GLSL the compiler emits, types and navigation, and a run of a shader function on the CPU. Claude Code, Codex, Cursor, VS Code agent mode and Gemini CLI can start it. In Claude Code, one plugin installs the server together with a skill that teaches the language:

/plugin marketplace add typeshade/vscode-typeshade
/plugin install typeshade@typeshade

The other clients run npx -y @typeshade/mcp, and the package README has the settings for each.

The extension and the server are developed in typeshade/vscode-typeshade.