A template project for using p5.js with TypeScript and webpack. Webpack runs in the Node.js runtime environment to bundle the sketch for execution in a web browser.
Create a new project from this template using the green "Use this template" button above.
Write the project's source code in the src/ directory.
The src/sketch.ts file provided contains a simple p5.js program with a black background and a white circle.
This file will be used as the entry point for webpack.
npm installnpm install will install all the dependencies required to run this project.
npm run lint:tsnpm run lint:ts will lint the TypeScript source code using ESLint, identifying syntactic and stylistic errors based on a configured set of rules.
TypeScript linting configurations and rules can be found, edited, and updated in eslint.config.ts.mjs.
npm run lint:jsnpm run lint:js will lint the JavaScript configuration files using ESLint, identifying syntactic and stylistic errors based on a configured set of rules.
JavaScript linting configurations and rules can be found, edited, and updated in eslint.config.js.mjs.
npm run build:devnpm run build:dev will bundle your sketch in development mode using webpack.
This should identify any compiler errors present in your source code.
The webpack build configuration can be found in webpack.config.mjs.
npm run buildnpm run build will bundle your sketch in production mode using webpack.
The webpack build configuration can be found in webpack.config.mjs.
npm run serve:devnpm run serve:dev will bundle the sketch in development mode, start a localhost development server (127.0.0.1:8080), and open a new browser window for the index.html file bundled with the compiled sketch.
npm run servenpm run serve will bundle the sketch in production mode, start a localhost development server (127.0.0.1:8080), and open a new browser window for the index.html file bundled with the compiled sketch.
This template contains GitHub workflows designed to update project dependencies and scan the code for security vulnerabilities every month.
To learn more about Dependabot configurations, visit the GitHub Dependabot documentation.
To learn more about CodeQL configurations, visit the GitHub CodeQL documentation.
The favicon for this template project is an artist palette emoji, which is used to represent creativity and artistic expression. The favicon was generated from the Artist Palette emoji using Favicon Generator.
This favicon was generated using the following graphics from Twitter Twemoji:
- Graphics Title: 1f3a8.svg
- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f3a8.svg
- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The source code of this project is licensed under the MIT License. The full text of the license is included with the package source code.
A huge thank you to all the open source contributors who have made this project possible by creating and maintaining the libraries and tools used in this template, and to the open source community for fostering collaboration and innovation.
A special thank you to all the educators, mentors, and content creators who have shared their knowledge and expertise in the fields of web development and computer science. Thank you for giving me the tools, resources, opportunities, support, and inspiration to learn and grow as a developer.
Copyright © 2023-2026 Brittni Watkins.