diff --git a/apps/docs/pages/docs/setup/_meta.json b/apps/docs/pages/docs/setup/_meta.json
index 14d88ea7..8f29527e 100644
--- a/apps/docs/pages/docs/setup/_meta.json
+++ b/apps/docs/pages/docs/setup/_meta.json
@@ -1,5 +1,7 @@
{
"overview": "Overview",
"macos": "macOS",
- "windows": "Windows"
+ "windows": "Windows",
+ "manual-setup": "",
+ "javascript-projects": ""
}
diff --git a/apps/docs/pages/docs/setup/javascript-projects.mdx b/apps/docs/pages/docs/setup/javascript-projects.mdx
new file mode 100644
index 00000000..1fc9efca
--- /dev/null
+++ b/apps/docs/pages/docs/setup/javascript-projects.mdx
@@ -0,0 +1,34 @@
+Triplex works best with TypeScript as the rich type information is used to
+populate the editor controls, however if you're not yet using TypeScript you're
+still able to use Triplex.
+
+## Set up config file
+
+In your existing project add a
+[`.triplex/config.json`](/docs/api-reference/config) file:
+
+```json
+{
+ "components": ["../src/components/**/*.jsx"],
+ "files": ["../src/**/*.jsx"]
+}
+```
+
+Where `"components"` is a glob pointing to custom components that can be added
+to other components, and `"files"` is a glob pointing to any files you want to
+open with Triplex.
+
+## Add type packages
+
+Make sure to add types to your project (even if you're not using TypeScript!) —
+this will make your experience in Triplex that much better as all Three.js
+primitives will have types the editor can use:
+
+```
+npm install @types/react @types/three
+```
+
+## Open your project
+
+You're now able to open your project with Triplex! When you do Triplex will add
+a `.tsconfig.json` file to the root of your project.
diff --git a/apps/docs/pages/docs/setup/manual-setup.mdx b/apps/docs/pages/docs/setup/manual-setup.mdx
index 74a08f8b..b8d8b966 100644
--- a/apps/docs/pages/docs/setup/manual-setup.mdx
+++ b/apps/docs/pages/docs/setup/manual-setup.mdx
@@ -3,7 +3,7 @@ title: Manual Setup
---
If you'd prefer to set up your project manually instead of using the "Create
-project" in Triplex you can do so following this guide.
+project" action in Triplex you can do so following this guide.
## Install dependencies
@@ -14,8 +14,8 @@ Install `react`, `@types/react`, `three`, `@types/three`, and
npm install react @types/react three @types/three @react-three/fiber
```
-Alternatively you can use your package manager of choice such as `pnpm` or
-`yarn`.
+Alternatively you can use your package manager of choice such as `pnpm`, `yarn`,
+or `bun`.
## Configure TypeScript
@@ -46,7 +46,8 @@ Open or create a `tsconfig.json` and add the following:
## Configure Triplex
-Create a `.triplex/config.json` file and add the following:
+Create a [`.triplex/config.json`](/docs/api-reference/config) file and add the
+following:
```json
{
diff --git a/examples/js/.triplex/config.json b/examples/js/.triplex/config.json
new file mode 100644
index 00000000..f2f66a56
--- /dev/null
+++ b/examples/js/.triplex/config.json
@@ -0,0 +1,6 @@
+{
+ "$schema": "https://triplex.dev/config.schema.json",
+ "components": ["../src/geometry/**/*.jsx"],
+ "files": ["../src/**/*.jsx"],
+ "provider": "./provider.jsx"
+}
diff --git a/examples/js/.triplex/provider.jsx b/examples/js/.triplex/provider.jsx
new file mode 100644
index 00000000..d5b76d94
--- /dev/null
+++ b/examples/js/.triplex/provider.jsx
@@ -0,0 +1,8 @@
+export default function Provider({ children, color = "" }) {
+ return (
+ <>
+ {color && }
+ {children}
+ >
+ );
+}
diff --git a/examples/js/package.json b/examples/js/package.json
new file mode 100644
index 00000000..d4b1ca25
--- /dev/null
+++ b/examples/js/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "@example/js",
+ "version": "0.0.0",
+ "private": true,
+ "scripts": {
+ "build": "echo \"Not implemented\"",
+ "typedef": "echo \"Not implemented\""
+ },
+ "dependencies": {
+ "@react-three/drei": "^9.56.27",
+ "@react-three/fiber": "^8.14.5",
+ "@types/react": "^18.0.0",
+ "@types/three": "^0.157.0",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0",
+ "three": "^0.157.0"
+ }
+}
diff --git a/examples/js/src/geometry/box.jsx b/examples/js/src/geometry/box.jsx
new file mode 100644
index 00000000..7ccf198f
--- /dev/null
+++ b/examples/js/src/geometry/box.jsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Michael Dougall. All rights reserved.
+ *
+ * This source code is licensed under the GPL-3.0 license found in the LICENSE
+ * file in the root directory of this source tree.
+ */
+function Box({ color, position, rotation, scale, size = 1 }) {
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default Box;
diff --git a/examples/js/src/geometry/cylinder.jsx b/examples/js/src/geometry/cylinder.jsx
new file mode 100644
index 00000000..30d6981a
--- /dev/null
+++ b/examples/js/src/geometry/cylinder.jsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Michael Dougall. All rights reserved.
+ *
+ * This source code is licensed under the GPL-3.0 license found in the LICENSE
+ * file in the root directory of this source tree.
+ */
+import React from "react";
+
+const Cylinder = ({ position = [0, 0, 0] }) => {
+ return (
+
+
+
+
+ );
+};
+
+export default Cylinder;
diff --git a/examples/js/src/geometry/sphere.jsx b/examples/js/src/geometry/sphere.jsx
new file mode 100644
index 00000000..12a6f315
--- /dev/null
+++ b/examples/js/src/geometry/sphere.jsx
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Michael Dougall. All rights reserved.
+ *
+ * This source code is licensed under the GPL-3.0 license found in the LICENSE
+ * file in the root directory of this source tree.
+ */
+export default function Sphere({ position, rotation, scale }) {
+ return (
+
+
+
+
+ );
+}
diff --git a/examples/js/src/scene.jsx b/examples/js/src/scene.jsx
new file mode 100644
index 00000000..44103b86
--- /dev/null
+++ b/examples/js/src/scene.jsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Michael Dougall. All rights reserved.
+ *
+ * This source code is licensed under the GPL-3.0 license found in the LICENSE
+ * file in the root directory of this source tree.
+ */
+import Box from "./geometry/box";
+import Cylinder from "./geometry/cylinder";
+import Sphere from "./geometry/sphere";
+
+export default function Scene() {
+ return (
+ <>
+
+
+
+
+
+ >
+ );
+}
diff --git a/examples/js/tsconfig.json b/examples/js/tsconfig.json
new file mode 100644
index 00000000..8462d846
--- /dev/null
+++ b/examples/js/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "compilerOptions": {
+ "allowJs": true,
+ "baseUrl": ".",
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "incremental": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "lib": ["dom", "dom.iterable", "es2022"],
+ "module": "esnext",
+ "moduleResolution": "node",
+ "noEmit": true,
+ "resolveJsonModule": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "types": ["@react-three/fiber"]
+ },
+ "exclude": ["node_modules"],
+ "include": ["."]
+}
diff --git a/packages/create-triplex-project/templates/tsconfig.json b/packages/create-triplex-project/templates/tsconfig.json
index af3177b7..ec2bbb48 100644
--- a/packages/create-triplex-project/templates/tsconfig.json
+++ b/packages/create-triplex-project/templates/tsconfig.json
@@ -1,5 +1,6 @@
{
"compilerOptions": {
+ "allowJs": true,
"baseUrl": ".",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,