Skip to content

chore(docs): update documentation for @playcanvas/react 0.10.0 release #256

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
marklundin merged 2 commits into from
Sep 22, 2025
Merged

chore(docs): update documentation for @playcanvas/react 0.10.0 release #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc3250b
chore(docs): update documentation for @playcanvas/react 0.10.0 release
marklundin Sep 22, 2025
6287843
Merge branch 'main' into chore-docs-fixes-3
marklundin Sep 22, 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
4 changes: 2 additions & 2 deletions packages/docs/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo
</Head>
<body>
<Layout
banner={<Banner storageKey="0.9.0-release"><a href="https://github.com/playcanvas/react/releases/tag/v0.8.0" target="_blank" rel="noreferrer">
🎉 <b>@playcanvas/react 0.9.0</b> is here! ✨
banner={<Banner storageKey="0.10.0-release"><a href="https://github.com/playcanvas/react/releases/tag/v0.10.0" target="_blank" rel="noreferrer">
🎉 <b>@playcanvas/react 0.10.0</b> is here! ✨
</a></Banner>}
navbar={navbar}
footer={<Footer>
Expand Down
14 changes: 8 additions & 6 deletions packages/docs/content/docs/guide/getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,18 +44,20 @@ Here's what it should look like...

### Create a new project

We recommend using [Vite](https://vitejs.dev/) to create your project. It's fast, easy to use, and quickly integrates with React. But you can use any other build tool you prefer.

You can create a new project with the following command, and follow the prompts
The fastest way to get started is using the official PlayCanvas project scaffolding tool:

```bash
npm create vite@latest my-first-3d-app -- --template react
npx create playcanvas@latest my-first-3d-app -t react-ts
cd my-first-3d-app
npm run dev
```

Next, install the `@playcanvas/react` package and start the development server:
Alternatively, you can use [Vite](https://vitejs.dev/) to create your project and manually install the dependencies:

```bash
npm install @playcanvas/react playcanvas@latest
npm create vite@latest my-first-3d-app -- --template react
cd my-first-3d-app
npm install @playcanvas/react
npm run dev
```

Expand Down
35 changes: 27 additions & 8 deletions packages/lib/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,18 +43,23 @@ It's built around PlayCanvas - a battle-tested, real-time 3D engine and ships wi

## Getting Started

⚡ Start building in minutes with our [playcanvas-react.app/new](https://playcanvas-react.vercel.app/new) template.
⚡ Start building in minutes with our [playcanvas-react.vercel.app/new](https://playcanvas-react.vercel.app/new) template.

Install with your favorite package manager...
### Quick Start

Create a new @playcanvas/react project and follow the instructions:

```bash
npm install @playcanvas/react playcanvas
npx create playcanvas@latest -t react-t
```

You can also clone the following starter template.
### Manual Installation

Or install in an existing project with your favorite package manager:

```bash copy
git clone https://github.com/marklundin/playcanvas-react-template.git
**npm**
```bash
npm install @playcanvas/react
```

### Show me the code
Expand Down Expand Up @@ -100,14 +105,28 @@ Developers and studios are already using @playcanvas/react in production
- ⚡ Snap AI uses @playcanvas/react to build real-time 3D interfaces inside their next-gen tools.
- ✨ Your project here? [Submit a PR](https://github.com/playcanvas/react/compare) and we’ll feature it below.

## AI assisted editors
## AI Ready

To get your IDE up to speed, you can install the latest MDC rules for cursor. Or [grab them here](https://playcanvas-react.vercel.app/rules) to add them manually.
Every component comes with MDC rules for autocompletion, documentation, and AI integration — ready for use in tools like Cursor or Windsurf.

### Install AI Rules for @playcanvas/react

```bash
mkdir -p .cursor/rules && curl -s https://playcanvas-react.vercel.app/rules -o .cursor/rules/playcanvas-react.mdc
```

### Install AI Rules for Blocks

To install rules for PlayCanvas Blocks:

```bash
npx shadcn@latest add https://playcanvas-react.vercel.app/r/blocks.json
```

This installs the rules for the registry and for @playcanvas/react and adds them to your project.

[Grab the rules manually here](https://playcanvas-react.vercel.app/rules) if you prefer.

## Contributing

If you want to build the repo from scratch, check out the following. The monorepo is split into 3 main packages:
Expand Down
Loading