Increasing Access
When a user writes or selects a p5.js function using the autocomplete hinter (e.g. loadFont()), there is currently no way to quickly look up what that function does without leaving the editor, opening a browser tab, and manually searching the p5.js reference. This is slow and disruptive, especially for developers building larger sketches who need to check parameters and return values frequently.
Feature request details
Add a "Go to Documentation" option to the editor's right-click context menu. When clicked, it opens the official p5.js reference page for the selected/hovered token directly in a new browser tab.
Implementation outline:
Detect the token — Use CodeMirror's getTokenAt(cursor) to read the word at the cursor position when the context menu is triggered.
Construct the URL — Build a reference URL dynamically:
https://p5js.org/reference/p5/{token}
For example, right-clicking loadFont opens:
https://p5js.org/reference/p5/loadFont
Open in a new tab — Call window.open(url, '_blank') from the context menu handler.
Files likely affected:
Custom context menu component (wherever right-click menu is defined)
CodeMirror editor integration layer
User Experience
This mirrors the "Go to Definition" / F12 behaviour familiar from VS Code and other modern IDEs. The interaction would be:
User types or selects a p5.js function using autocomplete
User right-clicks the function name
Context menu shows "↗ Go to Documentation" as the first/highlighted item
Clicking it opens https://p5js.org/reference/p5/{functionName} in a new tab
Why this matters
Reduces context switching for beginners and experienced users alike
Consistent with IDE conventions users already know
Especially valuable during autocomplete-driven coding, where the user may not remember exact parameter order or return types
Low implementation complexity relative to the workflow improvement
Related / Prior Art
VS Code: hover + F12 / Ctrl+Click → Go to Definition
Chrome DevTools: documented function links in Console autocomplete
Increasing Access
When a user writes or selects a p5.js function using the autocomplete hinter (e.g. loadFont()), there is currently no way to quickly look up what that function does without leaving the editor, opening a browser tab, and manually searching the p5.js reference. This is slow and disruptive, especially for developers building larger sketches who need to check parameters and return values frequently.
Feature request details
Add a "Go to Documentation" option to the editor's right-click context menu. When clicked, it opens the official p5.js reference page for the selected/hovered token directly in a new browser tab.
Implementation outline:
Detect the token — Use CodeMirror's getTokenAt(cursor) to read the word at the cursor position when the context menu is triggered.
Construct the URL — Build a reference URL dynamically:
https://p5js.org/reference/p5/{token}
For example, right-clicking loadFont opens:
https://p5js.org/reference/p5/loadFont
Open in a new tab — Call window.open(url, '_blank') from the context menu handler.
Files likely affected:
Custom context menu component (wherever right-click menu is defined)
CodeMirror editor integration layer
User Experience
This mirrors the "Go to Definition" / F12 behaviour familiar from VS Code and other modern IDEs. The interaction would be:
User types or selects a p5.js function using autocomplete
User right-clicks the function name
Context menu shows "↗ Go to Documentation" as the first/highlighted item
Clicking it opens https://p5js.org/reference/p5/{functionName} in a new tab
Why this matters
Reduces context switching for beginners and experienced users alike
Consistent with IDE conventions users already know
Especially valuable during autocomplete-driven coding, where the user may not remember exact parameter order or return types
Low implementation complexity relative to the workflow improvement
Related / Prior Art
VS Code: hover + F12 / Ctrl+Click → Go to Definition
Chrome DevTools: documented function links in Console autocomplete