Show a 3D print or CNC/laser job in the browser — before, during, or after it runs.

Drop .gcode, .gcode.3mf, or Prusa .bgcode into a page and get an interactive toolpath: orbit it, clip to a layer, scrub it, color by feature or speed, overlay live progress. Parsing runs off the main thread, so a 250 MB file never freezes the UI — with Vue, React, Svelte, and Web Component adapters over one engine.

Get started Feature gallery API reference GitHub
3DBenchy rendered as extrusion tubes with per-feature coloring on a neutral grey build plate
These Guide and Concept pages are the **SDK manual**. The generated **[API reference](https://chestnutlabs.github.io/gcode-preview/api/)** — every public export of all fourteen `@chestnutlabs/*` packages — is a companion site linked from the top nav. New here? Jump to the **[feature gallery](feature-gallery.md)** to browse the breadth, or start below. ## 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): ```bash npm install @chestnutlabs/gcode-preview-vue three # or -react, -svelte, -element ``` Prefer no framework? Use the Web Component: ```bash npm install @chestnutlabs/gcode-preview-element three ``` ## 60-second example (Vue) ```vue ``` Every adapter ships the same defaulted `` 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. `` is the whole thin path; the full viewer is reachable without switching APIs. ## Which package do I need? | You want… | Install | |---|---| | A drop-in viewer in **Vue / React / Svelte** | `@chestnutlabs/gcode-preview-{vue,react,svelte}` | | A viewer with **no framework** | `@chestnutlabs/gcode-preview-element` | | To build your own viewer on the shared controller | `@chestnutlabs/gcode-preview-core` | | Just the **parser → IR** (no rendering) | `@chestnutlabs/gcode-parser` + `@chestnutlabs/toolpath-core` | | A **headless still image** of a toolpath (server thumbnails) | `renderStill` from `@chestnutlabs/gcode-renderer-three` | | A **presentation thumbnail of the source model** (STL / 3MF, not the toolpath) | `renderModelStill` from `@chestnutlabs/gcode-model-renderer` | ## Where to next - **[Framework adapters](adapters.md)** — the component *and* the lower-level API for each framework. - **[Recipes](recipes.md)** — custom workers, `.gcode.3mf` multi-plate, headless still render, live printer telemetry, multiple previews on one page. - **Concepts** — [ToolpathIR & the capability model](concept-ir-capabilities.md), [Workers, streaming & performance](concept-workers.md), [Dialects & containers](concept-dialects-containers.md), [Live progress & motion model](concept-progress-motion.md), [Parametric programs (RS274NGC)](concept-parametric-programs.md). - **API reference** — pick a package in the sidebar (`toolpath-core`, `gcode-parser`, …). > **Status:** published — all fourteen `@chestnutlabs/*` packages are on npm (latest `v0.19.0`, > lockstep-versioned with provenance). Governance and epic status live in the > [repository docs](https://github.com/ChestnutLabs/gcode-preview/tree/dev/docs).