A web-based playground for creating and testing shaders for the Ghostty terminal.

• Node.js (for running the development server)

1. Clone or download this repository.
2. Install dependencies:

   npm install

1. Start the development server and open your browser automatically:

   npm start

   Or manually:

   node server.js

   Then open http://localhost:3000 in your browser.

The server provides:

• Static file serving for HTML, JS, and GLSL files
• /shaders-list endpoint that returns available shader files
• WebSocket server for live reload functionality
• File watching that automatically reloads the page when shaders or other files change

• Start the server and edit or create shaders inside the public/shaders directory with your favorite editor/IDE.
  Watch them refresh automatically in the browser for faster development.
• Use the toolbar at the bottom to:
  • Change cursor type (block, vertical bar, horizontal bar)
  • Switch between AUTO, RND, and CLICK cursor movement modes
  • Pick a cursor color (mapped to uniform iCurrentCursorColor)
• Click on a canvas (in CLICK mode) to move the cursor.
• Use the dropdown on each canvas to switch shaders.
• You can use the keyboard arrows, Enter, and Backspace to move the cursor as well.

Feel free to make a pull request to add your shader in the shaders/ directory!
Community contributions are welcome and appreciated.

• Add your own shaders to the shaders/ directory; they will automatically appear in the dropdown menus.
• The server automatically watches for file changes and reloads the page when you modify shaders or other files.

Special thanks to patriciogonzalezvivo for his library glslCanvas.
Although this project now uses a rewritten implementation to support WebGL2 and different default uniforms, his work made it possible, and several functions are directly copied from his library.

MIT License. See LICENSE file for details.