Shady Headstash

  2. Docs
    3. Authoring Shaders Online

Authoring Shaders Online

headsta.sh has a full ISF shader editor built into the website — the same shader engine that powers the Resolume plugin, running in your browser. You can write and preview shaders live without installing anything, and (with write access) publish them.

Opening the editor

  • Create a new shader: go to /plugin/new.
  • Explore an existing one: every shader/plugin page (/plugin/<category>/<slug>) is the editor, pre-loaded with that shader — a great way to learn by reading real code.

You can open and experiment in the editor without an account. You only need to sign in (and have write access) when you want to save.

What you can do

  • Write GLSL live. A code editor sits next to a live preview that recompiles as you type. Tabs cover the Fragment Shader, Vertex Shader (when the shader has one), and ISF Metadata. Multi-pass shaders get a tab per pass (Image, Buffer A–D).
  • Autocomplete that knows the engine. The editor completes GLSL built-ins with signature hints, plus everything the shader engine provides — TIME, RENDERSIZE, the IMG_* macros, the audio-reactive uniforms (audio_Level, audio_BPM, audio_OnBeat, …), and a library of shared helper functions — each with inline documentation. The Metadata tab completes ISF-JSON keys and offers ready-made input snippets.
  • Readable errors. If the shader doesn’t compile, the preview shows the error with a one-click Copy button — and error line numbers match your code in the editor, so you can jump straight to the problem.
  • Preview and control playback — pause/resume, reset time, go fullscreen, and watch FPS, time, and resolution. Moving or clicking the pointer over the preview drives the shader’s Mouse controls live, so interactive shaders respond as you’d expect.
  • Import from Shadertoy. In create mode, the Import tab searches Shadertoy live (with filters for multipass, sound, VR, and more) and loads a shader straight into the editor, reassembling it into the engine’s format.
  • Import from the ISF library. The same Import tab pulls from headsta.sh’s own ISF collection, with sorting (popular, newest, most stars…), category filters, and an author filter to browse everything by a creator you like.
  • Add and edit controls without touching JSON. The Controls panel has an Add control button and per-control edit/delete. A type-aware dialog covers sliders, integers, toggles, triggers, colors (with alpha), 2D points, images, and audio inputs — each with the right fields for min/max/default. The same inputs become mappable parameters when the shader runs in Resolume.
  • Go audio-reactive. Toggle your microphone to drive the shader with live audio, with a readout of BPM, level, and bass/mid/treble.
  • Inspect — a Passes view and a Console help you understand and debug multi-pass or misbehaving shaders.

Every shader page also shows its view count alongside likes, so you can see how much attention a shader is getting.

Exporting

The Export tab packages your shader for the platform you perform on:

  • Shader Engine — an ISF .fs file for the Resolume plugin (or anywhere else that reads ISF). Shaders with a custom vertex stage download the matching .vs file alongside.
  • Synesthesia — a ready-to-use .synScene.
  • Resolume Wire — a .wired plugin, compiled for a Wire version you pick.
  • Resolume Arena/Avenue — a compiled .cwired plugin, when builds are available for your platform.

Where a platform can’t reproduce something — for example, custom vertex shaders only run fully in Shader Engine — the export card tells you before you download, instead of letting you find out on stage.

From browser to Resolume

A shader you write here is ISF, so it drops straight into the Shader Engine plugin — export it, put it in your library folder, and load it. The site editor is a fast place to build and test; the plugin is where you perform.

Next