Sandbox: A Tiny WebGL Library That Just Runs Your Shaders

Michael Baný — Wed, 04 Feb 2026 14:56:27 +0000

rosalana / sandbox

Lightweight WebGL wrapper for simple, beautiful shader effects

Rosalana Sandbox is a lightweight WebGL wrapper for simple, beautiful shader effects. It focuses on a clean API, type safety, and fast setup so you can go from idea to a shader in minutes.

It's DX‑friendly, small, and intentionally minimal — perfect for gradients, ambient backgrounds, and animated GLSL experiments. If you're not building a full 3D engine, Sandbox is a delightful alternative to larger libraries like three.js or p5.js.

Bundle size comparison

Library	Minified	Gzipped
Sandbox	85 KB	23 KB
three.js	694 KB	175 KB
p5.js	1.1 MB	351 KB

Sandbox is ~8x smaller than three.js and ~15x smaller than p5.js.

It works in both WebGL1 and WebGL2 contexts, with automatic fallback and detection.

View on GitHub

WebGL is a powerful tool that opens up a world of possibilities for what we can do on the web. But it's not easy to master. Even getting to the point where you can render anything takes dozens of lines of boilerplate code — even for something as simple as a static image or a basic effect.

What if it didn't have to be this way? What if simple things could stay simple? We have three.js for complex 3D scenes, but why should we go through the same setup hell when all we want is a simple shader animation?

That's why Sandbox was created. A tiny WebGL library, 22 times smaller than three.js, with one job: skip the WebGL ceremony and just run your shader. And that's exactly what it does.

import { Sandbox } from '@rosalana/sandbox';

Sandbox.create(canvas, {
  fragment: `// your shader here`
});

That's it. Everything is set up and rendering starts immediately.

How? Sandbox handles all the WebGL setup for you, so you can focus on what matters: writing your shader.

It supports both WebGL1 and WebGL2, automatically detecting which one to use based on your shader code. It even switches contexts at runtime if needed — you won't even notice it happened.

The defaults are carefully chosen to work out of the box, so often the simple example above is all you need. But there's still flexibility when you want it: custom uniforms, FPS limiting, time manipulation, mouse interaction, and more. It automatically pauses when the canvas is out of view and syncs state with reactive JavaScript frameworks.

Most things are handled automatically, including built-in uniforms that Sandbox injects into your shader for you. This lets you focus on the creative work in GLSL while the library takes care of the rest.

Writing shaders can be challenging too. We're working on smart shader preprocessing to make that easier as well. Share your thoughts and feedback on GitHub and help us make Sandbox exactly what we've all been searching for.

You'll find detailed documentation and interactive demos at Github.

DEV Community: Michael Baný

Sandbox: A Tiny WebGL Library That Just Runs Your Shaders

rosalana / sandbox

Lightweight WebGL wrapper for simple, beautiful shader effects

Bundle size comparison

Table of Contents