Ayfri/shayders
Live in productionA modern, web-based GLSL shader editor for creating and experimenting with fragment shaders in real-time.
Quick website for doing shaders tests.
- TypeScript59.2%
- Svelte40.5%
- CSS0.1%
- JavaScript0.1%
- HTML0.1%
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.
