Need help with p5.js-widget?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

146 Stars 34 Forks GNU Lesser General Public License v2.1 174 Commits 36 Opened issues


A reusable widget for embedding editable p5 sketches in web pages.

Services available


Need anything else?

Contributors list

# 26,867
160 commits
# 391,943
1 commit

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
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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.