u/Powerful-Sorbet6660

I love Shadertoy for GLSL, but lately I’ve been doing a lot of rendering work using the Skia graphics engine (specifically for Flutter and React Native).

Skia uses its own shading language called SKSL. It’s very similar to GLSL, but it has enough syntax quirks and specific uniform requirements that testing them meant constantly compiling native apps just to see if a visual effect worked.

I got tired of the slow workflow, so I built Skia Labs.

It’s a dedicated, web-based playground for writing and testing SKSL.

Under the hood:

It runs entirely in the browser using CanvasKit WASM (so it is rendering on the actual Skia engine, not a WebGL approximation).
Built-in Monaco editor with custom SKSL syntax highlighting.
Locks in at a buttery smooth 60fps.
(I also built an AI agent skill that you can download to help translate standard GLSL over to SKSL syntax automatically).

You can try the editor out for free here: https://skialabs.dev

Would love to hear what the graphics programming community thinks of it, and if there are any specific Skia features you'd want added to the editor!

If you’ve ever tried to add complex, rich animations to a React Native app, you’ve probably used Lottie. It’s great, but once you start adding multiple animations, parsing those massive JSON files absolutely tanks the JS thread and bloats your bundle size.

I recently started migrating my heavy visual effects over to shopify/react-native-skia using custom SKSL shaders, and the difference is insane.

Why it works better: Because React Native Skia bindings drop straight down to the underlying C++ Skia engine, SKSL (Skia Shading Language) runs directly on the GPU. You get buttery-smooth 60fps animations that weigh mere kilobytes instead of megabytes, with zero JS bridge overhead during the animation.

The Workflow Problem: The biggest issue I ran into was actually writing and testing the shaders. Translating standard GLSL to SKSL is a headache, and doing it inside a React Native project means dealing with constant Metro reloads or native rebuilds just to tweak a color or a coordinate.

My Solution: I ended up building a dedicated web-based SKSL playground using CanvasKit WASM. It lets you write the shader natively in the browser, see it at 60fps instantly, and then you can literally copy-paste the exact code block directly into your RN project.

I’ve found it speeds up my UI development by 10x since I no longer have to wait on emulators to test visual effects.

I just made the tool completely free and public today. Let me know if anyone wants the link to try it out and I’ll drop it in the comments!

I built a web-based SKSL (Skia Shading Language) playground!

How I replaced bloated Lottie files with 60fps Skia shaders in my RN app

I was tired of Lottie files slowing down my apps, so I built a web-based playground to test Skia (SKSL) shaders so people can directly drop it in their apps!