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.cjs.
npm run buildnpm run build will bundle your sketch in production mode using webpack.
The webpack build configuration can be found in webpack.config.cjs.
npm run build:single-file:devnpm run build:single-file:dev will bundle your sketch in development mode using webpack.
The resulting bundle will have your source code and all its dependencies in a single JavaScript file.
This should identify any compiler errors present in your source code.
The webpack build configuration can be found in webpack.single-file.config.cjs.
npm run build:single-filenpm run build:single-file will bundle your sketch in production mode using webpack.
The resulting bundle will have your source code and all its dependencies in a single JavaScript file.
The webpack build configuration can be found in webpack.single-file.config.cjs.
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 serve:single-file:devnpm run serve:single-file:dev will bundle the sketch in development mode with webpack.single-file.config.cjs, 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.
npm run serve:single-filenpm run serve:single-file will bundle the sketch in production mode with webpack.single-file.config.cjs, 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.ico of this template was designed by Freepik from Flaticon. You can find the original icon on flaticon.com.
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.
Copyright © 2023-2026 brittni and the polar bear LLC.
