Skip to content
Ayfri

Ayfri/shayders

Live in production

A modern, web-based GLSL shader editor for creating and experimenting with fragment shaders in real-time.

Quick website for doing shaders tests.

1 0TypeScriptPush 2mo agoListed 23h agoGPL-3.0

shayders.ayfri.com

glslshadershadersshadertoywebgl
  • TypeScript59.2%
  • Svelte40.5%
  • CSS0.1%
  • JavaScript0.1%
  • HTML0.1%
View on GitHub

Report a problem

1 Review

Shayders is a promising WebGL shader playground with a clear niche: a browser-based GLSL editor that combines real-time fragment shader editing, Monaco, multi-buffer rendering, texture channels, and community sharing. The project is stronger than its short GitHub description suggests. The README explains the built-in uniforms, channel system, R2 asset limits, PocketBase backend, and Cloudflare deployment assumptions, which makes the architecture understandable for someone evaluating or self-hosting it.

The code layout also looks intentional. Shader-specific logic is separated under src/lib/features/shaders, with distinct areas for canvas/runtime code, editor UI, previews, assets, and model logic. That is a good direction for a project that can easily become tangled because WebGL rendering, upload handling, auth, search, and gallery browsing all interact. The SvelteKit route structure covers the core product surface well: public gallery, new shader flow, individual shader pages, user profiles, search, and API endpoints for shaders/assets/uploads.

The biggest improvement opportunity is trust and onboarding. There is no visible CI configuration, and package.json has check and build scripts but no test script. For a shader editor, even a small Playwright smoke test that opens the editor, compiles a basic shader, and verifies the canvas renders would make regressions much easier to catch. The README would also benefit from local setup steps, a sample .env, and a minimal “create your first shader” walkthrough. Community signals are still early, with 1 star, 0 forks, and no open issues, so lowering contribution friction matters: add screenshots/GIFs, a contribution guide, and a few tagged starter issues.

Overall, Shayders has a solid product idea and a coherent technical foundation. With better setup documentation, automated checks, and a stronger demo-oriented README, it could become much easier for shader authors and Svelte/WebGL developers to try, trust, and contribute to.