P5LIVE

v 1.8.0
cc teddavis.org – 2019 - 2026
p5.js collaborative live-coding vj environment!

SHORTCUTS

P5LIVE (default)

| | | |--:|:--| |CTRL + ENTER|softCompile| |CTRL + SHIFT + ENTER| hardCompile | | CTRL + E | editor toggle | | CTRL + N | new sketch | | CTRL + SHIFT + C | clone sketch | | CTRL + A | autocompile toggle | | CTRL + , | settings toggle | | CTRL + R | references toggle | | CTRL + B | chalkboard toggle | | CTRL + T | tidy code | | CTRL + SPACE | autocomplete | | CTRL + + | increase fontsize | | CTRL + - | decrease fontsize | | CTRL + S | save png [ + code ] | | CTRL + 1, 2, 3...0 | jump to first 10 sketches | | CTRL + SHIFT + ⇡⇣ | jump to previous/next sketch |
| CTRL + SHIFT + DELETE | delete current sketch |

Customize shortcut keys within the Settings panel

Ace Editor

| | | |--:|:--| |ALT + UP/DOWN|shift lines up/down| |META + ALT + UP/DOWN|duplicate lines up/down| |META + D|delete line|

(META = CMD on MacOS, CTRL on Windows/Linux)

GETTING STARTED

LIVE-CODE IN 3... 2... 1...

<img src="includes/images/menu-sketches-new-7.png" width="220px">

• <img class="svg" src="includes/icons/file-plus.svg" height="12px"> Create New Sketch or CTRL + N and start coding!
• Live-coding active by default, CTRL + ENTER to force recompile.
• Sketches are auto-saved to localStorage + IndexDB on every keystroke.

INSTALL

Online »  p5live.org
Offline » github.com/ffd8/p5live (see OFFLINE-MODE at bottom for instructions)

SAVING

Sketches are ONLY saved in your browser's localStorage + IndexDB(!).
Export all (<img class="svg" src="includes/icons/download.svg" height="12px">) sketches + settings regularly.
Clearing browser history/data will likely erase all sketches + settings.

localStorage + IndexDB are unique and isolated per http[s] / domain / port,
so export/import all sketches to migrate between online / offline / browsers.
Simply use Settings Panel» Backup » Now to export all settings + sketches.

Automatic Backups

See Settings Panel » Backup to automatically export a P5LIVE backup file at varying intervals. If using Offline Server, it will save these backups to your P5LIVE/_backups folder rather than downloads.

MENU

P5LIVE PANEL

<img src="includes/images/menu-p5live-10.png" width="220px">

• <img class="svg" src="includes/icons/help-circle.svg" height="12px"> About, 👋 you're reading me now.
• <img class="svg" src="includes/icons/settings.svg" height="12px"> Settings, adjust editor settings + shortcuts.
• <img class="svg" src="includes/icons/book-open-references.svg" height="12px"> Reference, CTRL + R, toggle embeded p5.js reference.
• <img class="svg" src="includes/icons/edit.svg" height="12px"> Chalkboard, CTRL + B, toggle chalkboard over for annotations.
• <img class="svg" src="includes/icons/monitor.svg" height="12px"> Popup Stream, hover for visuals/code as separate outputs:

  <img src="includes/images/menu-popup-options.png" width="220px">

  - <img class="svg" src="includes/icons/cast.svg" height="12px"> Visuals-only popup.
  - <img class="svg" src="includes/icons/align-left.svg" height="12px"> Code-only popup.

• <img class="svg" src="includes/icons/save.svg" height="12px"> Export, hover for submenu options:

  <img src="includes/images/menu-p5live-export-3.png" width="220px">

  - <img class="svg" src="includes/icons/camera.svg" height="12px"> Save .png, CTRL + S, image (+ code if active in settings).
  - <img class="svg" src="includes/icons/link.svg" height="12px"> Share code as URL (links to online version at p5live.org).
  - <img class="svg" src="includes/icons/file-text.svg" height="12px"> Save .html, single page website (re-link asset paths).

SETTINGS PANEL

<img src="includes/images/menu-settings-nav-3.png" width="220px">

• <img class="svg" src="includes/icons/refresh-cw.svg" height="12px"> Reset Settings to defaults
• <img class="svg" src="includes/icons/upload.svg" height="12px"> Import Settings
• <img class="svg" src="includes/icons/download.svg" height="12px"> Export Settings

Options

