Shader Studio

A GLSL and Slang shader viewer for VS Code with hot reloading. Edit Shadertoy-style GLSL fragment shaders or write Slang shaders for the WebGPU pipeline — both with live preview, multi-pass pipelines, and visual debugging.

Try Shader Studio in Standalone web mode in your browser.

VSCode Marketplace

https://marketplace.visualstudio.com/items?itemName=teaqu.shader-studio.

Documentation

https://teaqu.github.io/shader-studio/docs/

Installation

Install through VS Code extensions. Search for "Shader Studio".

Visual Studio Code Market Shader Studio

Development

Building the Extension

This repository is an npm workspace managed with Turborepo. Run build commands from the repository root unless a command says otherwise.

Prerequisites:

• Node.js 18 or newer
• npm 9 or newer

Install dependencies:

npm install

Build everything needed by the VS Code extension:

npm run build

That command builds the UI packages, copies their compiled assets into the extension package, and then builds the extension host code.

Useful targeted builds:

npm run build:types
npm run build:ui
npm run build:shader-explorer
npm run build:extension

For extension packaging work, run the extension package script:

cd extension
npm run build

To create a .vsix package locally:

cd extension
npm run vsce-package

Web Mode

See the Standalone Mode guide for getting started, workspace controls, and browser storage.

Run the standalone web build locally:

npm run dev:standalone

Build the static site (same output GitHub Pages deploys):

npm run build:standalone

The standalone/ Svelte app owns the workspace tabs, editor pane, explorer integration, and browser storage. It embeds ui/ as a Viewer panel; the viewer keeps its own Preview, Config, Debug, Frame Times, and Export tabs. Workspace layout resets affect only the outer tabs. The viewer's Layout menu resets its inner layout separately.

Run standalone checks with npm run check -w @shader-studio/standalone, npm test -w @shader-studio/standalone, and npm run test:e2e -w @shader-studio/standalone.

Docs

https://teaqu.github.io/shader-studio/docs/

Docs are in /docs and configured with MkDocs (/mkdocs.yml).

Install dependencies:

python3 -m venv .venv
source .venv/bin/activate
pip install -r docs/requirements.txt

• Local build: mkdocs build
• Local preview: mkdocs serve

GitHub Pages deployment workflow is at .github/workflows/docs.yml.