A reusable widget for embedding editable p5 sketches in web pages.
TypeScript HTML CSS JavaScript Shell
Clone or download
Latest commit 2f1fe9f Dec 10, 2017


Build Status

This is a widget to make it easier to embed editable p5 sketches in blog posts, interactive curricula, and other places.

For more information on its usage, please see the website.

The rest of this documentation is about developing p5.js-widget, not using it.

Quick Start

git clone https://github.com/toolness/p5.js-widget.git
cd p5.js-widget
npm install
npm start

This will start a development server at http://localhost:8080/.

The development server automatically rebuilds the main JS bundle whenever you change any of its dependencies.

Note that this project uses TypeScript and React. Many source files use ECMAScript 2015, TypeScript and JSX, which can make the code look a bit unfamiliar.

If you're unfamiliar with React, consider reading the React Tutorial for p5 Programmers.

TypeScript Editor Support

While it's not required for making changes to the codebase, I highly recommend adding TypeScript Editor Support to your editor of choice. It really makes working on code a lot easier, thanks to auto-completion and a bunch of other useful features that make it feel like you've got an experienced coder watching your back.


Our CSS is intended to be as standards-compliant as possible, while leveraging new W3C standards to keep things easy to understand and maintain. To this end, we use PostCSS with a minimal number of plugins:


The test suite can be run on the development server at http://localhost:8080/test/, or on the command-line with npm test.