# Text-to-CAD Viewer Technology Stack: React, Three.js, and Vite Implementation

> Explore the text-to-CAD viewer technology stack: React, Three.js, and Vite. Learn how these tools create a powerful 3D rendering experience from text input. Get the details now.

- Repository: [earthtojake/text-to-cad](https://github.com/earthtojake/text-to-cad)
- Tags: technology-stack-overview
- Published: 2026-07-31

---

**The text-to-cad viewer is built on Node.js 18+ with native ES modules, utilizing React 18.3 for the UI layer, Three.js 0.160 for WebGL-based 3D rendering, and Vite 7 for development and production builds, complemented by custom CAD libraries (`cadjs` and `implicitjs`) and Tailwind CSS 4.2 for styling.**

The text-to-cad viewer in the `earthtojake/text-to-cad` repository is a modern client-side web application designed to render CAD geometry generated from text prompts. As a standalone package within the monorepo located at `viewer/`, this application combines contemporary JavaScript tooling with specialized CAD libraries to deliver high-performance browser-based 3D visualization.

## Runtime Environment and Build Tooling

### Node.js 18+ with Native ES Modules

The viewer operates on **Node.js 18+** and explicitly uses native **ES modules** (ESM). The [`viewer/package.json`](https://github.com/earthtojake/text-to-cad/blob/main/viewer/package.json) declares `"type": "module"`, forcing all `.js` and `.mjs` files to run as ES modules without transpilation. This enables modern JavaScript features like top-level `await` and tree-shaking optimizations throughout the build pipeline.

### Vite 7 Development and Build Pipeline

**Vite 7** powers both the development server and production bundling. The configuration in `viewer/vite.config.mjs` wires together React, Tailwind CSS, and the local monorepo packages. Vite provides hot module replacement (HMR) during development and optimizes the production bundle into static assets deployable to any CDN or edge network.

## Frontend Architecture

### React 18.3 Component Framework

The UI layer relies on **React 18.3** and **React-DOM 18.3**, providing the component-based architecture for managing viewer state, camera controls, and user interactions. React's concurrent features support the rendering-heavy 3D viewport without blocking the main thread.

### Tailwind CSS 4.2 and Accessible UI Primitives

Styling utilizes **Tailwind CSS 4.2** combined with **tw-animate-css 1.4** for utility-first styling and motion. **Radix UI 1.4** supplies accessible primitives for dialogs, dropdowns, and menus, while **lucide-react 1.8** provides the SVG icon set. Conditional class handling is managed through **class-variance-authority 0.7** and **clsx 2.1**.

## 3D Rendering Pipeline

### Three.js 0.160 WebGL Abstraction

The rendering core depends on **Three.js 0.160**, which abstracts WebGL operations for displaying CAD geometry. This library handles scene graphs, camera management, lighting, and mesh rendering within the HTML canvas element. The viewer imports specific Three.js modules to minimize bundle size while maintaining full 3D manipulation capabilities.

## Domain-Specific CAD Libraries

### The cadjs Package

The **`cadjs`** package, located at `packages/cadjs/`, contains framework-agnostic CAD viewer logic. Key modules include:

- **[`packages/cadjs/src/lib/viewer/modelRuntime.js`](https://github.com/earthtojake/text-to-cad/blob/main/packages/cadjs/src/lib/viewer/modelRuntime.js)** – Houses the `ModelRuntime` class for loading and displaying CAD models within the Three.js scene.
- **[`packages/cadjs/src/lib/viewer/sceneScale.js`](https://github.com/earthtojake/text-to-cad/blob/main/packages/cadjs/src/lib/viewer/sceneScale.js)** – Implements automatic scene scaling and camera framing algorithms to properly fit generated geometry within the viewport.

These utilities are imported as local file dependencies, allowing the viewer to consume them via standard ESM imports:

```javascript
import { ModelRuntime } from 'cadjs/lib/viewer/modelRuntime.js';

```

### The implicitjs Package

The **`implicitjs`** package at `packages/implicitjs/` provides implicit-CAD specific functionality:

- **[`packages/implicitjs/src/lib/viewer/surfaceMaterials.js`](https://github.com/earthtojake/text-to-cad/blob/main/packages/implicitjs/src/lib/viewer/surfaceMaterials.js)** – Defines `SurfaceMaterials` for rendering implicit geometry with proper lighting and material properties.
- Additional exporters and stage themes for converting mathematical representations into visible 3D surfaces.

## Backend Integration and Asset Storage

### Custom Express-like Server

While primarily a client-side application, the viewer includes a custom **Express-like server** defined in `viewer/src/server/server.mjs`. This Node server serves static files, hosts the viewer application, and provides API endpoints for catalog data and asset retrieval. It supports multiple storage backends including local filesystem and cloud storage.

### Vercel Blob Storage Integration

The viewer integrates **@vercel/blob 2.4** for storing generated CAD assets. When models are created via the text-to-CAD pipeline, the resulting files are persisted to Vercel's blob storage and served through the viewer's API endpoints, enabling serverless deployment of the visualization layer.

## Development Workflow

To run the viewer locally, navigate to the viewer directory and install dependencies:

```bash
cd viewer
npm install

```

Start the development server with hot reload:

```bash
npm run dev

```

This launches the Vite dev server at `http://localhost:5173`.

Build for production:

```bash
npm run build

```

This generates a static bundle in the `dist/` directory optimized for deployment.

Run the standalone server:

```bash
npm run serve

```

This executes the Node server at `viewer/src/server/server.mjs`, serving both the static viewer and API endpoints.

## Summary

- The text-to-cad viewer uses **Node.js 18+ with ES modules** as its runtime foundation, configured via `type: "module"` in [`viewer/package.json`](https://github.com/earthtojake/text-to-cad/blob/main/viewer/package.json).
- **Vite 7** handles development and production bundling, configured in `viewer/vite.config.mjs`.
- **React 18.3** manages the UI state while **Three.js 0.160** renders 3D geometry in the browser.
- **Tailwind CSS 4.2** and **Radix UI 1.4** provide the styling and accessible component primitives.
- Custom packages **`cadjs`** and **`implicitjs`** supply CAD-specific logic for model runtime, scene scaling, and surface materials.
- **@vercel/blob 2.4** integrates cloud storage for generated assets, served via a custom Express-like server in `viewer/src/server/server.mjs`.

## Frequently Asked Questions

### Why does the text-to-cad viewer use ES modules instead of CommonJS?

The viewer uses native ES modules to leverage modern JavaScript features like static imports and tree-shaking, which reduce bundle sizes and improve loading performance. The `"type": "module"` declaration in [`viewer/package.json`](https://github.com/earthtojake/text-to-cad/blob/main/viewer/package.json) ensures compatibility with Vite's ESM-first architecture and allows direct importing of Three.js submodules without transpilation overhead.

### How does the viewer handle CAD model rendering performance?

Rendering performance is optimized through **Three.js 0.160**'s efficient WebGL abstraction and the modular architecture of the `cadjs` package. The `ModelRuntime` class in [`packages/cadjs/src/lib/viewer/modelRuntime.js`](https://github.com/earthtojake/text-to-cad/blob/main/packages/cadjs/src/lib/viewer/modelRuntime.js) manages geometry instantiation and disposal, while [`sceneScale.js`](https://github.com/earthtojake/text-to-cad/blob/main/sceneScale.js) automatically adjusts camera frustums to minimize overdraw and maintain consistent frame rates when displaying complex implicit surfaces.

### What role do the cadjs and implicitjs packages play?

These local packages separate CAD-specific logic from the React UI layer. **`cadjs`** provides core viewer utilities like scene management and picking algorithms, while **`implicitjs`** handles implicit geometry representations, surface materials, and export formats. This separation allows the viewer to import only necessary functionality, such as `import { SurfaceMaterials } from 'implicitjs/lib/viewer/surfaceMaterials.js'`, keeping the bundle size minimal.

### Can the viewer be deployed independently of the text generation backend?

Yes. The viewer builds to a static bundle via `npm run build` that can be served by any static host or CDN. The custom server in `viewer/src/server/server.mjs` can be configured to point to existing API endpoints or Vercel Blob storage, allowing the frontend to run separately from the machine learning pipeline that generates the CAD models.