An editor

Shdr editor

Shdr is before everything else a GLSL editor, powered by Ace.js. This editor supports many advanced features like syntax highlighting, history, line count and highlighting, error display and bracket matching to name a few.

Shdr editor

Using the top menu, Shdr provides some basic functionalities like local storage, switching between vertex and fragment shader editing, insertion of snippets, raw code download and sharing.

A viewer

Shdr editor

Shdr also packs a live material viewer featuring various models to test your shaders against.

This viewer uses WebGL to render your shaders through a custom version of Three.js.

More than a simple viewer, this panel is live updated as you type inside the editor, allowing extremely fast iteration and preview of your code.

A validator

Shdr editor

Finally, Shdr provides a real-time validator that will parse and display errors in your shaders as you type in the editor, highlighting error lines in red and providing some details about the error encountered in the status bar.

Try it live!

Shdr is accessible online at where you can start writing your own shaders.

Or start fiddling with the shader shown in the previous screenshots here. Remember you can use the Share button to share your shaders with friends.

Or get the offline Chrome app!

Shdr is also available for offline use (and also on Chromebooks!) as an experimental Chrome packaged app!


Did I say Shdr is open-source and available on GitHub?

So for issues, feature requests, contributions: Fork me on GitHub!