Chris Sprance

Technical Art Director

GraphToy Plus

TypeScriptTypeScript

A graphing tool built for graphics programmers — great for prototyping shader math, visualizing easing curves, and understanding how equations behave over time.

It's a fork of GraphToy by Inigo Quilez, fully rewritten from scratch in TypeScript and React, with a focus on making the tool more useful for real-time graphics work.

What's New

  • Syntax highlighting — equation input fields highlight as you type, making complex expressions much easier to read at a glance.
  • Dynamic variables (A–H) — use any letter A through H directly in your equations as live parameters. Each variable has configurable min/max bounds and a draggable slider, so you can scrub through values in real time and see exactly how they affect your curve. Great for dialing in smoothstep ranges, tweaking falloff curves, or exploring parameter spaces interactively.
  • Color visualizer — the top-left preview shows the color produced by treating the first three formula outputs as RGB channels. Useful when you're building color ramps or blending functions and want immediate visual feedback beyond the graph lines.

Try it live →