Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>p5js live editorNew to Visual Studio Code? Get it now.
p5js live editor

p5js live editor

andreapollini

|
13,262 installs
| (3) | Free
Live preview for p5js projects
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

p5-live-editor

This extension let you code using p5js without leaving Visual Studio Code.

There are other plugins that le you do the same but all have some troubles, so I decided to "merge" them in order to create a more useful editor for my classroom lessons.

If the current folder contains an index.html and a sketch.js, you can open the preview by clicking on the button in the status bar.

P5 live Editor - Open Preview

Features

  • Start as simple as a single sketch.js file
  • include multiple files simply creating them in the repository folder
  • JSHint integration to find errors
  • Fully ES 6 compatible

Usage

If a JavaScript file is open, a p5-live-editor button appears in the status bar bottom left. Click on it, to open the preview.

Known Issues

There are currently no known issues. If you find any issues, please feel free, to fill an issue on github Github.

Release Notes

0.6.0

Changed

  • better logging

Added

  • support for loadJSON
  • support for loadImage

Removed

  • Removed project management.

0.5.1

Fixed

  • improved resolution of external libraries

0.5.0

Fixed

  • added gloabals to jshint in order to use p5js global variables.

0.4.1

Fixed

  • errors in strict mode (functions not defined) fixed.

0.4.0

Added

  • console.log messages appears in the output panel

Changed

  • Javascript files must follow strict mode (enabled in order to get all the errors in the output panel in the correct way)

0.3.1

Fixed

  • Fixed bug in opening condition

0.3.0

Changed

  • Now you can open the p5 live editor preview clicking on the p5-livee-editor button in the status bar.

Fixed

  • Now You can open the preview panel only if in the current files there are a index.html and a sketch.js file.

0.2.0

  • added project management

0.1.1

  • Fixed some typo

0.1.0

  • First release

License

This Library is licensed under the MIT License. Please refer to the LICENSE.txt for more information.

Plugin I've taken code from

I try to merge the feature of two great plugins: https://github.com/filipesabella/vscode-live-p5 and many of the code is taken from https://github.com/pixelkind/p5canvas (I forked this repo) Icons from: https://github.com/tabler/tabler-icons

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft