Getting Started

Installing locally

Install TypeGPU using the package manager of your choice.

npm install typegpu

pnpm add typegpu

yarn add typegpu

TypeScript doesn’t yet ship WebGPU types by default, so we install them separately:

npm install --save-dev @webgpu/types

pnpm add -D @webgpu/types

yarn add -D @webgpu/types

Then add the following to your tsconfig.json:

{
  "compilerOptions": {
    "types": ["@webgpu/types"],
    // ...
  },
  // ...
}

For overloaded operator support in JavaScript/TypeScript shaders, setup tsover in your project.

function 
function foo(): void
foo() {
  'use gpu';
  const value = 
import d
d.
function vec3f(): d.v3f (+5 overloads)
export vec3f
Schema representing vec3f - a vector with 3 elements of type f32.
Also a constructor function for this vector value.
@example const vector = d.vec3f(); // (0.0, 0.0, 0.0)
const vector = d.vec3f(1); // (1.0, 1.0, 1.0)
const vector = d.vec3f(1, 2, 3.5); // (1.0, 2.0, 3.5)
@example const buffer = root.createBuffer(d.vec3f, d.vec3f(0, 1, 2)); // buffer holding a d.vec3f value, with an initial value of vec3f(0, 1, 2);
vec3f() * 20 - 0.5;
const value: d.v3f
}

AI Tools

To install the official TypeGPU Skill, head to the Software Mansion Skills repository and select the TypeGPU skill during the setup process. You can also use the experimental TypeGPU MCP to make it easier for agents to catch runtime errors and inspect the generated WGSL code along with other useful runtime information.

Live Examples

Our live examples showcase many use-cases of TypeGPU. Feel free to check them out! You can also open each of them on StackBlitz in order to edit the code and see the preview update live, or to bootstrap your own project.

Troubleshooting

WebGPU types are not available

If WebGPU types, such as GPUDevice or GPUBuffer, are not recognized in your project, make sure to install the officially maintained @webgpu/types npm package.

npm install --save-dev @webgpu/types

pnpm add -D @webgpu/types

yarn add -D @webgpu/types

Then in tsconfig.json:

{
  // ...
  "compilerOptions": {
    // ...
    "types": ["@webgpu/types"]
  }
}

Or you can use typeRoots:

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@webgpu/types", "./node_modules/@types"]
  }
}

If you encounter any other issues, make sure to look into the rest of our docs, as well as the WebGPU or the react-native-wgpu documentations. For any further questions, you can contact us via the Software Mansion Community Discord or on GitHub.