A Full Live-Scripted CAD Kernel and IDE in the Browser.

Use code to create 3D Models with features ranging from simple primitives + CSG to complex revolves, sweeps, and fillets. Cascade Studio exposes the full power of the OpenCascade kernel (OCCT 8.0), while providing a concise standard library for simple operations.

Write in JavaScript or OpenSCAD, visualize in real-time, and export to .step, .stl, or .obj. Copy the URL to share your model with anyone.

Features

• Powerful Standard Library for primitives, booleans, sweeps, lofts, fillets, and more
• Sketch API with plane parameter (new Sketch([x,y], 'XZ')) for drawing in XY, XZ, or YZ planes
• Selector API for querying edges and faces: Edges(shape).parallel([0,0,1]).max([0,0,1]).indices()
• Measurement Functions: Volume(), SurfaceArea(), CenterOfMass()
• Dual Editor Modes: JavaScript and OpenSCAD
• IntelliSense autocomplete with full TypeScript definitions and JSDoc
• Modeling History Timeline to scrub through build steps in the 3D viewport
• Agent API (window.CascadeAPI) for programmatic control via Playwright or developer tooling
• Reusable CAD Engine — cascade-core npm package for embedding CAD modeling in any web app
• Access to the full OpenCASCADE kernel via the oc. namespace
• Automatic caching acceleration of standard library operations
• .STEP/.IGES/.STL import and .STEP/.STL/.OBJ export
• URL serialization of code for easy sharing
• Save/Load projects to preserve code, layout, and imported files
• Integrated GUI system (sliders, checkboxes, buttons) via Tweakpane
• Responsive layout with mobile support
• Installable for offline use as a Progressive Web App
• Free and open source under the MIT License

Examples

Getting Started

Quick Start

npm install
npm run build
npx http-server ./packages/cascade-studio/dist -p 8080 -c-1
# Open http://localhost:8080

Standard Library

Cascade Studio provides a concise standard library for common CAD operations:

// Primitives
Box(x, y, z, centered?)
Sphere(radius)
Cylinder(radius, height, centered?)
Cone(r1, r2, height)
Circle(radius, wire?)          // wire=true for Loft/Pipe, false for Extrude
Polygon(points, wire?)
Text3D(text, size, height, font?)

// Sketch API — draw in any plane
let face = new Sketch([0, 0])           // default XY plane
  .LineTo([20, 0]).Fillet(3)
  .LineTo([20, 10]).Fillet(3)
  .LineTo([0, 10])
  .End(true).Face();

let profile = new Sketch([0, 0], "XZ")  // XZ plane for Revolve profiles
  .LineTo([15, 0]).LineTo([10, 8]).LineTo([0, 8])
  .End(true).Face();
Revolve(profile, 360);

// Transforms — all return NEW shapes
Translate([x, y, z], shape)
Rotate([ax, ay, az], degrees, shape)
Scale(factor, shape)
Mirror([vx, vy, vz], shape)

// Booleans
Union(shapes)
Difference(mainBody, [tools])
Intersection(shapes)

// Operations
Extrude(face, [dx, dy, dz], keepFace?)
Revolve(shape, degrees, [ax, ay, az]?)
Loft([wires])
Pipe(shape, wirePath)
Offset(shape, distance)
FilletEdges(shape, radius, edgeIndices)
ChamferEdges(shape, distance, edgeIndices)

// Selectors
Edges(shape).ofType("Line"|"Circle").parallel([axis]).max([axis]).min([axis]).indices()
Faces(shape).ofType("Plane"|"Cylinder").max([axis]).indices()

// Measurement
Volume(shape)
SurfaceArea(shape)
CenterOfMass(shape)

OpenSCAD Mode

Switch to OpenSCAD mode via the dropdown in the top navigation bar. Cascade Studio transpiles OpenSCAD to its JavaScript standard library:

difference() {
    cube([20, 20, 20], center=true);
    sphere(r=12);
}

Using cascade-core in Your Own Project

The CAD engine is available as a standalone package with no GUI dependencies:

import { CascadeEngine } from 'cascade-core';

const engine = new CascadeEngine({ workerUrl: './cascade-worker.js' });
await engine.init();

