Integrated Web Server
The Run Sketch command can open the sketch in an external web browser (such as Chrome, Safari, or Edge), or in an integrated browser inside Visual Studio Code. (The "P5-server: Browser" setting controls this.)
If the "P5-server > Explorer: Auto Run Sketch On Side" setting is enabled, clicking on a sketch in the Sketch Explorer also runs it next to the editor. This makes it easy to quickly browse a collection of sketches.
When the "P5-server: Browser" setting is set to
The console output pane automatically appears when a message is printed to it. This behavior can be changed via the "Console > Integrated Browser > Auto Show: Level" setting.
Automatic Library Includes
In the screenshot below, the extension infers that the
The explorer also detects that the file
View the Visual Studio Code Marketplace extension page, and click the Install button.
Step by Step
Step-by-step installation and usage instructions are here.
The extension provides configuration settings to set the browser, and to hide various user interface elements. Follow these instructions to modify these settings.
See the p5-server documentation for limitations that also affect this extension.
The sketch-aware server is available as command-line tool at
p5-server. Install it via
The command-line version can also be used to generate a static web site. This creates the HTML files that are necessary to run the sketch in a browser without a special server.
https://code.osteele.com lists my other p5.js projects. These include tools, libraries, and examples and educational materials.
Keeping in Touch
Bug reports, suggestions, and other contributions are cheerfully accepted. Please use the Issues page of the GitHub repository.
Follow @osteele on Twitter for updates.
MIT © by Oliver Steele