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

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 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 – Houses the ModelRuntime class for loading and displaying CAD models within the Three.js scene.
• 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:

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 – 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:

cd viewer
npm install

Start the development server with hot reload:

npm run dev

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

Build for production:

npm run build

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

Run the standalone server:

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.
• 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 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 manages geometry instantiation and disposal, while 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}