Vibeleaderboard
← Back to Tools
Index / tool

JSCAD Fiber

https://github.com/tscircuit/jscad-fiber
Visit tscircuit.github.io
Category
Developer Tools
Rank
No. 1659Tools index

Previous survey · No. 1664 ·

Pricing
Open Source
Type
TOOL
Builder
tscircuit
GitHub
51 stars
Date

About

Create 3D CAD models with React using JSCAD as the renderer.

What it does

JSCAD Fiber turns a declarative component tree into constructive solid geometry. It supports primitive shapes, boolean operations, transforms, colors, hulls, projections, and several extrusions, then converts resulting geometry for display in a Three scene.

Why it's ranked here

The project offers a useful bridge between component composition and precise solid modeling. Its breadth extends beyond the short guide, including rounded and elliptical primitives, helical extrusion, projection, and custom geometry. However, some documented options are currently ignored by the implementation.

What's good

The component model makes nested geometry readable: children naturally express operands, transformations, and extrusion inputs. Typed intrinsic elements cover a broad modeling surface. Separate core and Three exports let consumers choose the rendering integration they need. The included example wrapper pairs rendered objects with highlighted source.

Tradeoffs

The synchronous rendering path directly invokes function components, so components using hooks may fail or yield no geometry. Linear extrusion ignores documented twist settings, while rotational extrusion ignores its documented segment setting. The package pins React and React DOM peers to exact versions, which may constrain integration.

How to use it well

Use it when React developers need reusable, code-defined solids or an interactive Three-based presentation layer, especially for electronics geometry like the cited library. Keep models declarative and verify advanced extrusion options against behavior. It does not provide a command-line interface or standalone visual CAD editor.

Technical notes+

package.json defines an ESM package that ships only dist, with root and ./three export surfaces plus generated declarations and source maps from tsup. lib/index.tsx builds a custom React reconciler and also implements renderElementSync, which directly calls function components and suppresses invalid-hook console errors. lib/create-host-config.ts maps intrinsic JSX tags to JSCAD primitives and operations; its extrudeLinear branch comments out twistAngle and twistSteps, while extrudeRotate passes only angle. lib/intrinsic-jsx.d.ts augments React JSX with the supported modeling elements. lib/useJSCADRenderer.ts converts reconciled CSG objects into a Three scene, and lib/convert-csg-to-three-geom.ts triangulates polygon faces, handles 2D sides, applies transforms, assigns vertex colors, and computes normals for 3D geometry.

Observed

Primary language
TypeScript and TSX
Interface
ES module library with React components, hooks, and a custom renderer
Install surface
Published through npm as jscad-fiber; the README also installs JSCAD modeling, Three, and React Three Fiber
Package exports
Root library export and a separate ./three export, both with TypeScript declarations
Packaging
Only the compiled dist directory is included in the published package
Rendering integration
Converts JSCAD geometry into Three BufferGeometry and scene objects
Peer surface
React, React DOM, React reconciler, JSCAD modeling, and Three; JSCAD modeling and Three are marked optional peers

Read from README.md, package.json, src/main.tsx, lib/index.tsx, lib/three.tsx, lib/intrinsic-jsx.d.ts, lib/jscad-primitives.ts, lib/useJSCADRenderer.ts, lib/create-host-config.ts, lib/convert-csg-to-three-geom.ts, lib/jscad-fns/index.ts, lib/jscad-fns/cube.tsx, lib/jscad-fns/hull.tsx, lib/hooks/use-three.tsx.

What it can do

  • Create 3D CAD models using React components

    React code with JSCAD geometry definitions → 3D CAD model

  • Render 3D geometry in real-time

    JSCAD geometric functions and parameters → Visual 3D model display

  • Generate parametric 3D designs

    JavaScript code with configurable parameters → Adjustable 3D CAD model

  • Export 3D models for manufacturing

    JSCAD-generated 3D model → STL or other 3D file formats

  • Build interactive 3D modeling interfaces

    React components with user controls → Interactive 3D design application

Tags

3dcadreactjscad

Tech Stack

Node.jsTypeScriptVite

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.