minimal Shader Editor with a uniform.

yashed.html

<style>textarea{background-color: bisque;}</style>
<canvas width="256" height="256"></canvas><hr/>
<textarea id="VS" cols="36" rows="8"></textarea>
<textarea id="FS" cols="36" rows="8"></textarea>
<textarea id="LG" cols="36" rows="8"></textarea>
<script>
VS.value=`attribute vec4 p;\nvoid main(){
  gl_PointSize=200.;\n  gl_Position=p;\n}`;
FS.value=`precision highp float;\nuniform vec4 u;\nvoid main(){
  gl_FragColor=vec4(1);\n  gl_FragColor.rg=gl_PointCoord.xy;
  gl_FragColor.b=sin(u[0]);\n}`;
let cx=document.querySelector("canvas").getContext("webgl");
let pg=cx.createProgram();
let vs=cx.createShader(cx.VERTEX_SHADER);	cx.attachShader(pg,vs);
let fs=cx.createShader(cx.FRAGMENT_SHADER);	cx.attachShader(pg,fs);
function recompile(){
	cx.shaderSource(vs,VS.value);	cx.compileShader(vs);
	cx.shaderSource(fs,FS.value);	cx.compileShader(fs);
	cx.linkProgram(pg);	cx.useProgram(pg);
	LG.value =`vs:${cx.getShaderInfoLog(vs)}\n`;
	LG.value+=`fs:${cx.getShaderInfoLog(fs)}\n`;
	LG.value+=`pg:${cx.getProgramInfoLog(pg)}\n`;
}	recompile();
function redraw(now){
	cx.uniform4fv(cx.getUniformLocation(pg,"u"),[now/1000,0,0,0]);
	cx.clearColor(0,0,0,1);cx.clear(0x4000);cx.drawArrays(0,0,1);
	requestAnimationFrame(redraw);
}	requestAnimationFrame(redraw);
VS.addEventListener("input", recompile);
FS.addEventListener("input", recompile);
</script>