# solid-three
> SolidJS bindings for ThreeJS
Latest version **0.2.0** (published 2023-05-22) · MIT license · 0 weekly downloads
## Install
```sh
npm install solid-three
pnpm add solid-three
yarn add solid-three
bun add solid-three
```
## Health
**Score 40/100 (D)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-05-22 |
| First published | 2021-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 255.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 177 |
| Maintainers | nksaraf, scottvorthmann |
## Links
- npm: https://www.npmjs.com/package/solid-three
- Repository: https://github.com/solidjs-community/solid-three
- Homepage: https://github.com/solidjs-community/solid-three#readme
- Issues: https://github.com/solidjs-community/solid-three/issues
- npm.io page: https://npm.io/package/solid-three
## Dependencies (2)
- [zustand](https://npm.io/package/zustand.md) ^3.7.2
- [@types/three](https://npm.io/package/@types/three.md) 0.149.0
## Recent versions
- 0.2.0 (latest) — 2023-05-22
- 0.3.0-next.11 (next) — 2025-08-21
- 0.3.0-next.10 — 2025-08-21
- 0.3.0-next.9 — 2025-08-21
- 0.3.0-next.8 — 2025-08-21
- 0.3.0-next.6 — 2025-08-12
- 0.3.0-next.5 — 2025-08-09
- 0.3.0-next.4 — 2025-08-05
- 0.3.0-next.3 — 2025-08-03
- 0.3.0-next.2 — 2025-08-03
- 0.3.0-next.1 — 2025-08-02
- 0.3.0-next.0 — 2025-07-31
- 0.1.0 — 2023-05-01
- 0.0.3 — 2022-02-01
- 0.0.2 — 2021-12-27
- … 3 more at https://npm.io/package/solid-three/versions
## README
# solid-three
[](https://pnpm.io/)
Solid-three is a port of [React-three-fiber](https://github.com/pmndrs/react-three-fiber) to [SolidJS](https://www.solidjs.com/),
originally created by [Nikhil Saraf](https://github.com/nksaraf).
It allows you to declaratively construct a [Three.js](https://threejs.org/)
scene, with reactive primitives, just as you would construct a DOM tree in SolidJS.
> **Note** This library has just been published to NPM from this repo.
> It is still in early development, and is not yet ready for production use.
> Please feel free to try it out and report any issues you find!
## Quick start
Install it:
```bash
npm i solid-three
# or
yarn add solid-three
# or
pnpm add solid-three
```
Use it:
```tsx
import { Canvas } from 'solid-three'
```
### Dev Container
If you are using VSCode on windows (or just prefer to develope in a container), you can use the included dev container to get started quickly.
1. Clone this repo to a directory _inside of your wsl instance_ such as `~/Github`
2. Navigate to the `solid-three` directory and run `code .`
3. Open the workspace from the provided file.
4. Make sure the [DevContainers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension is installed Click the bottom left corner of the window and select `Reopen in Container` - if the extension is installed, vscode should prompt you to open the project in a dev container when you open the workspace file.
#### Dev Container Notes
- We clone into the `wsl` instance because the dev container is running a linux container, and the windows filesystem will cause extreme performance loss due to IO overhead.
- If you are using a different shell, you may need to modify the `devcontainer.json` file to use your shell of choice.
- A port will automatically be forwarded when you run the project in dev mode, so you can access the dev server from your browser on windows at `localhost:` - the port will be displayed in the terminal when you run the project. This can be configured by you as well.
## Documentation
> **Note**: Coming Soon!
## Sample Applications
> **Note**: More Coming Soon!
### solid-three-template
This is a template for a SolidJS application that uses solid-three.
This project is a bare-bones `Vite` project that has been configured to use `SolidJS`, `solid-three`, and `ESLint` with `Prettier` for formatting.
[solid-three-template](https://github.com/ZanzyTHEbar/solid-three-template)
## Contributing
> **Note**: Coming Soon!
---
_Source: https://npm.io/package/solid-three · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._