Today I’m releasing ShaderPad. It’s a small, focused library to put a shader on a website without rebuilding the same graphics scaffolding every time. If you want to experiment with writing shaders, I think this is one of the best ways to get started.
Motivation
If you’ve spent much time on this website, you know I mainly use my computer to doodle. Shaders are an expressive way to sketch with code. There are many shader sandboxes online, most notably ShaderToy, that make it easy to write shaders. But platform lock-in makes moving these sketches onto your own website a hassle.
After wiring up the same graphics boilerplate dozens of times, I started writing a library to make it easier. Over the years, I added features that are useful to me, from autosizing and simple save/share utils, to history buffers, to full-blown MediaPipe integrations. At this point, ShaderPad is extremely useful to me. So I open sourced it, wrote some docs, and now I’m sharing it with you.
Artists and creative coders are already making incredible things with shaders. Hopefully ShaderPad can help get more of those ideas online.
Smaller than your favicon
Lots of big companies (ahem, Stripe) bundle Three.js into their landing page just to render a single fullscreen shader. At 5.8kb gzipped, ShaderPad is over 30x smaller than Three.js.
Now to be clear, Three.js also does wayyyy more than ShaderPad can. If you want to build a full 3D scene, use Three.js; it’s an incredible library. But if all you want is a funky interactive graphic, the bundle size, complexity, and setup cost is much smaller with ShaderPad.
I’m happy with where the core API landed; it’s simple enough to learn over a single snack break.
Fast by default
I designed ShaderPad to keep as much work as possible on the GPU. Graphics performance problems often come from plumbing, not from the visible shader code, so I tried to make the defaults as performant as possible.
If you chain multiple shaders together, ShaderPad keeps that work in the same pipeline instead of taking expensive trips to the CPU. If several passes need the same face or pose tracking result, the library caches detection results. The goal here was to make you think less about the plumbing and more about the fun stuff.
Try it out
ShaderPad gives you something steady to build on, then disappears into the background while you get creative. To get started, check out the quickstart or some interactive examples. I’m excited to see the beautiful doodles you come up with.
Afterword: Writing a library in 2026
This is an interesting moment for programming, so I wanted to share how I built ShaderPad.
I started building it before AI tools were very useful. I took my time designing the API around real needs I was encountering, and grew the library slowly as I needed it. AI is more helpful now, but the challenge for a project like this was never generating more code; it was deciding what to leave out. By default, AI still doesn’t care about a small bundle size. It usually wants to add more than I do.
But AI has helped with everything outside of the core. The docs site is the most complete documentation I’ve ever written for a personal project, and AI was a huge help scaffolding it. I rewrote each section for clarity, but getting such a thorough first pass was immensely helpful. AI also helps keep the documentation up to date, reflecting changes across the docs, README, and examples. As a former technical writer, I’m stoked to see AI take over the boring parts of writing documentation. I even got the AI to write docs for itself!
With structured reference docs, I’ve found AI to be a useful creative collaborator. I’m building Strange Camera to test library ideas and push on ShaderPad’s edges. Early on, I hand-coded every filter. Now I can point an agent to the docs, describe an idea, and often get a working result back. It feels like a wide open version of Snapchat’s new “Imagine Lens”.
Thanks for making it this far! To get started, check out the quickstart or some interactive examples. Or come discuss ShaderPad on Hacker News.