A small authoring layer on top of OpenSCAD. Transpile JSX to SCAD and use it to extend your existing workflows.
- Describe models as a tree of components instead of imperative SCAD; avoids nested modules and parameter threading.
- Same React/JSX mental model (components, props, composition), output is 3D.
- Writes plain
.scadfiles for OpenSCAD or any slicer.
Rocket example with animated translation.
SCAD is good for parametric 3D but scripts are imperative and nesting gets heavy; composing modules and passing parameters is tedious.
A lot of people already think in components and JSX from building UIs. react-scad transpiles JSX to SCAD so you can use that same mental model for parametric 3D.
- Node.js 18+
npx @react-scad/cli@latest new my-project
cd my-project
npm startThat’s it — open the generated model.scad in OpenSCAD or your slicer.
npm install react @react-scad/corepnpm or yarn
pnpm add react @react-scad/core
# or
yarn add react @react-scad/coreCreate a file main.tsx (or main.jsx):
import { createRoot, Cube, Sphere, Union } from "@react-scad/core";
// Output path: the .scad file that will be created
const root = createRoot("model.scad");
root.render(
<Union>
<Cube size={[10, 10, 10]} center />
<Sphere r={6} />
</Union>
);npx tsx main.tsxWatch mode (re-run on save):
npx tsx watch main.tsx- Open the generated
.scadfile in OpenSCAD to preview, export STL, or tweak. - Or import the
.scad(or an exported STL) into your slicer for 3D printing.
Advanced
To write to a custom path or get the SCAD string in memory instead of using createRoot(path), use createContainer(), render(), and toScad():
import { createContainer, render, toScad, Cube, Sphere, Union } from "@react-scad/core";
import { writeFileSync } from "fs";
const container = createContainer();
render(
<Union>
<Cube size={[10, 10, 10]} center />
<Sphere r={6} />
</Union>,
container
);
const scadCode = toScad(container);
writeFileSync("out/model.scad", scadCode);
// or use scadCode however you likeThen run with npx tsx main.tsx or bundle with esbuild and run with Node.
You can reuse existing .scad libraries and snippets in two ways:
-
Import— Emit OpenSCAD’simport("path")so the generated file pulls in another SCAD file (e.g. STL/DXF or a file that defines modules). Use this when the library is a separate file and you just need to reference it.import { Import, Union } from "@react-scad/core"; <Union> <Import file="lib/gears.scad" /> </Union>
-
Raw— Emit arbitrary SCAD code inline. Use this to paste a snippet, call a module from an imported library, or wrap a block of SCAD you don’t have a dedicated component for. Children are ignored; only thecodeprop is emitted (with indentation applied).import { Raw, Union } from "@react-scad/core"; // After Import "lib/gears.scad", call a module from it: <Raw code="gear(number_of_teeth=32, circular_pitch=200);" /> // Or inject a small SCAD block: <Raw code={`include <BOSL2/std.scad>\nrounded_cube(20, 0.5);`} />
Typical pattern: Import the library file once (at top level or where needed), then use Raw to call its modules or paste any SCAD that fits your tree.
All listed SCAD primitives and operations are implemented. Prop names follow SCAD where it makes sense (r, h, size, center, $fn, etc.).
| SCAD | react-scad | Implemented |
|---|---|---|
| 3D primitives | ||
cube() |
Cube |
✓ |
sphere() |
Sphere |
✓ |
cylinder() |
Cylinder |
✓ |
polyhedron() |
Polyhedron |
✓ |
| 2D primitives | ||
square() |
Square |
✓ |
circle() |
Circle |
✓ |
polygon() |
Polygon |
✓ |
| CSG | ||
union() |
Union |
✓ |
difference() |
Difference |
✓ |
intersection() |
Intersection |
✓ |
| Transforms | ||
translate() |
Translate |
✓ |
rotate() |
Rotate |
✓ |
scale() |
Scale |
✓ |
| 2D → 3D | ||
linear_extrude() |
LinearExtrude |
✓ |
rotate_extrude() |
RotateExtrude |
✓ |
| Text | ||
text() |
Text |
✓ |
| Other | ||
{ } (group) |
Group |
✓ |
| inline code | Raw |
✓ |
surface() |
Surface |
✓ |
import() |
Import |
✓ |
If you need a SCAD primitive or feature that isn’t listed here, open an issue or a PR.
-
Fork and clone the repo, then install dependencies:
git clone https://github.com/YOUR_USER/react-scad.git cd react-scad pnpm install -
Create a branch for your change:
git checkout -b fix/your-change
-
Build and test before committing:
pnpm run build pnpm run sandbox:dev
-
Format and lint your code:
pnpm run format pnpm run lint
-
Open a PR against
mainwith a short description of the change. For bugs, reference the issue if one exists. -
Publishing is done via GitHub Actions on push to
main; no need to publish from a PR.
- React and the React reconciler for the rendering model that makes this approach possible.
- OpenSCAD for the SCAD language and documentation.
MIT