[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73856":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":39,"readmeContent":40,"aiSummary":41,"trendingCount":16,"starSnapshotCount":16,"syncStatus":42,"lastSyncTime":43,"discoverSource":44},73856,"TypeGPU","software-mansion\u002FTypeGPU","software-mansion","A modular and open-ended toolkit for WebGPU, with advanced type inference and the ability to write shaders in TypeScript","http:\u002F\u002Ftypegpu.com",null,"TypeScript",2549,71,9,175,0,8,21,118,24,27.57,"MIT License",false,"main",true,[27,28,29,30,31,32,33,34,35,36,37,38],"gpgpu","gpu","gpu-computing","gpu-programming","graphics","javascript","typesafe","typescript","webgpu","webgpu-api","wgsl","wgsl-shader","2026-06-12 02:03:18","\u003Cdiv align=\"center\">\n\n\u003Cpicture>\n\u003Csource srcset=\"https:\u002F\u002Ftypegpu.com\u002Ftypegpu-logo-dark.svg\" media=\"(prefers-color-scheme: dark)\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Ftypegpu.com\u002Ftypegpu-logo-light.svg\" \u002F>\n\u003C\u002Fpicture>\n\n[Website](https:\u002F\u002Fdocs.swmansion.com\u002FTypeGPU) —\n[Documentation](https:\u002F\u002Fdocs.swmansion.com\u002FTypeGPU\u002Fgetting-started)\n\n\u003C\u002Fdiv>\n\n**TypeGPU** is a modular and open-ended toolkit for WebGPU, with advanced type\ninference and the ability to write shaders in TypeScript.\n\n```ts\nconst neighborhood = (a: number, r: number) => {\n  'use gpu';\n  return d.vec2f(a - r, a + r);\n};\n\n\u002F\u002F\n\u002F\u002F #1) Can be called in JS\n\u002F\u002F\nconst range = neighborhood(1.1, 0.5);\n\u002F\u002F    ^? d.v2f\n\n\u002F\u002F\n\u002F\u002F #2) Used to generate WGSL\n\u002F\u002F\nconst main = () => {\n  'use gpu';\n  return neighborhood(1.1, 0.5);\n};\n\nconst wgsl = tgpu.resolve([main]);\n\u002F\u002F    ^? string\n\n\u002F\u002F\n\u002F\u002F #3) Executed on the GPU (generates WGSL underneath)\n\u002F\u002F\nroot.createGuardedComputePipeline(main).dispatchThreads();\n```\n\n\u003Cdiv align=\"center\">\n\n\u003C!-- automd:badges color=\"plum\" license name=\"typegpu\" bundlephobia no-npmDownloads -->\n\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Ftypegpu?color=plum)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Ftypegpu)\n[![bundle size](https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002Ftypegpu?color=plum)](https:\u002F\u002Fbundlephobia.com\u002Fpackage\u002Ftypegpu)\n[![license](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fsoftware-mansion\u002FTypeGPU?color=plum)](https:\u002F\u002Fgithub.com\u002Fsoftware-mansion\u002FTypeGPU\u002Fblob\u002Fmain\u002FLICENSE)\n\n\u003C!-- \u002Fautomd -->\n\n\u003C\u002Fdiv>\n\n\u003Cbr>\n\u003Cbr>\n\n**Table of contents:**\n\n- [:gear: TypeGPU as a foundation](#gear-typegpu-as-a-foundation)\n- [:jigsaw: TypeGPU as a piece of the puzzle](#jigsaw-typegpu-as-a-piece-of-the-puzzle)\n- [:book: TypeGPU for libraries](#book-typegpu-for-libraries)\n- [Documentation](#documentation)\n- [What's next?](#whats-next)\n- [Projects using TypeGPU](#projects-using-typegpu)\n- [Repository structure](#repository-structure)\n\n## :gear: TypeGPU as a foundation\n\nWe provide an abstraction that solves the most common WebGPU hurdles, yet does\nnot restrict you in capability. You can granularly eject into vanilla WebGPU at\nany point. This means that, when building your app with TypeGPU, lock-in is not\na concern!\n\nThe low-level nature of TypeGPU and it's mirroring of WGSL (WebGPU Shading\nLanguage) syntax in TypeScript means that learning TypeGPU helps to learn WebGPU\nitself, with fewer frustrations.\n\n[The Getting Started and Fundamentals guides are a great starting point for new projects!](https:\u002F\u002Fdocs.swmansion.com\u002FTypeGPU\u002Fgetting-started\u002F)\n\n## :jigsaw: TypeGPU as a piece of the puzzle\n\nOur type-safe APIs can be used together, or in isolation. This makes partial\napplication into existing apps just a few lines of code away, no matter the\ncomplexity of your app!\n\n[We wrote a comprehensive resource on ways TypeGPU can improve your existing codebase.](https:\u002F\u002Fdocs.swmansion.com\u002FTypeGPU\u002Fintegration\u002Fwebgpu-interoperability\u002F)\n\nPick and choose which parts of TypeGPU you'd like to incorporate into your\nexisting app!\n\n## :book: TypeGPU for libraries\n\nWhen creating a type-safe WebGPU library, one can expect to encounter at least\none of the following problems:\n\n- Serializing\u002Fdeserializing data.\n- Dynamically generating parts of the WGSL shader.\n- Complex type inference.\n\nIf implemented from scratch, interoperability with other libraries (ones that\nhave a different focus, solve different problems) can be near impossible without\ngoing down to _untyped WebGPU land_, or copying data back to JS. Moreover, to\nkeep up with demand from users, they can be tempted to go out of scope of their\ninitial use-case, even though another library already solves that problem.\n\n> TypeGPU can be used as an interoperability layer between use-case specific\n> libraries!\n\nLet's imagine `@xyz\u002Fgen` is a library for procedural generation using WebGPU\ncompute shaders, and `@abc\u002Fplot` is a library for plots and visualization using\nWebGPU.\n\n```ts\nimport tgpu from 'typegpu';\nimport gen from '@xyz\u002Fgen';\nimport plot from '@abc\u002Fplot';\n\n\u002F\u002F common root for allocating resources\nconst root = await tgpu.init();\n\nconst terrainBuffer = await gen.generateHeightMap(root, { ... });\n\u002F\u002F    ^? TgpuBuffer\u003CWgslArray\u003CWgslArray\u003CF32>>> & StorageFlag\n\n\u002F\u002F ERROR: Argument of type 'TgpuBuffer\u003CWgslArray\u003CWgslArray\u003CF32>>>' is\n\u002F\u002F not assignable to parameter of type 'TgpuBuffer\u003CWgslArray\u003CF32>>>'\nplot.array1d(root, terrainBuffer);\n\n\u002F\u002F SUCCESS!\nplot.array2d(root, terrainBuffer);\n```\n\nWe can pass typed values around without the need to copy anything back to\nCPU-accessible memory! Let's see an example of how we can construct a type-safe\nAPI:\n\n```ts\nimport type { StorageFlag, TgpuBuffer, TgpuRoot } from 'typegpu';\nimport { d } from 'typegpu';\n\n\u002F\u002F We can define schemas, or functions that return schemas...\nconst HeightMap = (width: number, height: number) =>\n  d.arrayOf(d.arrayOf(d.f32, height), width);\n\n\u002F\u002F ...then infer types from them\ntype HeightMap = ReturnType\u003Ctypeof HeightMap>;\n\nexport async function generateHeightMap(\n  root: TgpuRoot,\n  opts: { width: number; height: number },\n): Promise\u003CTgpuBuffer\u003CHeightMap> & StorageFlag> {\n  const buffer = root\n    .createBuffer(HeightMap(opts.width, opts.height))\n    .$usage('storage');\n\n  const rawBuffer = root.unwrap(buffer); \u002F\u002F => GPUBuffer\n\n  \u002F\u002F Here we can do anything we would usually do with a\n  \u002F\u002F WebGPU buffer, like populating it in a compute shader.\n  \u002F\u002F `rawBuffer` is the WebGPU resource that is backing the\n  \u002F\u002F typed `buffer` object, meaning any changes to it will\n  \u002F\u002F be visible in both.\n\n  return buffer;\n}\n```\n\n[Planning to create a WebGPU library? Reach out to us!](https:\u002F\u002Fdiscord.gg\u002F8jpfgDqPcM)\nWe'd love to work with you to enrich the ecosystem with type-safe WebGPU\nutilities!\n\n## Documentation\n\nWe created a set of guides and tutorials to get you up and running fast. Check\nout our [Official Docs](https:\u002F\u002Fdocs.swmansion.com\u002FTypeGPU\u002Fgetting-started)!\n\n## What's next?\n\n- [Join the Software Mansion Community Discord](https:\u002F\u002Fdiscord.gg\u002F8jpfgDqPcM)\n  to chat about TypeGPU or other Software Mansion libraries.\n\n## Projects using TypeGPU\n\n\u003C!-- automd:file src=\".\u002Fprojects-using-typegpu.md\" -->\n\nLibraries:\n\n- [Vivarium](https:\u002F\u002Fgithub.com\u002FWonderYard\u002Fvivarium) - Modern, intuitive,\n  WebGPU-powered toolkit for creating your own cellular automata\n- [wayfare](https:\u002F\u002Fgithub.com\u002Fiwoplaza\u002Fwayfare) - A modular game engine built\n  on top of TypeGPU & Koota\n- [typegpu-shader-canvas](https:\u002F\u002Fgithub.com\u002FAlexJWayne\u002Ftypegpu-shader-canvas) -\n  a high-level library that sets up a canvas for you, so you can focus on\n  delivering pixels with TypeScript functions\n- [lilgpu](https:\u002F\u002Fgithub.com\u002Fgnlow\u002Flilgpu) - Lil wrapper to toy with WebGPU,\n  powered by TypeGPU\n- [fisheye.js](https:\u002F\u002Fgithub.com\u002FGyeongHoKim\u002Ffisheye.js\u002Ftree\u002Fmain) - A\n  JavaScript library for correcting fisheye, or barrel distortion, in images in\n  the browser\n\nApps:\n\n- [ComfyUI](https:\u002F\u002Fwww.comfy.org\u002F) - An open-source tool for creating\n  generative AI\n- [Chaos Master](https:\u002F\u002Fchaos-master.vercel.app) by deluksic & Komediruzecki\n- [Visual timer: Calm Jar](https:\u002F\u002Fapps.apple.com\u002Fus\u002Fapp\u002Fvisual-timer-calm-jar\u002Fid6741375962)\n  by Nathan Schmidt\n\nDemos:\n\n- [Apollonian Circles](https:\u002F\u002Fdeluksic.github.io\u002Fapollonian-circles\u002F) by\n  deluksic\n- [Strange Forms](https:\u002F\u002Fgithub.com\u002Floganzartman\u002Fstrangeforms) by Logan Zartman\n- [WebGPU Stable Fluids](https:\u002F\u002Fgithub.com\u002Floganzartman\u002Fwebgpu-stable-fluids)\n  by Logan Zartman\n- [Plasma Garden](https:\u002F\u002Falexwayne.codes\u002F2026-01-11-plasma-garden\u002F) by Alex\n  Wayne\n- [Glowout](https:\u002F\u002Falexwayne.codes\u002F2025-12-04-glowout\u002F) by Alex Wayne\n- [MeloSkia](https:\u002F\u002Fgithub.com\u002Fkimchouard\u002Fmeloskia) - A music-game demo to\n  highlight RN-Skia capabilities by Kim Chouard\n\n\u003C!-- \u002Fautomd -->\n\n## Repository structure\n\n**Packages:**\n\n- [packages\u002Ftypegpu](\u002Fpackages\u002Ftypegpu) - The core library.\n- [packages\u002Ftypegpu-color](\u002Fpackages\u002Ftypegpu-color) - A set of color helper\n  functions for use in WebGPU\u002FTypeGPU apps.\n- [packages\u002Ftypegpu-noise](\u002Fpackages\u002Ftypegpu-noise) - A set of\n  noise\u002Fpseudo-random functions for use in WebGPU\u002FTypeGPU apps.\n\n**Tooling:**\n\n- [packages\u002Funplugin-typegpu](\u002Fpackages\u002Funplugin-typegpu) - Plugin for your\n  favorite bundler, enabling TypeGPU shader functions to be written in JS.\n- [packages\u002Ftgpu-gen](\u002Fpackages\u002Ftgpu-gen) - CLI tool for automatic TypeGPU code\n  generation.\n\n**Internals:**\n\n- [packages\u002Ftinyest](\u002Fpackages\u002Ftinyest) - Type definitions for a JS embeddable\n  syntax tree.\n- [packages\u002Ftinyest-for-wgsl](\u002Fpackages\u002Ftinyest-for-wgsl) - Transforms\n  JavaScript into its _tinyest_ form, to be used in generating equivalent (or\n  close to) WGSL code.\n- [packages\u002Ftgpu-wgsl-parser](\u002Fpackages\u002Ftgpu-wgsl-parser) - WGSL code parser.\n- [packages\u002Ftgpu-dev-cli](\u002Fpackages\u002Ftgpu-dev-cli) - Development tools for\n  packages in the monorepo.\n\n**Apps**:\n\n- [apps\u002Ftypegpu-docs](\u002Fapps\u002Ftypegpu-docs) - The documentation, examples and\n  benchmarks webpage.\n- [apps\u002Finfra-benchmarks](\u002Fapps\u002Finfra-benchmarks) - Headless benchmarks.\n\n## TypeGPU is created by Software Mansion\n\n[![swm](https:\u002F\u002Flogo.swmansion.com\u002Flogo?color=white&variant=desktop&width=150&tag=typegpu-github 'Software Mansion')](https:\u002F\u002Fswmansion.com)\n\nSince 2012 [Software Mansion](https:\u002F\u002Fswmansion.com) is a software agency with\nexperience in building web and mobile apps. We are Core React Native\nContributors and experts in dealing with all kinds of React Native issues. We\ncan help you build your next dream product –\n[Hire us](https:\u002F\u002Fswmansion.com\u002Fcontact\u002Fprojects?utm_source=typegpu&utm_medium=readme).\n\n\u003C!-- automd:contributors author=\"software-mansion\" -->\n\nMade by [@software-mansion](https:\u002F\u002Fgithub.com\u002Fsoftware-mansion) and\n[community](https:\u002F\u002Fgithub.com\u002Fsoftware-mansion\u002FTypeGPU\u002Fgraphs\u002Fcontributors) 💛\n\u003Cbr>\u003Cbr>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsoftware-mansion\u002FTypeGPU\u002Fgraphs\u002Fcontributors\">\n\u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=software-mansion\u002FTypeGPU\" \u002F>\n\u003C\u002Fa>\n\n\u003C!-- \u002Fautomd -->\n","TypeGPU 是一个用于 WebGPU 的模块化和开放式的工具包，支持高级类型推断并允许使用 TypeScript 编写着色器。它通过提供与 WGSL 语法相似的 TypeScript 接口来简化 GPU 编程，并且可以无缝地与原生 WebGPU 代码结合使用，从而降低学习曲线。该工具包适用于需要高性能图形处理或通用计算的 web 应用场景，比如游戏开发、科学计算可视化等。其灵活的设计使得开发者可以根据需求选择性地采用 TypeGPU 的功能，而无需担心被锁定在特定框架内。",2,"2026-06-11 03:47:41","high_star"]