Drawing Shapes with p5.js

p5.js is a JavaScript library for creative coding. You can embed live, interactive sketches directly into MkDocs pages.

A Simple Sketch

Interactive Example

How It Works

Each sketch uses p5.js instance mode so multiple independent sketches can coexist on the same page (important with navigation.instant).

p5.js is loaded globally via extra_javascript in mkdocs.yml. Just define your sketch function and call new p5(sketchFn, 'container-id').