cables is under heavy development.
There might be one or another bug, please let us know about it!
cables Documentation      How To Use            Working with files            Keyboard Shortcuts            User Interface Walkthrough      Beginner Tutorial            Beginner 1: Drawing A Circle            Beginner 2: Transformations            Beginner 3: Color            More Transformations      intermediate            Image Compositions            Post-Processing 3D Scenes      communication            cables API            Communication with an Arduino via Serial            Communicating with Arduino over MQTT      Exporting And Embedding            How to serve files externally and fix CORS headers            Embedding Patches            External triggers / functions            Embedding Patches            Previewing / uploading exported cables patches      coding ops            Creating Attachments            General op/Port Callbacks            Ports                  Dynamic Ports                  Array Ports                  Boolean ports                  Integer Number Ports                  Object Ports                  String ports                  Trigger Ports                  Floating Point Number Ports            GUI/UI attributes            Hello Op - Part 1            Libraries            Developing Ops            Guidelines            Object Ports            Writing Shaders            Web Audio Op Development      HTML and CSS in cables      Lighting            Lights            Shadows      FAQ            Embedding                  How to remove grey rectangles on touch (mobile)?                  Why doesn't the DownloadTexture op work on iOS?                  How to disable page scrolling on mobile?                  Transparent Canvas            Features and Support                  Will there be support for (animated) GIFs?            General questions            Licences and payment                  What licence do i need to use cables?                  Will I have to pay for it in the future?                  How is my work licenced when using cables?            Does cables support midi and OSC?            Shadertoy            Technical questions            UI / Editor            WebGL1 and WebGL2

Developing Ops

Basic Setup

Adding Ports and Port types

Different port examples below.

Floating point number ports in and out:

const inFloat = op.inFloat("float in");
const outNumber = op.outNumber("number out");

Integer number ports in and out:

const inInt = op.inFloat("int in");
const outNumber = op.outNumber("number out");

String ports in and out:

const inString = op.inString("String in");
const outString = op.outString("String out");

Boolean ports in and out:

const inBoolean = op.inBool("Boolean in");
const outBoolean = op.outBool("Boolean out");

Trigger ports in and out:

const execute = op.inTrigger("Trigger In");
const trigger = op.outTrigger("Trigger out");

Array ports in and out:

const inArray = op.inArray("Array in");
const outArray = op.outArray("Array out");

Object ports in and out:

const inObject = op.inObject("Object In");
const outObject = op.outObject("Object Out");

See Ports

Op Constructor

The code you write inside your op will be executed once the op is added to the patch-view.
All your initialisation-code should be in the root of your code, e.g.

var inPort = op.inFloat("My Input Port");
var outPort = op.outNumber("My Output Port");

// put your initialisation code here

At this state the links between ops / the port-values are not set, yet, we will come to this later…

op is a pre-defined object which bundles all the functions you need to interact with the world of cables.

Callbacks and Events


For every input-port (except inTrigger and inTriggerButton) you can implement the onChange-method which gets called every time the value on the port changes. This means that it is being called when:

  • the user entered a new value in the GUI (input field / moved a slider / checkbox / …)
  • Another op linked to this port
  • A link was removed

When a link to a value or string-value port was removed the old value (from the form) will be set again. If the old value is the same as the value from the linked op onChange will not be called, so it is only called if the value actually changed.

If a connection to an object or array-port is removed the port will contain null.

Follow this link for more information on Callbacks

Naming Conventions

Op Names

UpperCamelCase, e.g. KeyPressLearn (Ops.Devices.Keyboard.KeyPressLearn). If your op has an abbreviation in it with multiple big letters in a row (e.g. MIDI), write only the first letter in capitals, e.g. Ops.WebAudio.MidiLearn

Port Names

Use capitals with spaces for the user-visible names in the op-settings, e.g. Inner Radius. You can use all capital letters for port names like BPM or MIDI.
Feel free to use whatever you prefer in code, most common is lowerCamelCase, e.g. innerRadius.
If your op has one main-port which is needed to trigger it, call it Execute, if your op has an output-port to trigger other ops call it Trigger

var innerRadius = op.addInPort("Inner Radius");

Op Documentation

Every op should have an example on how to use it. Just link to the public patches / examples which use your new op. It is good practice to include a minimal example at first which demonstrates the basic usage without all the bells and whistles. In a second one you could show a more advanced use-case.

Click this link for an example of how you can write clear documentation for your new op. All the documentation text is available in the patch editor view so make sure to fill it all in.

When you create a new op it automatically creates a documentation page for you. Click your op and then click the view documentation link in the UI pane to browse to the new page.


Scroll down the page and then click edit this document to create all of your documentation for your new op.


You can now fill in all the details and documentation for your new op !

Publishing Ops

If you made an op and think it would be useful for other users get in touch with the cables-staff (via Slack or the cables forum).

help cables get better and edit this file on github