This template provides a minimal setup to get p5.js + React working in Vite with HMR and some ESLint rules.
See ./src/App.jsx and ./src/Sketch.js for a working example of how to connect a p5.js sketch to the DOM via React useRef. The code in ./src/Sketch.js is the solution for the p5.js Get Started Tutorial.
Note that changing the p5.js file does not trigger HMR with the current setup.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.