PageSourceSearch

https://buerli.io/docs/api/classcad/

html buerli.io collected 2026-10-08 02:29:34 UTC 70,592 bytes, 117 lines download raw bytes

1<!doctype html>
2<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-api/classcad" data-has-hydrated="false">
3<head>
4<meta charset="UTF-8">
5<meta name="generator" content="Docusaurus v3.9.2">
6<title data-rh="true">ClassCAD | Buerli.io</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://buerli.io/docs/api/classcad"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="ClassCAD | Buerli.io"><meta data-rh="true" name="description" content="This library connects Buerli with ClassCAD, the CAD engine: in the browser as WebAssembly (WASMClient), or a native engine through the ClassCAD server (SocketIOClient)."><meta data-rh="true" property="og:description" content="This library connects Buerli with ClassCAD, the CAD engine: in the browser as WebAssembly (WASMClient), or a native engine through the ClassCAD server (SocketIOClient)."><link data-rh="true" rel="icon" href="/img/favicon.png"><link data-rh="true" rel="canonical" href="https://buerli.io/docs/api/classcad"><link data-rh="true" rel="alternate" href="https://buerli.io/docs/api/classcad" hreflang="en"><link data-rh="true" rel="alternate" href="https://buerli.io/docs/api/classcad" hreflang="x-default">
6<script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"@buerli.io/classcad","item":"https://buerli.io/docs/api/classcad"}]}</script>
6<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Buerli.io RSS Feed">
7<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Buerli.io Atom Feed">
8
9
10
11
12
13
14
15
16<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
17<meta name="theme-color" content="#16181d" media="(prefers-color-scheme: dark)"><link rel="stylesheet" href="/assets/css/styles.ad690f93.css">
18<script src="/assets/js/runtime~main.74c5ab0f.js" defer="defer"></script>
vendor: 1 bytes, line 18
18
19<script src="/assets/js/main.624801c8.js" defer="defer"></script>
19
20</head>
21<body class="navigation-with-keyboard">
22<svg style="display: none;"><defs>
23<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
24</defs></svg>
25<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script>
25<div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_G6ar" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top awv-bar"><div class="awv-bar__row"><a class="awv-bar__mark" aria-label="buerli.io, home" href="/"><span class="wordmark_MXLQ"><svg class="wordmarkCube_V9iI" width="1em" height="1em" viewBox="0 0 200 200" aria-hidden="true"><defs><mask id="cube-Rapah"><rect width="200" height="200" fill="#fff"></rect><path d="M100 -4V204M100 100L4 44.5M100 100L196 44.5" stroke="#000" stroke-width="10"></path></mask></defs><g mask="url(#cube-Rapah)"><path d="M100 0L13 50L100 100Z" fill="var(--cube-b)"></path><path d="M100 0L187 50L100 100Z" fill="var(--cube-a)"></path><path d="M13 50L100 100V200L13 150Z" fill="var(--cube-a)"></path><path d="M187 50L100 100V200L187 150Z" fill="var(--cube-b)"></path></g></svg><span>buerli<span class="wordmarkAccent_o3Mz">.io</span></span></span></a><div class="awv-bar__places"><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/">Docs</a><a class="navbar__item navbar__link" href="/docs/quickstart/wasm">Quickstart</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/api/classcad">API</a><a class="navbar__item navbar__link" href="/blog">Stories</a></div><div class="awv-bar__tools"><div class="awv-family"><button type="button" class="awv-family__button" aria-expanded="false" aria-haspopup="true"><svg width="14" height="14" viewBox="0 0 200 200" aria-hidden="true"><defs><mask id="cube-Rampah"><rect width="200" height="200" fill="#fff"></rect><path d="M100 -4V204M100 100L4 44.5M100 100L196 44.5" stroke="#000" stroke-width="10"></path></mask></defs><g mask="url(#cube-Rampah)"><path d="M100 0L13 50L100 100Z" fill="var(--cube-b)"></path><path d="M100 0L187 50L100 100Z" fill="var(--cube-a)"></path><path d="M13 50L100 100V200L13 150Z" fill="var(--cube-a)"></path><path d="M187 50L100 100V200L187 150Z" fill="var(--cube-b)"></path></g></svg><span>Family</span></button><div class="awv-family__panel" role="menu"><p class="awv-family__k"><span>The family</span><span>5<!-- --> of us</span></p><ul><li style="--k:0"><a href="https://classcad.ch" role="menuitem"><span class="wordmark_MXLQ"><span>classcad</span></span><span class="awv-family__role">The engine</span><span class="awv-family__line">Headless, programmable CAD.</span></a></li><li style="--k:1"><a href="https://buerli.io" role="menuitem" aria-current="page"><span class="wordmark_MXLQ"><span>buerli<span class="wordmarkAccent_o3Mz">.io</span></span></span><span class="awv-family__role">The SDK</span><span class="awv-family__line">CAD wherever JavaScript reaches.</span></a></li><li style="--k:2"><a href="https://buerligons.io" role="menuitem"><span class="wordmark_MXLQ"><span>buerli<span class="wordmarkAccent_o3Mz">gons</span></span></span><span class="awv-family__role">The app</span><span class="awv-family__line">Parametric CAD in a browser tab.</span></a></li><li style="--k:3"><a href="https://classcad.ai" role="menuitem"><span class="wordmark_MXLQ"><span>classcad<span class="wordmarkAccent_o3Mz">.ai</span></span></span><span class="awv-family__role">The agents</span><span class="awv-family__line">Plain language in, verified geometry out.</span></a></li><li style="--k:4"><a href="https://awv-informatik.ch" role="menuitem"><span class="wordmark_MXLQ"><span>awv</span></span><span class="awv-family__role">The company</span><span class="awv-family__line">Employee-owned, in St. Gallen.</span></a></li></ul><p class="awv-family__social"><a href="https://github.com/awv-informatik">GitHub</a><a href="https://discord.gg/MEbR7xyPMS">Discord</a><a href="https://ch.linkedin.com/company/awv-informatik">LinkedIn</a><a href="https://x.com/buerli_io">X</a></p></div></div><div class="awv-bar__search navbarSearchContainer_bmvg"><div class="navbar__search searchBarContainer_YZIh" dir="ltr"><input placeholder="Search" aria-label="Search" class="navbar__search-input searchInput_eCKk" value=""><div class="loadingRing_pJhT searchBarLoadingRing_NsvA"><div></div><div></div><div></div><div></div></div></div></div><button type="button" class="theme_P5dy awv-theme" aria-label="Dark mode" title="Dark mode"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="6.75"></circle><path d="M10 3.25a6.75 6.75 0 0 1 0 13.5z"></path></svg></button><button type="button" aria-label="Menu" aria-expanded="false" class="navbar__toggle clean-btn awv-menu"><i></i><i></i></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_UyTV"><div class="docsWrapper_XLvK"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_z1FD" type="button"></button><div class="docRoot_HciC"><aside class="theme-doc-sidebar-container docSidebarContainer_e5ai"><div class="sidebarViewport_N8x0"><div class="sidebar_vJCc sidebarWithHideableNavbar_Fo4g"><a tabindex="-1" class="sidebarLogo_nlll" href="/"><b>buerli.io</b></a><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_qiME"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/"><span title="Introduction" class="linkLabel_PuAu">Introduction</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_d9ci menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/quickstart/wasm"><span title="Quickstart" class="categoryLinkLabel_Oe72">Quickstart</span></a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_d9ci menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/docs/api/classcad"><span title="API" class="categoryLinkLabel_Oe72">API</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/api/classcad"><span title="@buerli.io/classcad" class="linkLabel_PuAu">@buerli.io/classcad</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api/react"><span title="@buerli.io/react" class="linkLabel_PuAu">@buerli.io/react</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_d9ci menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/setup-backend/starters"><span title="Examples" class="categoryLinkLabel_Oe72">Examples</span></a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/changelogs/"><span title="Changelogs" class="linkLabel_PuAu">Changelogs</span></a></li></ul></nav></div></div></aside><main class="docMainContainer_namt"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_YAwJ"><div class="docItemContainer_Rv5Z"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_zCmv" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_JFrk"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">API</span></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">@buerli.io/classcad</span></li></ul></nav><div class="tocCollapsible_O_Qc theme-doc-toc-mobile tocMobile_tjDr"><button type="button" class="clean-btn tocCollapsibleButton_htYj">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>ClassCAD</h1></header><div class="language-shell codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#2a2f3a;--prism-background-color:transparent"><div class="codeBlockContent_kX1v"><pre tabindex="0" class="prism-code language-shell codeBlock_TAPP thin-scrollbar" style="color:#2a2f3a;background-color:transparent"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#2a2f3a"><span class="token function" style="color:#0f1320;font-weight:600">npm</span><span class="token plain"> </span><span class="token function" style="color:#0f1320;font-weight:600">install</span><span class="token plain"> @buerli.io/classcad</span><br></span></code></pre></div></div>
26<p>This library connects Buerli with <a href="https://classcad.ch" target="_blank" rel="noopener noreferrer">ClassCAD</a>, the CAD engine: in the browser as WebAssembly (<code>WASMClient</code>), or a native engine through the ClassCAD server (<code>SocketIOClient</code>).</p>
27<blockquote>
28<p><strong>Note:</strong> In order to observe Javascript conventions the <a href="https://classcad.ch/docs/intro" target="_blank" rel="noopener noreferrer">ClassCAD API</a> is unwrapped in Buerli. Where normally each function would return an object with a <code>result</code> property, and a <code>messages</code> property for errors, all ClassCAD API functions in Buerli return the result directly and throw errors as exceptions that can be caught with try/catch.</p>
29</blockquote>
30<h2 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="init">
30init<a href="#init" class="hash-link" aria-label="Direct link to init" title="Direct link to init" translate="no">​</a></h2>
31<p>Initializes Buerli with the given factory and options. This function is typically called once at the start of your application to set up the Buerli environment. It tells Buerli where ClassCAD is running and how to connect to it.</p>
32<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="declaration">Declaration<a href="#declaration" class="hash-link" aria-label="Direct link to Declaration" title="Direct link to Declaration" translate="no">​</a></h4>
33<div class="language-tsx codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#2a2f3a;--prism-background-color:transparent"><div class="codeBlockContent_kX1v"><pre tabindex="0" class="prism-code language-tsx codeBlock_TAPP thin-scrollbar" style="color:#2a2f3a;background-color:transparent"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#2a2f3a"><span class="token punctuation" style="color:#6e7781">(</span><span class="token function-variable function" style="color:#0f1320;font-weight:600">source</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token keyword" style="color:#dd1e1e">function</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"> options</span><span class="token operator" style="color:#6e7781">?</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token constant" style="color:#0550ae">PARTIAL</span><span class="token operator" style="color:#6e7781">&lt;</span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">  theme</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">    primary</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">string</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">    secondary</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">string</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">    dark</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">string</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">    highlightedGeom</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">string</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">    hoveredGeom</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">string</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">  </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">  config</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">    geometry</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain">  </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">        disabled</span><span class="token operator" style="color:#6e7781">?</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">boolean</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">        meshes</span><span class="token operator" style="color:#6e7781">?</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token maybe-class-name" style="color:#0f1320;font-weight:600">ElementConfig</span><span class="token plain"> </span><span class="token operator" style="color:#6e7781">&amp;</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">            wireframe</span><span class="token operator" style="color:#6e7781">?</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">boolean</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">            depthWrite</span><span class="token operator" style="color:#6e7781">?</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">boolean</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">        </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">        edges</span><span class="token operator" style="color:#6e7781">?</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token maybe-class-name" style="color:#0f1320;font-weight:600">ElementConfig</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">        points</span><span class="token operator" style="color:#6e7781">?</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token maybe-class-name" style="color:#0f1320;font-weight:600">ElementConfig</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">    </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">  </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token punctuation" style="color:#6e7781">}</span><span class="token operator" style="color:#6e7781">&gt;</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token keyword" style="color:#dd1e1e">null</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token keyword" style="color:#dd1e1e">type</span><span class="token plain"> </span><span class="token class-name" style="color:#0f1320;font-weight:600">ElementConfig</span><span class="token plain"> </span><span class="token operator" style="color:#6e7781">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">  hidden</span><span class="token operator" style="color:#6e7781">?</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">boolean</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">  color</span><span class="token operator" style="color:#6e7781">?</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">any</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">  opacity</span><span class="token operator" style="color:#6e7781">?</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">number</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">;</span><br></span></code></pre></div></div>
34<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="params">
34Params<a href="#params" class="hash-link" aria-label="Direct link to Params" title="Direct link to Params" translate="no">​</a></h4>
35<table><thead><tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>source</td><td>function</td><td></td><td>Factory function (WASMClient, SocketIOClient)</td></tr><tr><td>options</td><td>object</td><td></td><td>Optional configuration options for Buerli</td></tr></tbody></table>
36<p>Returns null</p>
37<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="example">Example<a href="#example" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no">​</a></h4>
38<div class="language-js codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#2a2f3a;--prism-background-color:transparent"><div class="codeBlockContent_kX1v"><pre tabindex="0" class="prism-code language-js codeBlock_TAPP thin-scrollbar" style="color:#2a2f3a;background-color:transparent"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#2a2f3a"><span class="token keyword module" style="color:#dd1e1e">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#6e7781">{</span><span class="token imports"> init</span><span class="token imports punctuation" style="color:#6e7781">,</span><span class="token imports"> </span><span class="token imports maybe-class-name" style="color:#0f1320;font-weight:600">WASMClient</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#6e7781">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#dd1e1e">from</span><span class="token plain"> </span><span class="token string" style="color:#0a3069">&#x27;@buerli.io/classcad&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token comment" style="color:#8a90a0;font-style:italic">// A public access token from your account on classcad.ch</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token function" style="color:#0f1320;font-weight:600">init</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token parameter" style="color:#2a2f3a">drawingID</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#6e7781">=&gt;</span><span class="token plain"> </span><span class="token keyword" style="color:#dd1e1e">new</span><span class="token plain"> </span><span class="token class-name" style="color:#0f1320;font-weight:600">WASMClient</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token plain">drawingID</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#6639ba">token</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token string" style="color:#0a3069">&#x27;ccpk_…&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token punctuation" style="color:#6e7781">)</span><br></span></code></pre></div></div>
39<h2 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="wasmclient">WASMClient<a href="#wasmclient" class="hash-link" aria-label="Direct link to WASMClient" title="Direct link to WASMClient" translate="no">​</a></h2>
40<p>Initializes ClassCAD WASM, meaning ClassCAD will run in the browser using WebAssembly.</p>
41<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="declaration-1">
41Declaration<a href="#declaration-1" class="hash-link" aria-label="Direct link to Declaration" title="Direct link to Declaration" translate="no">​</a></h4>
42<div class="language-tsx codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#2a2f3a;--prism-background-color:transparent"><div class="codeBlockContent_kX1v"><pre tabindex="0" class="prism-code language-tsx codeBlock_TAPP thin-scrollbar" style="color:#2a2f3a;background-color:transparent"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#2a2f3a"><span class="token punctuation" style="color:#6e7781">(</span><span class="token plain">drawingID</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">number</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"> options</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> object</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> object</span><br></span></code></pre></div></div>
43<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="params-1">Params<a href="#params-1" class="hash-link" aria-label="Direct link to Params" title="Direct link to Params" translate="no">​</a></h4>
44<table><thead><tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>drawingID</td><td>number</td><td></td><td>The drawingID you receive from init()</td></tr><tr><td>options</td><td>object</td><td></td><td>Configuration</td></tr></tbody></table>
45<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="options">Options<a href="#options" class="hash-link" aria-label="Direct link to Options" title="Direct link to Options" translate="no">​</a></h4>
46<table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>token</td><td>string</td><td>A public access token (<code>ccpk_…</code>) from your account on classcad.ch. The engine&#x27;s key is fetched with it and renewed.</td></tr><tr><td>getKey</td><td>function</td><td>Or a function that returns a key, for apps with their own sign-in.</td></tr><tr><td>classcadKey</td><td>string</td><td>Or a key itself.</td></tr><tr><td>url</td><td>string</td><td>Where the engine&#x27;s files are, when you host them yourself (Business). By default ClassCAD&#x27;s CDN.</td></tr></tbody></table>
47<p>Returns object</p>
48<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="example-1">Example<a href="#example-1" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no">​</a></h4>
49<div class="language-js codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#2a2f3a;--prism-background-color:transparent"><div class="codeBlockContent_kX1v"><pre tabindex="0" class="prism-code language-js codeBlock_TAPP thin-scrollbar" style="color:#2a2f3a;background-color:transparent"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#2a2f3a"><span class="token keyword module" style="color:#dd1e1e">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#6e7781">{</span><span class="token imports"> init</span><span class="token imports punctuation" style="color:#6e7781">,</span><span class="token imports"> </span><span class="token imports maybe-class-name" style="color:#0f1320;font-weight:600">WASMClient</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#6e7781">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#dd1e1e">from</span><span class="token plain"> </span><span class="token string" style="color:#0a3069">&#x27;@buerli.io/classcad&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token function" style="color:#0f1320;font-weight:600">init</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token parameter" style="color:#2a2f3a">drawingID</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#6e7781">=&gt;</span><span class="token plain"> </span><span class="token keyword" style="color:#dd1e1e">new</span><span class="token plain"> </span><span class="token class-name" style="color:#0f1320;font-weight:600">WASMClient</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token plain">drawingID</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#6639ba">token</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token string" style="color:#0a3069">&#x27;ccpk_…&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token punctuation" style="color:#6e7781">)</span><br></span></code></pre></div></div>
50<h2 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="socketioclient">
50SocketIOClient<a href="#socketioclient" class="hash-link" aria-label="Direct link to SocketIOClient" title="Direct link to SocketIOClient" translate="no">​</a></h2>
51<p>Initializes the ClassCAD SocketIO, meaning ClassCAD will run on a server and communicate with your application via Socket.IO.</p>
52<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="declaration-2">Declaration<a href="#declaration-2" class="hash-link" aria-label="Direct link to Declaration" title="Direct link to Declaration" translate="no">​</a></h4>
53<div class="language-tsx codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#2a2f3a;--prism-background-color:transparent"><div class="codeBlockContent_kX1v"><pre tabindex="0" class="prism-code language-tsx codeBlock_TAPP thin-scrollbar" style="color:#2a2f3a;background-color:transparent"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#2a2f3a"><span class="token punctuation" style="color:#6e7781">(</span><span class="token plain">url</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">string</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"> drawingID</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token builtin" style="color:#dd1e1e">number</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> object</span><br></span></code></pre></div></div>
54<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="params-2">Params<a href="#params-2" class="hash-link" aria-label="Direct link to Params" title="Direct link to Params" translate="no">​</a></h4>
55<table><thead><tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>url</td><td>string</td><td></td><td>URL</td></tr><tr><td>drawingID</td><td>number</td><td></td><td>The drawingID you receive from init()</td></tr></tbody></table>
56<p>Returns object</p>
57<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="example-2">Example<a href="#example-2" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no">​</a></h4>
58<div class="language-js codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#2a2f3a;--prism-background-color:transparent"><div class="codeBlockContent_kX1v"><pre tabindex="0" class="prism-code language-js codeBlock_TAPP thin-scrollbar" style="color:#2a2f3a;background-color:transparent"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#2a2f3a"><span class="token keyword module" style="color:#dd1e1e">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#6e7781">{</span><span class="token imports"> init</span><span class="token imports punctuation" style="color:#6e7781">,</span><span class="token imports"> </span><span class="token imports maybe-class-name" style="color:#0f1320;font-weight:600">SocketIOClient</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#6e7781">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#dd1e1e">from</span><span class="token plain"> </span><span class="token string" style="color:#0a3069">&#x27;@buerli.io/classcad&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token comment" style="color:#8a90a0;font-style:italic">// Run your ClassCAD via Docker, or natively</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token function" style="color:#0f1320;font-weight:600">init</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token parameter" style="color:#2a2f3a">drawingID</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#6e7781">=&gt;</span><span class="token plain"> </span><span class="token keyword" style="color:#dd1e1e">new</span><span class="token plain"> </span><span class="token class-name" style="color:#0f1320;font-weight:600">SocketIOClient</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token string" style="color:#0a3069">&#x27;https://localhost:9091&#x27;</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"> drawingID</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token punctuation" style="color:#6e7781">)</span><br></span></code></pre></div></div>
59<h2 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="buerlicadfacade">
59BuerliCadFacade<a href="#buerlicadfacade" class="hash-link" aria-label="Direct link to BuerliCadFacade" title="Direct link to BuerliCadFacade" translate="no">​</a></h2>
60<p>This class mediates between ClassCAD and buerli and provides direct Threejs integrations. It allows you to connect to a live drawing and carry out operations on it. You can use this class to create, modify, and query geometries in buerli/ClassCAD.</p>
61<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="example-3">Example<a href="#example-3" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no">​</a></h4>
62<div class="language-js codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#2a2f3a;--prism-background-color:transparent"><div class="codeBlockContent_kX1v"><pre tabindex="0" class="prism-code language-js codeBlock_TAPP thin-scrollbar" style="color:#2a2f3a;background-color:transparent"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#2a2f3a"><span class="token keyword module" style="color:#dd1e1e">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#6e7781">{</span><span class="token imports"> </span><span class="token imports maybe-class-name" style="color:#0f1320;font-weight:600">BuerliCadFacade</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#6e7781">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#dd1e1e">from</span><span class="token plain"> </span><span class="token string" style="color:#0a3069">&#x27;@buerli.io/classcad&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token keyword" style="color:#dd1e1e">const</span><span class="token plain"> facade </span><span class="token operator" style="color:#6e7781">=</span><span class="token plain"> </span><span class="token keyword" style="color:#dd1e1e">new</span><span class="token plain"> </span><span class="token class-name" style="color:#0f1320;font-weight:600">BuerliCadFacade</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token keyword control-flow" style="color:#dd1e1e">await</span><span class="token plain"> facade</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token method function property-access" style="color:#0f1320;font-weight:600">connect</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token keyword" style="color:#dd1e1e">const</span><span class="token plain"> api </span><span class="token operator" style="color:#6e7781">=</span><span class="token plain"> facade</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token property-access">api</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token property-access">v1</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token comment" style="color:#8a90a0;font-style:italic">// Create a part</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token keyword" style="color:#dd1e1e">const</span><span class="token plain"> part </span><span class="token operator" style="color:#6e7781">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#dd1e1e">await</span><span class="token plain"> api</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token property-access">part</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token method function property-access" style="color:#0f1320;font-weight:600">create</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#6639ba">name</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token string" style="color:#0a3069">&#x27;Flange&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token comment" style="color:#8a90a0;font-style:italic">// Create a parametric box in it</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token keyword" style="color:#dd1e1e">const</span><span class="token plain"> box </span><span class="token operator" style="color:#6e7781">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#dd1e1e">await</span><span class="token plain"> api</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token property-access">part</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token method function property-access" style="color:#0f1320;font-weight:600">box</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#6639ba">id</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> part </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">)</span><br></span></code></pre></div></div>
63<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="properties">
63Properties<a href="#properties" class="hash-link" aria-label="Direct link to Properties" title="Direct link to Properties" translate="no">​</a></h4>
64<h3 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="api">.api<a href="#api" class="hash-link" aria-label="Direct link to .api" title="Direct link to .api" translate="no">​</a></h3>
65<p>The API object that provides methods to interact with the <a href="https://classcad.ch/docs/intro" target="_blank" rel="noopener noreferrer">ClassCAD API</a>.</p>
66<blockquote>
67<p><strong>Note:</strong> The ClassCAD API fundamentally is based on server round-trips and must function the same between REST, SocketIO, WASM, and other interfaces and languages. This means that the API is asynchronous. All functions typically return a promise that yields an object with a <code>result</code> property, and a <code>messages</code> property, which contains errors and warnings. The raw javascript ClassCAD API would be something like this:</p>
68</blockquote>
69<div class="language-js codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#2a2f3a;--prism-background-color:transparent"><div class="codeBlockContent_kX1v"><pre tabindex="0" class="prism-code language-js codeBlock_TAPP thin-scrollbar" style="color:#2a2f3a;background-color:transparent"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#2a2f3a"><span class="token keyword" style="color:#dd1e1e">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#6639ba">result</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> part</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"> messages </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token plain"> </span><span class="token operator" style="color:#6e7781">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#dd1e1e">await</span><span class="token plain"> api</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token property-access">part</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token method function property-access" style="color:#0f1320;font-weight:600">create</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#6639ba">name</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token string" style="color:#0a3069">&#x27;Flange&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token keyword control-flow" style="color:#dd1e1e">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">(</span><span class="token plain">messages</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token property-access">length</span><span class="token plain"> </span><span class="token operator" style="color:#6e7781">&gt;</span><span class="token plain"> </span><span class="token number" style="color:#0550ae">0</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#dd1e1e">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#dd1e1e">new</span><span class="token plain"> </span><span class="token class-name" style="color:#0f1320;font-weight:600">Error</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token plain">messages</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token punctuation" style="color:#6e7781">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token keyword" style="color:#dd1e1e">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#6639ba">result</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> box</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"> messages </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token plain"> </span><span class="token operator" style="color:#6e7781">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#dd1e1e">await</span><span class="token plain"> api</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token property-access">part</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token method function property-access" style="color:#0f1320;font-weight:600">box</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#6639ba">id</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> part </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token keyword control-flow" style="color:#dd1e1e">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">(</span><span class="token plain">messages</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token property-access">length</span><span class="token plain"> </span><span class="token operator" style="color:#6e7781">&gt;</span><span class="token plain"> </span><span class="token number" style="color:#0550ae">0</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#dd1e1e">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#dd1e1e">new</span><span class="token plain"> </span><span class="token class-name" style="color:#0f1320;font-weight:600">Error</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token plain">messages</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token punctuation" style="color:#6e7781">}</span><br></span></code></pre></div></div>
70<blockquote>
71<p><strong>Note:</strong> With the <code>.api</code> property of this class the API has been unwrapped for a more conventional usage in Javascript. This means that all API functions yield the result directly and throw errors as exceptions that can be caught with try/catch. Warnings will be logged to the console.</p>
72</blockquote>
73<div class="language-js codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#2a2f3a;--prism-background-color:transparent"><div class="codeBlockContent_kX1v"><pre tabindex="0" class="prism-code language-js codeBlock_TAPP thin-scrollbar" style="color:#2a2f3a;background-color:transparent"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#2a2f3a"><span class="token keyword control-flow" style="color:#dd1e1e">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">  </span><span class="token keyword" style="color:#dd1e1e">const</span><span class="token plain"> part </span><span class="token operator" style="color:#6e7781">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#dd1e1e">await</span><span class="token plain"> api</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token property-access">part</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token method function property-access" style="color:#0f1320;font-weight:600">create</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#6639ba">name</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> </span><span class="token string" style="color:#0a3069">&#x27;Flange&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">  </span><span class="token keyword" style="color:#dd1e1e">const</span><span class="token plain"> box </span><span class="token operator" style="color:#6e7781">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#dd1e1e">await</span><span class="token plain"> api</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token property-access">part</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token method function property-access" style="color:#0f1320;font-weight:600">box</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#6639ba">id</span><span class="token operator" style="color:#6e7781">:</span><span class="token plain"> part </span><span class="token punctuation" style="color:#6e7781">}</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token punctuation" style="color:#6e7781">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#dd1e1e">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">(</span><span class="token plain">error</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#6e7781">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain">  </span><span class="token console class-name" style="color:#0f1320;font-weight:600">console</span><span class="token punctuation" style="color:#6e7781">.</span><span class="token method function property-access" style="color:#0f1320;font-weight:600">error</span><span class="token punctuation" style="color:#6e7781">(</span><span class="token string" style="color:#0a3069">&#x27;An error occured:&#x27;</span><span class="token punctuation" style="color:#6e7781">,</span><span class="token plain"> error</span><span class="token punctuation" style="color:#6e7781">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#2a2f3a"><span class="token plain"></span><span class="token punctuation" style="color:#6e7781">}</span><br></span></code></pre></div></div>
74<h3 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="drawingid">
74.drawingId<a href="#drawingid" class="hash-link" aria-label="Direct link to .drawingId" title="Direct link to .drawingId" translate="no">​</a></h3>
75<p>The unique identifier (UUID) for the session.</p>
76<h4 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="functions">Functions<a href="#functions" class="hash-link" aria-label="Direct link to Functions" title="Direct link to Functions" translate="no">​</a></h4>
77<h3 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="connectdrawingname-string">.connect(drawingName?: string)<a href="#connectdrawingname-string" class="hash-link" aria-label="Direct link to .connect(drawingName?: string)" title="Direct link to .connect(drawingName?: string)" translate="no">​</a></h3>
78<p>Creates a new buerli drawing and connects it to ClassCAD. It will use the connection type provided in the <code>init</code> function that has to be called beforehand.</p>
79<p>Returns <code>Promise&lt;DrawingID | null&gt;</code></p>
80<h3 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="disconnect">.disconnect()<a href="#disconnect" class="hash-link" aria-label="Direct link to .disconnect()" title="Direct link to .disconnect()" translate="no">​</a></h3>
81<p>Disconnects the drawing from ClassCAD and resets the drawing.</p>
82<p>Returns <code>void</code></p>
83<h3 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="undostate-string">.undo(state?: string)<a href="#undostate-string" class="hash-link" aria-label="Direct link to .undo(state?: string)" title="Direct link to .undo(state?: string)" translate="no">​</a></h3>
84<p>Undo the last operation or if state isn&#x27;t empty, load the state with name = state.</p>
85<p>Returns <code>void</code></p>
86<blockquote>
87<p>This is experimental and should not be used by production applications!</p>
88</blockquote>
89<blockquote>
90<p>Is not available in ClassCAD WASM</p>
91</blockquote>
92<h3 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="redostate-string">.redo(state?: string)<a href="#redostate-string" class="hash-link" aria-label="Direct link to .redo(state?: string)" title="Direct link to .redo(state?: string)" translate="no">​</a></h3>
93<p>Redo the last undo or if state isn&#x27;t empty, load the state with name = state.</p>
94<p>Returns <code>void</code></p>
95<blockquote>
96<p>This is experimental and should not be used by production applications!</p>
97</blockquote>
98<blockquote>
99<p>Is not available in ClassCAD WASM</p>
100</blockquote>
101<h3 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="createbuffergeometryobjectid-objectidobjectid">.createBufferGeometry(objectId?: ObjectID|ObjectID[])<a href="#createbuffergeometryobjectid-objectidobjectid" class="hash-link" aria-label="Direct link to .createBufferGeometry(objectId?: ObjectID|ObjectID[])" title="Direct link to .createBufferGeometry(objectId?: ObjectID|ObjectID[])" translate="no">​</a></h3>
102<p>Creates a THREEJS buffer geometry of any product (part or assembly).</p>
103<p>Returns <code>Promise&lt;BufferGeometry[] | undefined&gt;</code></p>
104<h3 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="createsceneobjectid-objectidobjectid-options--meshpergeometry-boolean-structureonly-boolean-">.createScene(objectId?: ObjectID|ObjectID[], options?: { meshPerGeometry?: boolean; structureOnly?: boolean })<a href="#createsceneobjectid-objectidobjectid-options--meshpergeometry-boolean-structureonly-boolean-" class="hash-link" aria-label="Direct link to .createScene(objectId?: ObjectID|ObjectID[], options?: { meshPerGeometry?: boolean; structureOnly?: boolean })" title="Direct link to .createScene(objectId?: ObjectID|ObjectID[], options?: { meshPerGeometry?: boolean; structureOnly?: boolean })" translate="no">​</a></h3>
105<p>Creates a THREEJS scene of any product (part or assembly).</p>
106<p>Returns <code>Promise&lt;{ scene: Scene; nodes: { [key: string]: Object3D }; materials: { [key: string]: Material } }&gt;</code></p>
107<h3 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="createthreeshapeowner-objectid-shape-threeshape">.createThreeShape(owner: ObjectID, shape: THREE.Shape)<a href="#createthreeshapeowner-objectid-shape-threeshape" class="hash-l
107ink" aria-label="Direct link to .createThreeShape(owner: ObjectID, shape: THREE.Shape)" title="Direct link to .createThreeShape(owner: ObjectID, shape: THREE.Shape)" translate="no">​</a></h3>
108<p>Creates a curve from THREEJS shapes.</p>
109<p>Returns <code>Promise&lt;object&gt;</code></p>
110<h3 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="createpolylineowner-objectid-fpts--point-threevector3-radius-number--close--true">.createPolyline(owner: ObjectID, fPts: { point: THREE.Vector3; radius: number }[], close = true)<a href="#createpolylineowner-objectid-fpts--point-threevector3-radius-number--close--true" class="hash-link" aria-label="Direct link to .createPolyline(owner: ObjectID, fPts: { point: THREE.Vector3; radius: number }[], close = true)" title="Direct link to .createPolyline(owner: ObjectID, fPts: { point: THREE.Vector3; radius: number }[], close = true)" translate="no">​</a></h3>
111<p>Creates a Polyline2D.</p>
112<p>Returns <code>Promise&lt;object&gt;</code></p>
113<h3 class="anchor anchorTargetHideOnScrollNavbar_Iwt7" id="selectgeometrytypes-grt-count-number">.selectGeometry(types: GrT[], count?: number)<a href="#selectgeometrytypes-grt-count-number" class="hash-link" aria-label="Direct link to .selectGeometry(types: GrT[], count?: number)" title="Direct link to .selectGeometry(types: GrT[], count?: number)" translate="no">​</a></h3>
114<p>Halts execution until a specific geometry is selected by the user.</p>
115<p>Returns <code>Promise&lt;InteractionInfo[]&gt;</code></p></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/quickstart/socketio"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Getting started with SocketIO</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/api/react"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">@buerli.io/react</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_TN1Q thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#init" class="table-of-contents__link toc-highlight">init</a></li><li><a href="#wasmclient" class="table-of-contents__link toc-highlight">WASMClient</a></li><li><a href="#socketioclient" class="table-of-contents__link toc-highlight">SocketIOClient</a></li><li><a href="#buerlicadfacade" class="table-of-contents__link toc-highlight">BuerliCadFacade</a><ul><li><a href="#api" class="table-of-contents__link toc-highlight">.api</a></li><li><a href="#drawingid" class="table-of-contents__link toc-highlight">.drawingId</a></li><li><a href="#connectdrawingname-string" class="table-of-contents__link toc-highlight">.connect(drawingName?: string)</a></li><li><a href="#disconnect" class="table-of-contents__link toc-highlight">.disconnect()</a></li><li><a href="#undostate-string" class="table-of-contents__link toc-highlight">.undo(state?: string)</a></li><li><a href="#redostate-string" class="table-of-contents__link toc-highlight">.redo(state?: string)</a></li><li><a href="#createbuffergeometryobjectid-objectidobjectid" class="table-of-contents__link toc-highlight">.createBufferGeometry(objectId?: ObjectID|ObjectID[])</a></li><li><a href="#createsceneobjectid-objectidobjectid-options--meshpergeometry-boolean-structureonly-boolean-" class="table-of-contents__link toc-highlight">.createScene(objectId?: ObjectID|ObjectID[], options?: { meshPerGeometry?: boolean; structureOnly?: boolean })</a></li><li><a href="#createthreeshapeowner-objectid-shape-threeshape" class="table-of-contents__link toc-highlight">.createThreeShape(owner: ObjectID, shape: THREE.Shape)</a></li><li><a href="#createpolylineowner-objectid-fpts--point-threevector3-radius-number--close--true" class="table-of-contents__link toc-highlight">.createPolyline(owner: ObjectID, fPts: { point: THREE.Vector3; radius: number }[], close = true)</a></li><li><a href="#selectgeometrytypes-grt-count-number" class="table-of-contents__link toc-highlight">.selectGeometry(types: GrT[], count?: number)</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="foot_DFhr"><p class="footMark_KMFz" aria-label="buerli.io"><span class="footWord_DelA" aria-hidden="true"><span class="footLetter_QwQ4" style="--i:0">b</span></span><span class="footWord_DelA" aria-hidden="true"><span class="footLetter_QwQ4" style="--i:1">u</span></span><span class="footWord_DelA" aria-hidden="true"><span class="footLetter_QwQ4" style="--i:2">e</span></span><span class="footWord_DelA" aria-hidden="true"><span class="footLetter_QwQ4" style="--i:3">r</span></span><span class="footWord_DelA" aria-hidden="true"><span class="footLetter_QwQ4" style="--i:4">l</span></span><span class="footWord_DelA" aria-hidden="true"><span class="footLetter_QwQ4" style="--i:5">i</span></span><span class="footWord_DelA" aria-hidden="true"><span class="footLetter_QwQ4 footAccent_d7u4" style="--i:6">.</span></span><span class="footWord_DelA" aria-hidden="true"><span class="footLetter_QwQ4 footAccent_d7u4" style="--i:7">i</span></span><span class="footWord_DelA" aria-hidden="true"><span class="footLetter_QwQ4 footAccent_d7u4" style="--i:8">o</span></span></p><p class="footTagline_O9rJ footReveal_Vatk" style="--d:0.65s">The ClassCAD engine inside your JavaScript: in a Web Worker in the tab, or across a socket to a server.</p><p class="footParts_n5cN"><span class="footReveal_Vatk" style="--d:0.95s">classcad</span><span class="footReveal_Vatk" style="--d:0.99s"> · <!-- -->react</span><span class="footReveal_Vatk" style="--d:1.03s"> · <!-- -->core</span><span class="footReveal_Vatk" style="--d:1.0699999999999998s"> · <!-- -->react-cad</span><span class="footReveal_Vatk" style="--d:1.1099999999999999s"> · <!-- -->icons</span></p><nav class="footGroups_T5O_ footReveal_Vatk" style="--d:1.3s" aria-label="Links"><div class="footGroup_rE_x"><p class="footGroupTitle_aYfd">buerli</p><ul><li><a href="/docs/">Docs</a></li><li><a href="/docs/quickstart/wasm">Quickstart</a></li><li><a href="/docs/api/classcad">API</a></li><li><a href="/docs/changelogs/">Changelogs</a></li><li><a href="/blog">Blog</a></li></ul></div><div class="footGroup_rE_x"><p class="footGroupTitle_aYfd">The family</p><ul><li><a href="https://classcad.ch">ClassCAD<span class="footNote_uCkZ">The engine</span></a></li><li><a href="https://buerli.io" aria-current="page">buerli<span class="footNote_uCkZ">The SDK</span></a></li><li><a href="https://buerligons.io">Buerligons<span class="footNote_uCkZ">The app</span></a></li><li><a href="https://classcad.ai">classcad.ai<span class="footNote_uCkZ">The agents</span></a></li><li><a href="https://awv-informatik.ch">AWV Informatik<span class="footNote_uCkZ">The company</span></a></li></ul></div><div class="footGroup_rE_x"><p class="footGroupTitle_aYfd">
115Elsewhere</p><ul><li><a href="https://github.com/awv-informatik">GitHub</a></li><li><a href="https://discord.gg/MEbR7xyPMS">Discord</a></li><li><a href="https://ch.linkedin.com/company/awv-informatik">LinkedIn</a></li><li><a href="https://x.com/buerli_io">X</a></li><li><a href="mailto:[email protected]">Contact</a></li></ul></div></nav><div class="footBase_qjHd footReveal_Vatk" style="--d:1.45s"><span><a href="https://awv-informatik.ch">© 2026 AWV Informatik AG</a></span><span class="footLegal_TImt"><a href="https://awv-informatik.ch/tac/">Terms</a><a href="https://awv-informatik.ch/privacy/">Privacy</a><a href="https://awv-informatik.ch/license/">License</a></span><button type="button" class="footTop_tym1">Back to top ↑</button></div><i class="corner_H6HP cornerTl_XtFk" aria-hidden="true"></i><i class="corner_H6HP cornerTr_RvR5" aria-hidden="true"></i><i class="corner_H6HP cornerBl_tB6F" aria-hidden="true"></i><i class="corner_H6HP cornerBr_bZTW" aria-hidden="true"></i></footer></div>
116</body>
117</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.