p5.nvim

Memory is expensive, even if we have excess amounts of it installed we often want to use the least amount as possible. This is one of the reasons why other people use terminal based code editors, such as Neovim, which are more friendly with cheaper hardware all the while losing very little performance despite these limitations.

Anyone who has tried to run vsc*de on a dual core machine that has small RAM (let's say 4GB and to make it worse you're running MS-Windows) will empathize with the huge latency involved in just opening the editor.

Which is why this plugin exists, to bring a better experience with p5.js projects (similar to p5.vscode but with more bells than whistles):

• Support for multi (live) server backends - Python, live-server, Deno, Bun.
• In-editor manpages for the p5 reference documentation.
• Simple interface to download contributor libraries into a sketchspace.
• Offline first project scaffolding with the core module(s) and type definitions ready to use
• Stream the browser logs to a terminal pane (that can be toggled into view) so that we don't have to open Developer Tools to read logs.
• Create a GitHub Gist for a sketchspace for sharing (bonus)

[!important] What's a sketchspace ?

Because naming things is hard in programming (is it easier in any other field ?) , the term sketchspace is a combination of sketch + workspace. I didn't want the "work" part because that just makes it sound less fun. So yes, its a completely imaginary term just like "algorist" (algorithm + artist).

Features (in detail)

Scaffolding a new sketchspace

Creating a new p5.js project should never require an internet connection, unless you're downloading the additional contributor libraries (which are also cached if there were installed in another sketchspace).

// Ascinema link demo

That's it.

Serving the sketchspace

The p5.vscode plugin has only one option for adding live server support to a sketchspace, the Live Reload plugin. But things are a bit more flexible from the nvim side, why not have alternative fall-backs using readily available tools.

When the user starts a live server in their sketch directory (with :P5Start ), the plugin will check for what to use in the following order of precedence:

• live-server
• Python3 HTTP module
• Bun
• Deno

[!important]

Scripts for Python, Bun and Deno server logic are in standalone files. Only the live-server command is hardcoded into the Lua code.

If the user has any of the above installed, then they've got the live reload feature support.

Why have the p5 reference as manpages

Because switching from the terminal to the browser for documentation lookups is annoying and a flow state killer (for heavy terminal users at least).

Some of the other advantages are:

• Search through the documentation with ease just like any other help/man pages
• Work completely offline in the event that you can't navigate to the p5 website for reference.

Streaming browser logs to the terminal using WebSocket

Screen estate is very limited, you can only show so much before things start to feel cramped. For example, you want to have half the screen to show the preview window and the other to have your terminal window. If you wish to see any errors or logs from your sketch, you have to toggle the DevTools which will squash your preview just so that you can see the console. Not a pretty look

// Add screenshot showing the dilemma

Why not just have the logs show in a dedicated pane that we can toggle into view directly from our editor and leave the preview pane uncluttered ?

// asciinema preview feature

This keeps you from jumping between windows (saving us tedious keystrokes) and keeps the browser focused on the preview.

Adding contributor libraries to the sketchspace

npm can be really slow when adding a new dependency, often you aim to install a single package and end up with other stuff installed as well (and the good part is you have no idea what all those extra dependencies do)

Instead of relying on node_modules for installing p5 psecific libraries, we can just use curl/wget which is cleaner and has less performance overhead than invokining node (we have crappy hardware, remember ?). The list of installed libraries is kept in a simple contrib-libs.json which can be understood by the library downloader when you run :P5Install which will install all the libraries listed therein. No npm/yarn/pnpm or whatever package manager.

And as a bonus when you install new libraries, their <script> tags are updated in the index.html

// Ascinema demo

Sharing your sketch as a Gist (bonus)

Better ways of sharing sketches exist (Codepen, the p5 web editor..) but for simplicity reasons its easier to have all your code on one platform. You can create a GitHub gist of your sketchspace which will upload your list of installed contributor libraries and the files that you select to be uploaded. In most cases just the sketch.js file (and any related user written modules) are enough to share an idea so there's no need to push the libraries themselves too.

Implementation overview

GH actions for fetching assets (modules, types, manpages)

Because the repository is supposed to work offline first and the assets need to be up to date, it was wiser to have a workflow that would do the following:

• Fetch the latest release from GitHub and the types from a CDN, and add them to the assets/ directory
• Fetch the manpages for the p5 reference, updated whenever there's a new release of P5. The artifacts are generated in a separate repository and pushed to the p5.nvim repository.
• Update the contrib-libs.json file by checking if all links are still valid (to avoid dead/deprecated libraries)

References

• Plugin source (GitHub)
• P5.js
• p5.vscode
• Neovim