Interaction Design WikiWeb Development

Code Editors

The usage of a proper code editor is key to every development project.


Atom is a simple and straight-forward editor that excels though its ability to be extend with many packages.
A short tutorial on the various functionalities can be found here.
An older video from is available here.


Certain projects need bigger tools like WebStorm that provide more professional functionalities.
There is a tutorial on the usage here and a couple of vides located here.

If you sign up with your ZHdK mail address you can enjoy all products by Jetbrains for free.

Setting Up Webstorm for P5.js 

Fork or download the IAD P5.js template here. From the Webstorm File menu, select Open and navigate to the P5js_Standard directory and open. 

From the project screen, select Webstorm->Preferences in the menu bar.

In Prereferences, expand the Language & Frameworks tab, then the Javascript tab, and select Libraries.

 Select Download, wait for the available libraries to load, then search for P5 and click Download and Install. Ensure type/p5 has a tick for enabled, and click apply.

Other Editors

Sublime TextFree
Visual Studio CodeFree
Coda 2Paid