Skip to main content

Introduction

Buerli is a powerful client-side development environment for building browser-based CAD applications. It is built on top of the ClassCAD engine and provides a set of tools and components to integrate easily with modern web environments.

Get ClassCAD​

In order for Buerli to work, you need to have a running ClassCAD instance. You can either run it in the browser using WASM or connect to a lokal or remote ClassCAD server using SocketIO.

For both methods, you need to have a valid app key. The app key is used to authenticate your application and is required for both WASM and SocketIO connections.

  • 1 — Visit ClassCAD and create an account.
  • 2 — Get your app key from the same user page, you must choose between a native key or a WASM key.
  • 3 — Go to the downloads for instructions on how to download and run ClassCAD. This only applies if you want to run it locally or remotely.

Get Buerli​

First, install the necessary packages. We need Buerli, usually Threejs, and optionally React and React-three-fiber (and their types if you use Typescript).

# Buerli packages
npm install @buerli.io/classcad @buerli.io/react

# Client packages
npm install three @react-three/fiber

Usage​

Now that we have an account, an app-key, and the necessary packages installed, we can start using Buerli in our application. We connect to a running ClassCAD instance using the init function from the @buerli.io/classcad package.

  • If we want ClassCAD to run in the browser using WebAssembly, we use the WASMClient.
  • If we want ClassCAD to run on a server and communicate with our application via Socket.IO, we use the SocketIOClient.
import { init, WASMClient, SocketIOClient } from '@buerli.io/classcad'

// The app-key you downloaded (see above)
const appKey = '...'
init(drawingID => new WASMClient(drawingID, { appKey }))

// Or for SocketIO
// We do not need an app key for SocketIO, because the installed ClassCAD is authentificated
// init(drawingID => new SocketIOClient('ws://localhost:9091', drawingID))

Refer to the Buerli API documentation for more information on how to use the API and the available methods.