---
title: Web
description: Install vgpu, render a gradient to a canvas, and load .wgsl files in Next.js or Vite.
---

# Web



# Web

In the browser, vgpu renders with WebGPU straight to a `<canvas>`. Install the package, write a fragment shader, and draw.

## Install

```bash
npm install vgpu
```

## Render a gradient

Create a context, wrap your canvas in a [`Surface`](/docs/reference/vgpu/surface#surface), and draw an effect:

```ts
import { init, effect, surface } from "vgpu";
import gradientSource from "./gradient.wgsl";

const gpu = await init();
const canvas = document.querySelector("canvas")!;
const canvasSurface = surface(gpu, canvas);
const gradient = effect(gpu, gradientSource);

gradient.draw(canvasSurface); // renders immediately
```

```wgsl
// gradient.wgsl
@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  return vec4f(uv, 0.4, 1.0);
}
```

## Load .wgsl files in Next.js

Add the loader rule to your Next.js config:

```js
// next.config.mjs
const config = {
  turbopack: {
    rules: {
      "*.wgsl": {
        loaders: ["@vgpu/wgsl/loader-webpack"],
        as: "*.js",
      },
    },
  },
};

export default config;
```

<Callout type="info">
  Good to know: for webpack builds, add the same loader as a module rule: `config.module.rules.push({ test: /\.wgsl$/, use: "@vgpu/wgsl/loader-webpack" })`.
</Callout>

## Load .wgsl files in Vite

Add the plugin from `@vgpu/wgsl/loader-vite`:

```js
// vite.config.js
import { defineConfig } from "vite";
import { wgslVitePlugin } from "@vgpu/wgsl/loader-vite";

export default defineConfig({
  plugins: [wgslVitePlugin()],
});
```

## Type .wgsl imports

Create a `wgsl-env.d.ts` in your project so TypeScript types every `.wgsl` import as a string:

```tsx
/// <reference types="@vgpu/wgsl/wgsl-types" />
```


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)