Showcase your sketches hosted on GitHub Gists.
- Load and preview sketches (dynamically) via GitHub gists
- Edit and run sketch code on-site
- Show the used symbols in a sketch
- Provide description for the sketch (useful for sharing references and the thought process)
- Jump to the sketch's related gist
Note
This project is far from competing with the p5.js web editor for functionality (i.e., it doesn't have FES integration, etc.) but rather serves as an alternative approach to sharing your sketches in a more self-hosted fashion.
Also the motivation of this template was to reduce the moving parts between developing, publishing, and maintaining sketches so that any changes are trivial and kept at one 'source of truth'.
If you're looking to learn p5.js instead, please use the web editor as it has many more features geared towards that goal.
Edit the sitemeta.json file to configure your sketchbook:
Each gist must contain a sketch.js file and optionally a p5.json file.
If the gist has a p5.json, the libs key is scraped for any installed p5 plugins and loads them via a CDN.
Other dependencies outside of the p5.js scope are specified using a special comment with each name being a valid NPM package name (space or comma separated):
// deps: package1 package2
// OR
//deps: package1,package2,...Caution
Loading (big) modules can increase your sketch preview page's FCP as well as the page's RAM usage considerably. Pick the lightest dependency whenever possible.
The first GitHub comment on a gist (by the gist owner) becomes the sketch description. When that comment is updated (or the associated sketch.js and p5.json file), the changes are immediately mirrored on the sketchbook.
This allows the user to make edits to their sketches and not worry about redeploying for the changes to take effect.
Tip
There's a (nice) workflow that I use to develop, publish and maintain sketches from the terminal using the p5.nvim plugin
Warning
Rendering is expensive.
If your sketch is making the preview page lag, do most work in setup(), lower frameRate(), or call noLoop() at the end of draw().
All sketches must be in instance mode, global mode will not work.
This allows us to embed different sketches without creating any collisions with other JS libraries.
Tip
For more about why instance mode is preferred over global mode, see this article on the p5.js wiki
(c) 2026, prjctimg
This is free software, released under the GPL-3.0 license.
{ "site": { "title": "skchbk", // Site title (used in <title>) "description": "...", // Meta description "url": "https://example.com" // Deployed URL }, "github": { "username": "your-github-username", }, "ga": { "measurementId": "" // Google Analytics 4 measurement ID (optional) } }