cables DocumentationHow To UseWorking with filesKeyboard ShortcutsUser Interface WalkthroughBeginner TutorialBeginner 1: Drawing A CircleBeginner 2: TransformationsBeginner 3: ColorMore TransformationsKeyframe AnimationIntermediateImage CompositionsPost-Processing 3D ScenesExporting And EmbeddingHow to serve files externally and fix CORS headersExporting PatchesExport using the cables command line interfaceExport via IframeExport creating a standalone executableExport to github (pages)Export and deploy to netlifyExport full PatchHTML ExportExternal triggers / functionsUsing variablesPreviewing / uploading exported cables patchesExamples for EmbeddingImporting patchesBackupsPermissionsUsersPatchesTeamsOpsMultiplayerPatchlistsCoding OpsUsing Op AttachmentsGeneral op/Port CallbacksPortsMultiPortsArray PortsBoolean portsInteger Number PortsObject PortsString portsTrigger PortsFloating Point Number PortsGUI/UI attributesHello Op - Part 1LibrariesDeveloping OpsRenaming / Creating a new versionCreating Viz OpsGuidelinesObject PortsPatching Ops / SubPatchOpsWriting ShadersWeb Audio Op DevelopmentDeveloping CablesRepositoriesSet up local environmentScriptsHow to work with forksGenerated DocumentationUsing standalone to develop cablesCables StandaloneGeneralCoding OpsSharing opsUsing NPMImport/ExportStandalone - FAQLightingLightsShadowsWorking With AudioBasic Audio SetupWorking with EffectsReal-Time Audio Analyzation & Audio VisualizationOffline Audio Visualization & AnalyzationCommunicationCables APIOptimizing Performance In PatchesTools for debugging your patchHow to optimize cables patches with the Performance opHow to optimize cables patches with the ProfilerCommon pitfalls with the "usual suspects"Optimizing arraysDebugging Shaders with ShaderInfoFAQAudio in web browsersHow to make demoscene demos with cables.glEmbeddingHow to integrate my cables patch into my CMS (webflow/wix/squarespace/...)?How to remove grey rectangles on touch (mobile)?Why doesn't the DownloadTexture op work on iOS?How to disable page scrolling on mobile?Mobile tippsHow to run exported patches on your local machineTransparent CanvasFeatures and SupportHow to contribute code to cablesWill there be support for (animated) GIFs?Can i use a website as a texture?Screenshots and Video recordingHow to report a bug in cablesHow can I share a patch to get help?How can I support cables?Video playback in cablesGeneral questionsWhat is dev.cables.glHTML And CSS In CablesJavascript Frameworkscordova / phonegapelectronreactvuejsLicenses and paymentWhat license do i need to use cables?Will I have to pay for it in the future?How is my work licensed when using cables?Does cables support midi and OSC?Patch PermissionsMy User Profile & Social MediaShadertoyCables at schools and universitiesTechnical questionsWebGL1 and WebGL2
cables Documentation  ⟩  Cables Standalone  ⟩  Using NPM

Using NPM

What is NPM?

NPM stands for the node package manager and is a widely used tool to manage dependencies of applications developed in JavaScript. It also features access to a vast collection of libraries written in JavaScript that can (potentially) be used in cables standalone.

Why NPM?

Cables standalone in not being bound to the browser-sandbox anymore and has more direct access to features of the underlying operating system. This makes it possible to you a lot of the packages on npmjs.com in ops. Features like access to the file system, network interfaces, or native binaries opens up a whole new set of possibilities to work with cables.

How do I add a library to my Op?

Once you created or cloned your own Op, you can use any npm package by adding it on the "Manage Op"-Tab. Enter its name as it appears on npmjs.org. So e.g. npm install osc-js becomes osc-js, if you want to add a fixed version to your package add it to the name, like this osc-js@2.4.1.

add npm

The wanted package will be installed into the op's directory into a node_modules folder. This folder should not be shared or added to any repositories, as it might contain operating-system dependent code (and also is usually pretty big...).

Afterward, add the standalone_electron core-lib to the Op. This will make sure that people that end up using this on cables.gl will get a warning that this Op might not work on the web.

add npm

I am getting errors like require() of ES Module or failed to load node module

This likely means that the library/module you are trying to use is either:

  • not packaged to be used in electron/browser
  • uses native modules that need to be precompiled

You can try working around this by putting the precompiled/packaged node_modules folder into the op-dir on your own, but these ops won't be sharable.

How do I use a library in any of my ops?

After you added the library to your op (say you used the osc-js-package from above) you can use op.require to load the library. Here are a few examples from the documentation pages of different libraries and how they translate to cables:

require:

const OSC = require('osc-js')

will become:

const OSC = op.require("osc-js");

default import:

import path from 'path';

will become:

const path = op.require("path");

named import:

import { HfInference } from '@huggingface/inference';

will become:

const hf = op.require("@huggingface/inference");
const HfInference = hf.HfInference;

Does cables standalone come with built-in libraries?

Cables standalone comes with (at least) the native nodejs libraries of the node version that was used to build it, this (currently) includes modules like os, fs, path, http, net and more...

You can use these modules without adding them to the dependencies section in "Manage Op":

const OSC = op.require("os");
const ifaces = os.networkInterfaces();
Found a problem? Edit this file on github and contribute to cables!