Getting Started JavaScript

Quick Start

Here's a typical setup for a front end application using wesl and wesl-plugin/vite.

Install

npm install wesl                      # for runtime linking
npm install --save-dev wesl-plugin    # for bundler integration

Configure Vite

/// vite.config.ts
import viteWesl from "wesl-plugin/vite";

export default {
  plugins: [viteWesl()],
};

Link at Runtime

/// <reference types="wesl-plugin/suffixes" />
import { link, createWeslDevice } from "wesl";
import appWesl from "../shaders/app.wesl?link";

async function example() {
  const device = createWeslDevice(await navigator.gpu.requestAdapter()); 
  const linked = await link(appWesl);
  const shaderModule = linked.createShaderModule(device, {});
}

Other Build Environments

WESL is easy to integrate into a diverse variety of JavaScript/TypeScript build environments. See JavaScript Builds.

Default Project Organization

By default, WESL looks for .wesl and .wgsl files in a ./shaders directory.

Optionally, create a wesl.toml file alongside package.json to customize shader paths, dependencies, and other settings. See the wesl.toml reference for details.

Next Steps

See Runtime Linking for more options to control linking at runtime.

See JavaScript Builds for more ways to integrate WESL into your JavaScript or TypeScript project.

See WESL Features for shader language enhancements in WESL.

See WESL-js Examples for example projects.