Introduction

buerli is the JavaScript SDK for ClassCAD, the CAD engine. Your app connects to the engine with buerli, builds parts and assemblies with the ClassCAD API, and shows them with three.js or React.

Packages

Package	What it is for
@buerli.io/classcad	Connects to the engine and runs the ClassCAD API. Every app starts here.
@buerli.io/react	React hooks and components: a drawing per name, its geometry in a react-three-fiber scene.
@buerli.io/core	The state the other packages share: drawings, their structure tree, geometry and selection.
@buerli.io/react-cad	The CAD user interface that Buerligons is built from: feature dialogs, model tree, sketcher.
@buerli.io/buerligons	Buerligons, the whole CAD app, as one React component (beta).

Connect to the engine

buerli reaches the engine through a client. You choose one with init, once, when your app starts.

Client	Where the engine runs	Needs
WASMClient	In the browser, as WebAssembly, in a Web Worker	A public access token (ccpk_…)
WSClient	On your server: the native engine's own WebSocket server (classcad-cli worker)	The native engine (Business plan)
SocketIOClient	On your server, behind the ClassCAD server (classcad-socketio)	The native engine (Business plan), Node.js 20

import { init, WASMClient, WSClient, SocketIOClient } from '@buerli.io/classcad'

// The engine in the browser, with a public access token from your ClassCAD account
init((drawingId) => new WASMClient(drawingId, { token: 'ccpk_…' }))

// Or a native engine: its WebSocket server …
// init((drawingId) => new WSClient('ws://localhost:9094', drawingId))

// … or the ClassCAD server
// init((drawingId) => new SocketIOClient('ws://localhost:9091', drawingId))

Everything after init is the same for every client.

Install

npm install @buerli.io/classcad three

For React, add @buerli.io/react and react-three-fiber:

npm install @buerli.io/react @react-three/fiber @react-three/drei

Build a part

BuerliCadFacade opens a drawing on the engine. Its api is the ClassCAD API: every call returns its result and throws when the engine reports an error.

import { init, WASMClient, BuerliCadFacade } from '@buerli.io/classcad'

init((drawingId) => new WASMClient(drawingId, { token: 'ccpk_…' }))

const facade = new BuerliCadFacade()
await facade.connect()

const part = await facade.api.v1.part.create({ name: 'Flange' })
await facade.api.v1.part.cylinder({ id: part, diameter: 100, height: 20 })

// The part as three.js geometry
const geometries = await facade.createBufferGeometry(part)

Next

• Quickstart with WebAssembly: a React app with the engine in the browser.
• Quickstart with a native engine: the same app against your own server.
• @buerli.io/classcad and @buerli.io/react: the reference.
• The ClassCAD API on classcad.ch: every modeling call.