Hello p5.js Web Editor!

Today we are excited to announce the official release of editor.p5js.org! The p5.js Web Editor is an online platform for learning to code in a visual way. Designed for all ages and abilities, anyone can get started quickly creating, editing, and sharing p5.js sketches.

p5.js Web Editor featuring “Tea Time” by Matthew Kaney [image description: Screenshot of p5.js Web Editor in browser tab with sketch of tea objects spiraling]

Visit editor.p5js.org to begin making a project. You can start with one of the many examples, or start from scratch. It is free and the open source, no sign up, setup, or download required. Using p5.js you can use JavaScript, HTML, and CSS to create graphics in 2D and 3D, add text, images, video, and audio, and make your sketch interactive with mouse, touch, webcam input, and motion sensing.

Examples built into the p5.js Web Editor [image description: Screenshot of p5.js Web Editor with panel displaying multiple example sketches with topics “interaction” and “simulate”]

All the sketch files are stored online, and you can easily share a link to your sketch or embed it in blogs and websites.

[image description: Screenshot of p5.js Web Editor with panel with links to the sketch URL and embed code]

The p5.js Web Editor has been in development since 2016 led by Cassie Tarakajian. You can read more about her process here. In the video below, Cassie gives an overview of features and introduction to coding with p5.js in the Web Editor.

The p5.js Web Editor is accessible!

From the start, we’ve been building the p5.js Web Editor to be accessible to people with visual impairment. This means making the editor and p5.js resources usable with screen readers, and also making sure that the drawing canvas is available in the form of text and sound. Below, Mathura Govindarajan gives a tour of the accessibility features.

This effort has been led by Processing Foundation Fellows Claire Kearney-Volpe, Mathura Govindarajan, and Luis Morales-Navarro. You can read more about Claire, Mathura, and Luis’ work in developing p5.js accessibility here and here.

p5.js Web Editor in high contrast mode featuring “The Sound of an Effect” by Xin Xin [image description: Screenshot of p5.js Web Editor with high contrast colors, displaying a sketch using webcam to create abstract images]

Designed with students and teachers in mind

The p5.js Web Editor is designed for learning. We aim to make p5.js as friendly and welcoming as possible for beginners. There’s an extensive reference with interactive examples, friendly error messages to help with debugging, and tools to make teaching and collaborating with p5.js easy. It’s designed for use in K12 to university classrooms and beyond. Because everything is stored online, students can easily share at home with parents and friends. Below, Processing Foundation Fellow Saber Khan walks through the basics of p5.js for educators, features for students, and curricula resources.

The p5.js Web Editor was developed with support from NYU’s Interactive Telecommunications Program (ITP) and the NYC Department of Education CS4All Team. The Processing Foundation and the NYC DOE CS4All Team are collaborating on a new creative computing curriculum for high schools that uses the p5.js and the Web Editor.

The p5.js Web Editor is Open Source

While this project is maintained by the Processing Foundation, led by Cassie, it is a collaborative effort. The project has been created with technical contributions from all around the world, and also many non-technical efforts, including project management from Ana Giraldo-Wingler, UI/UX design from Jerel Johnson, and bug reports and feature requests from dedicated users. This project built on earlier p5.js editor concepts developed by Sam Lavigne and Jason Sigal. We are open to many different types of contributions to this project, and we welcome everyone to get involved.

We hope you like it! You can submit ideas, thoughts, and feedback here. Or discuss your own p5.js projects with the community on our forum.

Visit editor.p5js.org to start sketching with code :)

The videos were edited by by Mathieu Blanchette, produced by Ana Giraldo-Wingler, with animations by Marty Tzonev, and music by Louis Schwadron.

You can help support this work by donating to the Processing Foundation.




The Processing Foundation promotes software literacy within the visual arts, and visual literacy within technology-related fields. Our publication posts articles about and by members of our community.

Recommended from Medium

Component-centric Code Splitting with React-loadable and Typescript

Coalescing — How To Find The First Non-Null/Non-Undefined Argument In A Function in JS

How to convert a web page into PDF format using renderAs attribute

Introduction to Promises


Part 1 — Creating an Immersive Digital Story — Practical Assignment

A recap of front-end development in 2017

SpindleView CNC Camera Software

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Processing Foundation

Processing Foundation

The Processing Foundation promotes software literacy within the visual arts, and visual literacy within technology-related fields.

More from Medium

Ambika Joshi on Creating Space for Womxn Creators through Coding with Friends

A screenshot showing three women smiling while the back of a young child appears in the centre of the image. The image appears over a pink and purple background.

How to mark up a WebGL Panorama

Paving the Golden Path

A path in golden lighting.

Automating SVG Icon Creation for Svelte