p5-starter

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

★ 20 Open GitHub ↗

:herb: Boilerplate for p5.js projects, including VSCode Intellisense and linting for HTML, CSS and JS.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Installation and Usage

This repository is a template, which you can use to quickstart your own new projects. It comes with a pre-configured environment for VS Code, with suggested extensions and configurations.

**Updated to use p5.js 2.0.4** - This starter kit now uses the latest p5.js 2.0 for enhanced performance and new features.

[GitHub - Creating a repository from a template](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template)

```bash
.
├── index.html
├── jsconfig.json
├── node_modules
├── package.json
├── sketch.js
└── style.css
```

# Visual Studio Code Workflow

Included is a `.vscode/extensions.json` file, which recommends a workspace inside Visual Studio Code with the following extensions:

* [LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
* [p5.js snippets](https://marketplace.visualstudio.com/items?itemName=acidic9.p5js-snippets)
* [eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
* [htmlhint](https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint)

To view your sketch, start the Live Server on VS Code. It defaults to [http://127.0.0.1:5500/](http://127.0.0.1:5500/ "http://127.0.0.1:5500/"). It supportes **live reload**, so you can edit the sketch and see the changes in near realtime, like the p5 online editor.

## Intellisense

Intellisense is provided via p5.js TypeScript definition files.

Solution found on issue [#1339](https://github.com/processing/p5.js/issues/1339 "#1339").

Instead of downloading the TypeScript definitions, we can now use this NPM package: [@types/p5](https://www.npmjs.com/package/@types/p5).

# ESLint rules

There are some disabled rules on `.eslintrc.json`, but they're entirely personal choices.

p5-starter

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README