Skip to content

Update reference generation instructions for p5.js 2.0 fork workflow #948

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 10, 2025
Merged

Update reference generation instructions for p5.js 2.0 fork workflow #948

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4bb86cf
docs: Update reference generation instructions to p5.js 2.0 fork work…
adi-ray Aug 23, 2025
cfc2db3
docs: Add npm install step
adi-ray Sep 4, 2025
2e772b9
docs: Clarify branch compatibility
adi-ray Sep 4, 2025
d35a095
docs: Add terminal output ss
adi-ray Sep 7, 2025
dff546f
Merge branch '2.0' into doc-update
perminder-17 Sep 8, 2025
4d3f64a
Merge branch '2.0' into doc-update
perminder-17 Sep 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/content/contributor-docs/en/contributing_to_the_p5js_reference.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,22 +380,22 @@ Class constructors are defined with the `@class` tag and the `@constructor` tag.

The p5.js repository is set up so that you can generate and preview the reference without needing to build and run the p5.js website as well.

* The main command to generate the reference from the reference comments in the source code is to run the following command.
To do so, make sure you have committed your changes to a branch of your fork of p5.js.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it may also be helpful to mention that this makes most sense on the 2.0 branch of the p5.js-website repository. Also, based on the subsequent step, the changes should be committed and pushed to one's branch, right? Please ignore if I'm incorrect.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it works fine with both branches. The only limitation is that it doesn’t work across branches.

For example, you cannot build the main branch of p5.js with the 2.0 branch of p5.js-website, and the same applies the other way around.

The main issue comes up with tutorials. For instance, the strands tutorial depends on the library from the dev-2.0 branch of p5.js, so it cannot build properly with the main branch. We could simply add a line to clarify this.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@perminder-17 Absolutely makes sense - it was an unintetional error on my part, to not "match" the branches, but thanks for the explanation here and the other responses on this PR!


* Then, in the p5.js-website repo, run the following command, using the URL of your fork of p5 before the `#`, and the name of your branch after the `#`:

```
npm run docs
npm run custom:dev https://github.com/yourUsername/p5.js.git#yourBranch
```

This will generate the necessary preview files and the main `docs/reference/data.json` file, which is the same file (after minification) that will be used to render the reference page on the website.
This will build the reference from your branch and start a development preview of the website. A URL will be logged in the console that you can go to in your browser to test out your changes.

* For continuous work on the reference, you can run the following command.
* When you're done, you can run this command to reset your changes:

```
npm run docs:dev
npm run custom:cleanup
```

This will launch a live preview of the rendered reference that will update each time you make changes (you will need to refresh the page after making changes to see them appear). This is useful, especially for previewing example code running in the browser.

* The main template files are stored in the `docs/` folder and, in most cases, you should not make changes directly to files in this folder, except to add new asset files in the `docs/yuidoc-p5-theme/assets` folder.

## Next steps
Expand Down