Chestnut Labs G-code Preview

A worker-based, cross-vendor G-code toolpath stack for the browser: parse .gcode and .gcode.3mf off the main thread, normalize them into a versioned intermediate representation (ToolpathIR), and render an interactive Three.js preview — with first-class Vue, React, Svelte, and Web Component adapters over one shared, framework-neutral engine.

This is the SDK manual (these Guide and Concept pages). The generated API reference — every public export of all ten @chestnutlabs/* packages — is a companion site linked from the API reference item in the top nav.

Install

Install the adapter for your framework plus three (the renderer declares three as a peer dependency; npm ≥ 7 installs it automatically, pnpm/yarn users add it explicitly):

npm install @chestnutlabs/gcode-preview-vue three     # or -react, -svelte, -element
Copy

Prefer no framework? Use the Web Component:

npm install @chestnutlabs/gcode-preview-element three
Copy

60-second example (Vue)

<script setup>
import { GcodePreview } from '@chestnutlabs/gcode-preview-vue';
import { shallowRef } from 'vue';
const file = shallowRef(null);
</script>

<template>
  <input type="file" accept=".gcode,.3mf" @change="file = $event.target.files?.[0] ?? null" />
  <div style="height: 70vh">
    <GcodePreview :source="file" @ready="(s) => console.log(`${s.segments} segments`)" />
  </div>
</template>
Copy

Every adapter ships the same defaulted <GcodePreview> surface — source, parseOptions, buildVolume, quality, colorMode, layerRange, scrub, showTravel, progress, cameraMode, theme, createWorker — plus a lower-level API (composable / hook / store / action) for building your own controls. <GcodePreview :source="file" /> is the whole thin path; the full viewer is reachable without switching APIs.

Which package do I need?

Where to next

• Framework adapters — the component and the lower-level API for each framework.
• Recipes — custom workers, .gcode.3mf multi-plate, headless still render, live printer telemetry, multiple previews on one page.
• Concepts — ToolpathIR & the capability model, Workers, streaming & performance, Dialects & containers, Live progress & motion model.
• API reference — pick a package in the sidebar (toolpath-core, gcode-parser, …).

Status: published — all ten @chestnutlabs/* packages are on npm (latest v0.2.0, lockstep-versioned with provenance). Governance and epic status live in the repository docs.