• [x] Live Coding, [500ms], auto-compile error-free code on keyup, with set delay.
• [x] Console, display console messages, [auto/show] to hide or keep visible.
• [x] Eco Render, noLoop() if window loses focus (save computer resources).
• [x] Menu Tab, toggle menu tab. (hide if visible while VJ'ing).
• [x] Snapshot Code, export current code with each image snapshot.
• [x] Line Numbers, display code line numbers (and gutter features).
• [x] Recompile Pulse, flash compiled section of code.
• [ ] Auto Autocomplete, useful for learning, or use CTRL + SPACE on demand.

<!--- [x] Lock Code on Drag, locks code editor on mouse drag to prevent displacing code. (temp remove)-->

• [ ] Pass Editor Keys, keypresses from editor to p5 canvas (hide editor otherwise).
• [x] Notifications, display notifications (shortcut settings + chat).
• [x] Tooltips, displays extra info on hover.
• [x] Multi-P5LIVE Warning, if opened multiple times can lose sync of sketches.
• [x] Timestamp Exports, adds _YYYYMMDD_HHMMSS to filenames.
• [ ] COCODING Flags, show cursor flags or only with mouseover userlist.
• [x] COCODING Autosave, autosave session code if server/internet lost.
• [x] Check Updates, check Github for updates (offline-mode only).
• Backup, [off], saves/downloads P5LIVE (sketches + settings) at intervals. Now - on demand. Set to Daily in offline-mode.
• Code Size, 15pt adjust font size of editor.
• Theme, [Green on Black], select custom styling of editor.
• [x] Background, toggle + set color behind lines of code.
• [x] Text, toggle + override unstyled text in code.
• [x] Active-line, toggle + set active-line color.
• Keybinding, [ace], select alternative keybindings of editor.
• Snippets, Launch Editor, to open snippets editor.
• [ ] GhostMode, animated typing of snippets and ace-snippets.
• GhostMode Delay, 15, adjust small/high for fast/slow
• [ ] SoniCode, plays oscillator/midi on every keystroke.

SoniCode

Want to sonify your coding process?! Activate this toggle to generate sounds based on every keystroke (mapping keyCode to sample note). There are built in oscillators, however one can also select midi to send midi notes (channel 1) out to a DAW of choice for more complex samples.

Shortcuts

Customize keyboard shortcuts by clicking on name + press a new key combination.

Reset P5LIVE

• <img class="svg" src="includes/icons/slash.svg" height="12px"> Completely reset P5LIVE = deletes all sketches + settings!
  Don't forget to export sketches first.

COCODING PANEL

<img src="includes/images/menu-cocoding-inactive-7.png" width="220px">

See dedicated COCODING section below for details.

RECODING PANEL

<img src="includes/images/menu-recoding-inactive-1.png" width="220px">

See dedicated RECODING section below for details.

SKETCHES PANEL

<img src="includes/images/menu-sketches-7.png" width="220px">

• <img class="svg" src="includes/icons/file-plus.svg" height="12px"> New sketch.
• <img class="svg" src="includes/icons/copy.svg" height="12px"> Clone sketch, duplicates active sketch.
• <img class="svg" src="includes/icons/folder-plus.svg" height="12px"> New folder, nest sketches/folders within others.
• <img class="svg" src="includes/icons/upload.svg" height="12px"> Import, select JSON files from export (single/folder/all).
• <img class="svg" src="includes/icons/download.svg" height="12px"> Export, exports entire sketches list for import/backup.

Filter

<img src="includes/images/menu-sketch-filter-blank-2.png" width="220px"> <img src="includes/images/menu-sketch-filter-2.png" width="220px">

Lost the overview of your sketches?
Type in keywords to match names of sketches and folders, filtering only those results. Use separate words for an and search, ie. 3d webgl text. To organize, add a new folder containing that word, and drag + drop items into it.

Optionally, toggle <> to search through source code of all sketches.

Sketch

<img src="includes/images/menu-sketch-selected.png" width="209px"> <img src="includes/images/menu-sketch-nav-9.png" width="209px"> <img src="includes/images/menu-sketch-nav-expanded-10.png" width="209px"> <img src="includes/images/menu-sketch-locked.png" width="209px">

• Load Sketch, click on name.
• Click on loaded sketch (green) to rename.
• <img class="svg" src="includes/icons/more-horizontal.svg" height="12px"> Hover to view contextual options
  • <img class="svg" src="includes/icons/unlock-mod.svg" height="12px"> Lock, read-only for remixig during performances.
  • <img class="svg" src="includes/icons/align-left.svg" height="12px"> Inspect, view/edit code as popup.
  • <img class="svg" src="includes/icons/edit-3.svg" height="12px"> Rename, give sketch new name.
  • <img class="svg" src="includes/icons/download.svg" height="12px"> Export, export single sketch as JS file.
  • <img class="svg" src="includes/icons/trash-2.svg" height="12px"> Remove, delete sketch after confirmation.
• Sort, click + hold + drag to desired order.
• Place in folder, slowly drag + drop into/over folder.

Folder

<img src="includes/images/menu-folder-nav-9.png" width="209px"> <img src="includes/images/menu-folder-nav-expanded-10.png" width="209px">

• Expand/collapse Folder, click on name.
• <img class="svg" src="includes/icons/more-horizontal.svg" height="12px"> Hover to view contextual options
  • <img class="svg" src="includes/icons/edit-3.svg" height="12px"> Rename, give folder new name.
  • <img class="svg" src="includes/icons/f