Getting Started JavaScript

WESL is designed to work with both Rust and JavaScript. We have two distinct implementations for these languages, wesl-rs and wesl-js.

Wesl can be operated in a few different ways:

• Using the standalone Command-Line tool to generate WGSL files.
• At build-time, using a Vite Plugin (JavaScript) or a Build Script (Rust).
• At run-time, using the linker libraries.

wesl-js documentation: https://github.com/wgsl-tooling-wg/wesl-js?tab=readme-ov-file#wesl

Using wesl-js with a plugin

• Add the wesl-js dependencies

  npm install wesl
  npm install -D wesl-plugin
  

• Add the plugin to vite.config.ts

  import weslPlugin from "wesl-plugin/vite";
  import { linkBuildExtension } from "wesl-plugin";
  
  export default {
    plugins: [ 
      weslPlugin({ extensions: [linkBuildExtension] }) 
    ],
  };
  

• Place your shader in shaders/main.wesl.

• Paste this code to use your shader:

  import mainWesl from "../shaders/main.wesl?link";
  
  const linked = await link({ ...mainWesl });
  const shader = linked.createShaderModule(device, {});
  

Using wesl-js at run-time

• Add wesl-js dependency: npm install wesl
• Place your shader in shaders/main.wesl.
• Paste this code to use your shader:

  import { link } from "wesl";
  
  // fetch the wesl code, this depends on your target platform
  
  const shaderCode = await link({
    weslSrc: {
      "main.wesl": mainWeslString,
    },
  });
  
  const shader = shaderCode.createShaderModule(device, {});
  

Using the standalone CLI

Check out the CLI documentation

Next Steps

Visit the Authoring Shaders page to learn how to write your first WESL shaders.

Visit the Reference page for the complete documentation of WESL Extensions.