Skip to content
Go to file


Failed to load latest commit information.
Latest commit message
Commit time

WebGL GLSL Shader Editor Extension for Google Chrome

A Chrome DevTools extension to help you edit shaders live in the browser. Very much based on Firefox DevTools Shader Editor. Here's a video showing it in action

Install the extension from the Chrome Store npm

Twin project of Web Audio API Editor Extension for Google Chrome

Shader Editor

Some more info about this project: Creating a Plug'n Play Live WebGL Shader Editor

How to install

From the chrome store:

Load the extension from disk directly:

  • Checkout the repo
  • Open Chrome's Extensions page (Settings / More tools / Extensions)
  • Enable Developer Mode
  • Click on ``Load unpacked extension`...
  • Select the folder /src in the checked out project

Alternatively, you can pack the extension yourself and load by dropping the .crx file in the Extensions page.

How to use

  • Browse to a page with WebGL content (you can find many here, here or here
  • Open DevTools
  • Select the Shader Editor tab
  • The extension needs to instrument WebGLRenderingContext: if you open DevTools after the page has loaded, hit the Reload button. If the extension was already running, it automatically instruments the page.
  • If there are calls to .createProgram, the UI will show a list
  • Select a program to see its vertex shader and fragment shader
  • Use the Pretty Print icon to make the code more readable
  • Use the fullscreen button to make the code editor bigger
  • Use the Star icon to apply the GLSL Optimiser
  • Use the check mark icon next to each shader's name to toggle its visiblity
  • Use the Eye icon to disable shader highlighting
  • On the Textures tab, click on a texture to open a File Dialog to use another texture, or drag and drop a file into the texture.
  • On the Setting tab, enable or disable texture monitoring and shader highlighting (for performance reasons)


As always: forks, pull requests and code critiques are welcome!

  • Detect when the page is reloaded or changed Issue #1
  • Highlight shaders when hovering over list item Issue #3
  • Check why some pages don't load (like Issue #4
  • Figure out why it doesn't .postMessage the first time it's injected Issue #5
  • Figure out why it doesn't work on Android over remote debugging Issue #6

Nice to have:

  • Save to disk (?) - Not possible for now with the DevTools API
  • Add uniform tracking to display values fed to the shader
  • Integrating @aras-p + @zz85 GLSL Optimizer Added


See detailed change log


MIT licensed

Copyright (C) 2015 Jaume Sanchez Elias,


Google Chrome DevTools extension to live edit WebGL GLSL shaders





No releases published
You can’t perform that action at this time.