const result = await engine.evaluate(`
  let box = Box(20, 20, 20);
  FilletEdges(box, 3, Edges(box).max([0,0,1]).indices());
`, { guiState: { 'Cache?': true } });

// result.meshData = { faces: [...], edges: [...] }
// Render with Three.js, Babylon.js, or any WebGL framework

Agent API

Cascade Studio exposes window.CascadeAPI for programmatic control via Playwright or other browser automation tools.

// Navigate and wait for WASM to load
await page.goto('http://localhost:8080');
await page.waitForFunction(() => window.CascadeAPI?.isReady());

// Learn the API
const guide = await page.evaluate(() => CascadeAPI.getQuickStart());

// Run CAD code and check results
const result = await page.evaluate(code => CascadeAPI.runCode(code), `
  let profile = new Sketch([0, 0], "XZ")
    .LineTo([15, 0]).LineTo([10, 8]).LineTo([0, 8])
    .End(true).Face();
  Revolve(profile, 360);
`);
// result = { success: true, errors: [], logs: [...], historySteps: [...] }

// Set camera angle and take a screenshot
await page.evaluate(() => {
  CascadeAPI.setCameraAngle(30, 20);    // azimuth, elevation
  CascadeAPI.saveScreenshot('model.png');
});

Architecture

This is an npm workspaces monorepo with two packages:

• cascade-core — Reusable CAD engine (no GUI dependencies)
• cascade-studio — Browser IDE (Three.js viewport, Monaco editor, Tweakpane GUI)

packages/
  cascade-core/
    src/
      engine/
        CascadeEngine.js       ← Main-thread API wrapping Worker + MessageBus
        MessageBus.js          ← Typed worker message routing
      worker/
        CascadeWorker.js       ← Web Worker entry; evaluates user code
        StandardLibrary.js     ← CAD primitives (Box, Sphere, Sketch, etc.)
        ShapeToMesh.js         ← OpenCascade shape → mesh triangulation
        FileUtils.js           ← STEP/IGES/STL import/export
      openscad/
        OpenSCADTranspiler.js  ← OpenSCAD → JS transpiler
      index.js                 ← Package entry point

  cascade-studio/
    src/
      main.js                  ← ESM entry point
      CascadeMain.js           ← App shell, Dockview layout
      CascadeAPI.js            ← window.CascadeAPI for agent/programmatic use
      CascadeView.js           ← 3D viewport (Three.js), modeling timeline
      EditorManager.js         ← Monaco editor, code evaluation
      ConsoleManager.js        ← Console panel, log/error capture
      GUIManager.js            ← Tweakpane GUI panel (sliders, checkboxes)
    css/, textures/, icon/, lib/  ← Static assets

test/                            ← Playwright tests (monorepo root)

The build system uses esbuild. npm run build builds cascade-core first (worker bundle + WASM + fonts), then cascade-studio (main app bundle + static assets), outputting to packages/cascade-studio/dist/.

Testing

Cascade Studio includes a Playwright test suite covering primitives, transforms, booleans, operations, selectors, OpenSCAD, exports, and regression scenarios.

npm run build
npx playwright test    # 12 tests, ~40s

WebGL rendering in headless mode requires --use-gl=angle --use-angle=swiftshader (configured in playwright.config.js).

Community

Model code is saved to the URL upon every successful evaluation, so you can copy and paste that link to others to view your model. Share your creations in Github Discussions.

Contributing

npm install
npm run build
npx http-server ./packages/cascade-studio/dist -p 8080 -c-1

Edit source files in packages/, rebuild, and refresh. Use a new port if changing JS code, as browsers cache ESM aggressively.

Pull Requests to this repo are automatically hosted to Vercel instances, so other users will be able to test and benefit from your modifications as soon as the PR is submitted.

Credits

Cascade Studio uses:

• opencascade.js (CAD Kernel — OCCT 8.0.0 RC4 via Embind)
• Three.js r170 (3D Rendering)
• Monaco Editor (Code Editor with IntelliSense)
• Dockview (Panel Layout System)
• Tweakpane v4 (GUI Controls)
• opentype.js (Font Parsing for Text3D)
• fflate (URL Code Compression)
• potpack (Texture Atlas Packing)
• esbuild (Bundler)
• Playwright (Testing)

Cascade Studio is maintained by Johnathon Selstad @zalo