## 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](https://github.com/Open-Cascade-SAS/OCCT) 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
```bash
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:
```
…
```
### OpenSCAD Mode
Switch to OpenSCAD mode via the dropdown in the top navigation bar. Cascade Studio transpiles OpenSCAD to its JavaScript standard library:
```openscad
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:
```javascript
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](https://playwright.dev/) or other browser automation tools.
```
…
```
## 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)
```
…
```
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.
```bash
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](https://github.com/zalo/CascadeStudio/discussions)
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](https://github.com/zalo/CascadeStudio/discussions).
## Contributing
```bash
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](https://github.com/donalffons/opencascade.js) (CAD Kernel — OCCT 8.0.0 RC4 via Embind)
- [Three.js](https://github.com/mrdoob/three.js/) r170 (3D Rendering)
- [Monaco Editor](https://github.com/microsoft/monaco-editor) (Code Editor with IntelliSense)
- [Dockview](https://github.com/mathuo/dockview) (Panel Layout System)
- [Tweakpane](https://github.com/cocopon/tweakpane) v4 (GUI Controls)
- [opentype.js](https://github.com/opentypejs/opentype.js) (Font Parsing for Text3D)
- [fflate](https://github.com/101arrowz/fflate) (URL Code Compression)
- [potpack](https://github.com/mapbox/potpack) (Texture Atlas Packing)
- [esbuild](https://github.com/evanw/esbuild) (Bundler)
- [Playwright](https://playwright.dev/) (Testing)
Cascade Studio is maintained by