From 90d7480eef6b326258d41680f009765c35b2f46b Mon Sep 17 00:00:00 2001 From: Nathaniel Chestnut Date: Sun, 30 Aug 2026 19:21:45 -0700 Subject: [PATCH 1/6] docs(v0.20.0 parity): live demos on Pages + refreshed README/homepage/gallery to the current UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A documentation/demo/presentation parity pass against the shipped v0.20.0 product (no SDK API changes). The README/Pages no longer advertise the pre-Feature-Lab control panel. Live demos on GitHub Pages: - tools/docs/build-demos.mjs (`npm run docs:demos`, wired into docs-pages.yml after docs:build): builds the Feature Lab + all four framework showcases/minimals and stages them into the Pages artifact under /demos/* on the published SDK, with a product-facing landing (labelled cards). Corpus pruned per demo; tools/docs/serve-site.mjs previews the built artifact locally. Reproducible app-UI screenshots: - tools/screenshots/capture-app.mjs + app-shots.manifest.json (`npm run docs:shots:app`): captures the actual Feature Lab application surface (studio-dark chrome) by compositing the render into the DOM. New/updated media: app-control-panel (lead controls shot), app-appearance (color modes), app-diagnostics (capabilities + getRenderStats; replaces the stale mid-grey diagnostics-panel), app-prepare (Prepare/source model). README + Pages refresh: - README leads with the Feature Lab UI + a "Try the live demo" link; adds a Prepare/Preview pairing and a controls/capabilities pairing; the framework table shows both viewers (GcodePreview + the /model ModelViewer); the toolpath-vs-model section documents the declarative model adapters; the beauty render is demoted to a supporting image. - Pages homepage: primary "Try the live demo" CTA, app-UI hero, demos banner + Prepare/Preview card. - Feature gallery: "Try it live — Prepare & Preview" section; model/framework sections updated for the /model adapters + demos; swapped stale diagnostics-panel for app-diagnostics. - VISUAL_FEATURE_COVERAGE: records the resolved app-UI/demo gaps + the new harness. Demo fix (presentation): the Feature Lab now applies its initial move-visibility state, so travel no longer renders while "Travel moves" is unchecked. Demo multi-page build for the linked pages. Release gate: the RELEASE_REVIEW Visual disposition now covers app-UI + live-demo parity, so a future cut can't lead with a stale UI. docs:links OK (261). Verified against the built docs-site served locally: homepage/gallery structure + links, all five demos load and run on the published SDK, app-UI shots show the current UI. Co-Authored-By: Claude Opus 4.8 --- .claude/launch.json | 8 + .github/workflows/docs-pages.yml | 8 + README.md | 65 ++++--- docs/VISUAL_FEATURE_COVERAGE.md | 34 +++- docs/manual/feature-gallery.md | 43 ++++- docs/manual/index.md | 11 +- docs/media/app-appearance.png | Bin 0 -> 555471 bytes docs/media/app-control-panel.png | Bin 710011 -> 565304 bytes docs/media/app-diagnostics.png | Bin 0 -> 667937 bytes docs/media/app-prepare.png | Bin 0 -> 104643 bytes package.json | 3 + tools/demo/package-lock.json | 74 +++++--- tools/demo/src/main.js | 6 + tools/demo/vite.config.js | 15 ++ tools/docs/build-demos.mjs | 177 +++++++++++++++++++ tools/docs/serve-site.mjs | 53 ++++++ tools/example-react/package-lock.json | 44 ++--- tools/example-svelte/package-lock.json | 44 ++--- tools/example-vue/package-lock.json | 47 ++--- tools/example-webcomponent/package-lock.json | 47 ++--- tools/release/stamp-release-docs.mjs | 2 +- tools/screenshots/README.md | 27 +++ tools/screenshots/app-shots.manifest.json | 44 +++++ tools/screenshots/capture-app.mjs | 145 +++++++++++++++ 24 files changed, 751 insertions(+), 146 deletions(-) create mode 100644 docs/media/app-appearance.png create mode 100644 docs/media/app-diagnostics.png create mode 100644 docs/media/app-prepare.png create mode 100644 tools/docs/build-demos.mjs create mode 100644 tools/docs/serve-site.mjs create mode 100644 tools/screenshots/app-shots.manifest.json create mode 100644 tools/screenshots/capture-app.mjs diff --git a/.claude/launch.json b/.claude/launch.json index 559997bb..5e70f719 100644 --- a/.claude/launch.json +++ b/.claude/launch.json @@ -55,6 +55,14 @@ "tools/example-webcomponent" ], "port": 5204 + }, + { + "name": "docs-site", + "runtimeExecutable": "node", + "runtimeArgs": [ + "tools/docs/serve-site.mjs" + ], + "port": 5098 } ] } diff --git a/.github/workflows/docs-pages.yml b/.github/workflows/docs-pages.yml index f9ba207d..ae62cd7d 100644 --- a/.github/workflows/docs-pages.yml +++ b/.github/workflows/docs-pages.yml @@ -13,6 +13,12 @@ on: - 'packages/**' - 'typedoc.json' - 'tools/docs/**' + - 'tools/demo/**' + - 'tools/demo-kit/**' + - 'tools/example-react/**' + - 'tools/example-vue/**' + - 'tools/example-svelte/**' + - 'tools/example-webcomponent/**' - 'docs/manual/**' - 'docs/media/**' - '.github/workflows/docs-pages.yml' @@ -39,6 +45,8 @@ jobs: cache: 'npm' - run: npm ci - run: npm run docs:build + # Build the live, interactive demos into the Pages artifact (docs-site/demos/*). + - run: npm run docs:demos - uses: actions/configure-pages@v5 - uses: actions/upload-pages-artifact@v3 with: diff --git a/README.md b/README.md index f419091d..881ff7ed 100644 --- a/README.md +++ b/README.md @@ -3,24 +3,28 @@ **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 web page and get an interactive toolpath view: orbit it, clip it to a layer, scrub through it, color it by feature or speed, and overlay -live printer progress. Parsing runs in a Web Worker, so a 250 MB file never freezes your UI. +live printer progress. Or view the **source model** (STL / 3MF) before it's sliced. Parsing runs in +a Web Worker, so a 250 MB file never freezes your UI. [![npm](https://img.shields.io/npm/v/@chestnutlabs/gcode-preview-react?label=npm&color=cb3837)](https://www.npmjs.com/package/@chestnutlabs/gcode-preview-react) [![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE) [![docs](https://img.shields.io/badge/docs-manual%20%2B%20API-2ea44f)](https://chestnutlabs.github.io/gcode-preview/) ![node](https://img.shields.io/badge/node-%E2%89%A522-339933) -![3DBenchy rendered as extrusion tubes with per-feature coloring — perimeters, infill, and skirt in distinct colors — on a neutral grey build plate](docs/media/viewer-benchy-tubes.png) +![The G-code Preview Feature Lab — a 3DBenchy colored by feature role in the viewport, with the inspector rail (move-visibility toggles, feature-role hide, segment inspection), a color-mode legend, camera controls, a layers/segments/time scrub strip, and honest capability badges](docs/media/app-control-panel.png) + +**▶ [Try the live demo](https://chestnutlabs.github.io/gcode-preview/demos/)** — open the interactive **Feature Lab**, or the **React / Vue / Svelte / Web Component** examples, right in your browser. Nothing is uploaded; parsing runs in a Web Worker. --- ## What it is -G-code Preview turns a sliced G-code file into an interactive picture of the actual toolpath. It -reads the file the way the printer will — every move, layer, feature, and tool change — and draws -it with Three.js (or a Canvas 2D fallback for low-GPU devices). It ships as a set of -`@chestnutlabs/*` npm packages with ready-made **Vue, React, Svelte, and Web Component** components, -all built on one shared engine. +G-code Preview covers **both halves** of looking at a print job. **Preview** turns a sliced G-code +file into an interactive picture of the actual toolpath — reading the file the way the printer will, +every move, layer, feature, and tool change, drawn with Three.js (or a Canvas 2D fallback for +low-GPU devices). **Prepare** shows the **source model** (STL / 3MF) before slicing — the object, +its parts, and its material colors. It ships as a set of `@chestnutlabs/*` npm packages with +ready-made **Vue, React, Svelte, and Web Component** components, all built on one shared engine. One rule runs through the whole thing: **it shows what it can prove and refuses to fake the rest.** If a slicer didn't record feature types, the viewer says so instead of inventing colors. If live @@ -30,7 +34,22 @@ telemetry only reports a percentage, it draws an uncertainty band, not a false-p npm install @chestnutlabs/gcode-preview-react three # or -vue / -svelte / -element ``` -![The demo application: a control panel — corpus picker, layer and time scrub, an honest "54.2 min (slicer estimate)" print time, display toggles — beside a fully rendered 3DBenchy with feature coloring](docs/media/app-control-panel.png) +### Two modes, one SDK — Prepare & Preview + +| Prepare — the source model | Preview — the sliced toolpath | +|---|---| +| ![The Feature Lab in Prepare mode: a colored 3MF source model (red, amber, green stacked blocks) with a Source Model panel reporting 3 objects, 3 placements, and materials: known](docs/media/app-prepare.png) | ![The Feature Lab in Preview mode: a 3DBenchy colored by feature role with the inspector rail, feature legend, camera controls, and layer/segment scrub](docs/media/app-control-panel.png) | +| **STL / 3MF** solid model — objects, materials, model controls, honest material-color tier. | **Sliced G-code** — layers, features, speed, travel, retractions, and toolpath controls. | + +The controls and capabilities are front-and-centre, not hidden behind a render: + +| Color modes, capability-gated | Render diagnostics & capabilities | +|---|---| +| ![The Appearance tab: a color-by selector (single / tool / feature / speed / object / layer height) with the active feature-role legend; modes the file can't support are greyed out](docs/media/app-appearance.png) | ![The Diagnostics tab: capability confidence badges and getRenderStats() output — backend, GPU, geometry mode, segment and draw-call counts, worker pool](docs/media/app-diagnostics.png) | + +You can drive all of this yourself in the **[live demos](https://chestnutlabs.github.io/gcode-preview/demos/)**. A cropped beauty render — the same engine, no UI: + +![3DBenchy rendered as extrusion tubes with per-feature coloring — perimeters, infill, and skirt in distinct colors — on a neutral grey build plate](docs/media/viewer-benchy-tubes.png) ## Why you'd use it @@ -173,14 +192,16 @@ every FDM file is byte-for-byte unchanged. See ### Framework integration Four adapters over one engine, with matching options, events, and TypeScript types — enforced by a -shared behavioral test suite that runs against all four in CI: +shared behavioral test suite (with a controls/state parity guard) that runs against all four in CI. +Each adapter exposes **both** viewers: the toolpath `` from the package root, and the +source-model `` from the package's **`/model`** subpath (the Prepare side). -| Adapter | Package | Component + lower-level API | -|---|---|---| -| **Vue 3** | [`@chestnutlabs/gcode-preview-vue`](packages/gcode-preview-vue) | `` + `useGcodePreview()` composable | -| **React** | [`@chestnutlabs/gcode-preview-react`](packages/gcode-preview-react) | `` + `useGcodePreview()` hook (StrictMode-safe) | -| **Svelte** | [`@chestnutlabs/gcode-preview-svelte`](packages/gcode-preview-svelte) | `` + `createGcodePreview()` store/action | -| **Web Component** | [`@chestnutlabs/gcode-preview-element`](packages/gcode-preview-element) | `` custom element, no framework peer | +| Adapter | Package | Preview (toolpath) | Prepare (source model, `/model`) | +|---|---|---|---| +| **Vue 3** | [`@chestnutlabs/gcode-preview-vue`](packages/gcode-preview-vue) | `` + `useGcodePreview()` | `` + `useModelViewer()` | +| **React** | [`@chestnutlabs/gcode-preview-react`](packages/gcode-preview-react) | `` + `useGcodePreview()` (StrictMode-safe) | `` + `useModelViewer()` | +| **Svelte** | [`@chestnutlabs/gcode-preview-svelte`](packages/gcode-preview-svelte) | `` + `createGcodePreview()` | `` + `createModelViewer()` | +| **Web Component** | [`@chestnutlabs/gcode-preview-element`](packages/gcode-preview-element) | `` (no framework peer) | `` | ### Browser & performance architecture @@ -244,11 +265,15 @@ const { canvas, materials, cacheKey } = await renderModelStill( // materials: 'known' when the source carried colors, 'unavailable' when it didn't. ``` -Need it live rather than as a thumbnail — a "View in 3D" for the part? `createModelViewer` is the -interactive analogue of the still: it orbits, zooms, and pans the same STL / 3MF (including production -multicolor) with camera presets and the same serializable camera state, over the shared camera and -orbit controls. See the -[model-renderer README](packages/gcode-model-renderer/README.md#interactive-viewer). +Need it live rather than as a thumbnail — a "View in 3D" for the part? Interactive source-model +viewing is a **first-class, declarative half of the SDK**: drop `` from any +framework's **`/model`** subpath (`@chestnutlabs/gcode-preview-{react,vue,svelte}/model`, or +`` from the Web Component) and orbit/zoom/pan the same STL / 3MF (including +production multicolor) with camera presets, serializable camera state, per-plate render scope, and the +honest `materials` capability tier — the same parity (props, events, lifecycle, cleanup) as the +toolpath component. It wraps the framework-neutral `createModelPreviewController` over the shared +`createModelViewer` engine. See the [adapters guide](docs/manual/adapters.md) ("Two viewers: Preview +and Prepare") and the [model-renderer README](packages/gcode-model-renderer/README.md). **Multi-plate, multi-object, or just a subset.** A 3MF project can hold several plates and many objects. Parse or render **one plate at a time** (`parseOptions.plate`), and a **render scope** diff --git a/docs/VISUAL_FEATURE_COVERAGE.md b/docs/VISUAL_FEATURE_COVERAGE.md index b2e0c219..3f2ee80a 100644 --- a/docs/VISUAL_FEATURE_COVERAGE.md +++ b/docs/VISUAL_FEATURE_COVERAGE.md @@ -118,6 +118,32 @@ capabilities, so the per-capability rows below are unchanged): look. App-UI screenshots of Prepare mode were captured for review but, like the toolpath showcase shots, are not yet canonical `docs/media` (same harness gap). +## This pass (2026-08-30, v0.20.0 docs/demo parity) — RESOLVES the app-UI + demo gaps above + +The two deferrals from the previous pass (app-UI media not canonical; interactive demos not published) +are now closed: + +- **App-UI screenshots are now canonical + reproducible.** A new manifest-driven harness + (`tools/screenshots/capture-app.mjs` + `app-shots.manifest.json`, run via `npm run docs:shots:app`) + captures the actual Feature Lab application surface — studio-dark chrome — by compositing the real + render into the DOM. Committed shots: `app-control-panel` (the lead controls shot, replaces the old + mid-grey `app-control-panel`), `app-appearance` (color modes), `app-diagnostics` (capabilities + + `getRenderStats`, replaces the stale pre-Feature-Lab `diagnostics-panel`), `app-prepare` (Prepare / + source model). These are the *application* look (dark), deliberately distinct from the mid-grey + capability renders — both are now first-class classes in the media set. +- **Live interactive demos are published to GitHub Pages** (`tools/docs/build-demos.mjs`, `npm run + docs:demos`, wired into `docs-pages.yml`): the Feature Lab and all four framework showcases + minimal + examples under `/demos/*`, on the published SDK, with a product-facing landing at `/demos/`. The + README, Pages homepage, and feature gallery now lead with "Try the live demo" and the interactive + application surface, not only renders. +- **README/Pages refreshed against v0.20.0:** the README hero is now the Feature Lab UI; a Prepare + + Preview pairing and a controls/capabilities pairing appear early; the homepage hero + a demos + banner + a Prepare/Preview card were added; the gallery gained a "Try it live" section and swapped + the stale `diagnostics-panel` for `app-diagnostics`. +- **Reproducibility / release gate:** `docs:shots` (capability renders) and `docs:shots:app` (app-UI) + regenerate the media; the RELEASE_REVIEW Visual disposition now explicitly covers app-UI + live-demo + parity so a future cut can't advertise a stale UI (see the release template). + ## 1. Toolpath inspection | Capability | User-facing | Demo | Media | README | Pages gallery | Manual/pkg | Status | @@ -169,7 +195,7 @@ capabilities, so the per-capability rows below are unchanged): | Renderer build stages (`stage` event) | ✅ | ❌ | — | ✅ (prose) | gallery | concept-workers | needs animation | | Interaction-aware quality | ✅ | ❌ | — | ✅ (prose) | gallery | concept-workers | needs animation | | Disclosed decimation / degradation | ✅ | ✅ (disclosure) | — | ✅ (prose) | gallery | concept-workers | needs screenshot (disclosure text) | -| Render diagnostics (`getRenderStats`) | ✅ | ✅ (panel) | `diagnostics-panel` | ✅ | gallery | concept-workers | covered — panel-in-context screenshot in the gallery | +| Render diagnostics (`getRenderStats`) | ✅ | ✅ (panel) | `app-diagnostics` | ✅ | gallery | concept-workers | covered — current Feature Lab Diagnostics tab (capability badges + stats) in the gallery | | Geometry worker pool (parallel tubes) | ✅ | ❌ | — | mention | gallery | concept-workers | not visually meaningful (diagnostics panel proxies it) | | WebGL context-loss recovery | ✅ | ❌ | — | mention | — | — | not visually meaningful | @@ -193,7 +219,7 @@ capabilities, so the per-capability rows below are unchanged): | STL presentation still | ✅ | model page | (in pair) | ✅ | gallery | model-renderer README | covered | | 3MF material/color presentation | ✅ | model page | (in pair) | ✅ | gallery | model-renderer README | covered | | Interactive model viewer (`createModelViewer`) | ✅ | model-viewer page + Feature Lab (Prepare) | — | ✅ (prose) | gallery | model-renderer README | covered (interactive) — Feature Lab + all 4 showcases have a Prepare mode; animation still nice-to-have | -| Model-viewer framework adapters (`` / `/model`) | ✅ | Feature Lab + 4 showcases (Prepare) + model.html minimals | — | ✅ (table) | — | adapters + 4 READMEs | covered (code + examples); app-UI media pending harness support | +| Model-viewer framework adapters (`` / `/model`) | ✅ | Feature Lab + 4 showcases (Prepare) + model.html minimals + **live demos on Pages** | `app-prepare` | ✅ (table + README pairing) | homepage + gallery | adapters + 4 READMEs | covered — app-UI shot + running demos | | Multi-object files | ✅ | model page | — | mention | gallery | — | needs screenshot | | Multi-plate files + per-plate render | ✅ | ❌ | — | ❌ | gallery | — | needs demo exposure + needs comparison | | Render scope / object subsets (`RenderScope`) | ✅ | ❌ | — | ❌ | gallery | recipes | needs demo exposure + needs comparison | @@ -235,8 +261,8 @@ capabilities, so the per-capability rows below are unchanged): | Capability | User-facing | Demo | Media | README | Pages gallery | Manual/pkg | Status | |---|:---:|:---:|:---:|:---:|:---:|:---:|---| -| Vue / React / Svelte / Web Component adapters | ✅ | two-tier examples + Feature Lab | — | ✅ (table) | — | adapters | covered (code + examples) — each adapter has a minimal + showcase example on the shared design language; canonical app-UI media pending harness support | -| Capability-aware consumer UX (gated modes + reasons, confidence tiers, contextual controls) | ✅ | Feature Lab + 4 showcases | — | ✅ (prose) | — | adapters | demonstrated in demo + examples; review captures exist (dark app UI), not yet canonical mid-grey media | +| Vue / React / Svelte / Web Component adapters | ✅ | two-tier examples + Feature Lab + **live demos on Pages** | `app-control-panel` | ✅ (table) | homepage + gallery | adapters | covered — each adapter has a minimal + showcase example, all runnable on the Pages demos site | +| Capability-aware consumer UX (gated modes + reasons, confidence tiers, contextual controls) | ✅ | Feature Lab + 4 showcases | `app-appearance`, `app-diagnostics` | ✅ | gallery + README | adapters | covered — app-UI shots show gated modes + capability badges (captured by capture-app.mjs) | | Headless toolpath still (`renderStill`) | ✅ | still page | — | ✅ | gallery | reference/still-render | needs screenshot (server-thumbnail context) | | Headless model still (`renderModelStill`) | ✅ | model page | `model-render-stl-3mf` | ✅ | gallery | model-renderer README | covered | | Off-thread parsing / cancellation / limits | ✅ | ✅ | — | ✅ (prose) | — | concept-workers | not visually meaningful | diff --git a/docs/manual/feature-gallery.md b/docs/manual/feature-gallery.md index 2a14230c..ca7f6d45 100644 --- a/docs/manual/feature-gallery.md +++ b/docs/manual/feature-gallery.md @@ -14,6 +14,32 @@ on a neutral slicer/CAD viewport — nothing mocked. This page is the visual com > New here? Start with the [getting-started guide](index.md), then come back to browse the breadth. +> The capability shots below are **real renders** on a neutral mid-grey documentation viewport. The +> application shots in this first section show the **live Feature Lab** in its studio-dark chrome — +> the actual interactive product. + +## Try it live — Prepare & Preview + +**▶ [Open the live demos](https://chestnutlabs.github.io/gcode-preview/demos/)** — the interactive +[Feature Lab](https://chestnutlabs.github.io/gcode-preview/demos/feature-lab/index.html) and the +[React](https://chestnutlabs.github.io/gcode-preview/demos/react/showcase.html) / +[Vue](https://chestnutlabs.github.io/gcode-preview/demos/vue/showcase.html) / +[Svelte](https://chestnutlabs.github.io/gcode-preview/demos/svelte/showcase.html) / +[Web Component](https://chestnutlabs.github.io/gcode-preview/demos/webcomponent/showcase.html) +examples, running in your browser on the published `@chestnutlabs/*` packages. + +The SDK covers **both halves** of looking at a print job — the sliced toolpath (Preview) and the +source model (Prepare), each with real controls: + +| Preview — the sliced toolpath | Prepare — the source model | +|---|---| +| ![The Feature Lab in Preview mode: a 3DBenchy colored by feature role with the inspector rail, feature legend, camera controls, and layer/segment scrub](../media/app-control-panel.png) | ![The Feature Lab in Prepare mode: a colored 3MF source model with a Source Model panel reporting objects, placements, and materials: known](../media/app-prepare.png) | +| Layers, features, speed, travel, retractions, source-line picking — the toolpath controls. | STL / 3MF solid model — objects, materials, model controls, honest material-color tier. | + +| Color modes, capability-gated | Render diagnostics & capabilities | +|---|---| +| ![The Feature Lab Appearance tab: a color-by selector with the active feature-role legend; unsupported modes greyed out](../media/app-appearance.png) | ![The Feature Lab Diagnostics tab: capability badges and getRenderStats output](../media/app-diagnostics.png) | + ## Toolpath inspection The core job: turn a sliced file into an interactive picture of the actual moves the machine makes. @@ -88,7 +114,7 @@ clean `hold` reveal**, staged preparation progress, and **`getRenderStats()`** d hardware-vs-software GPU, draw calls, timings — never fabricated). See [workers, streaming & performance](concept-workers.md). -![The demo's Render diagnostics panel populated beside the render — backend 3d-webgl (WebGL 2), software ANGLE/SwiftShader GPU, geometry tubes, segment and draw counts, tube bytes, and timings](../media/diagnostics-panel.png) +![The Feature Lab Diagnostics tab: capability confidence badges and getRenderStats() output beside the render — backend 3d-webgl (WebGL 2), software ANGLE/SwiftShader GPU, geometry tubes, segment and draw-call counts, vertex count, tube bytes, worker pool, and timings](../media/app-diagnostics.png) *`getRenderStats()` in context — every value read from the actual render, never fabricated; here reporting a software (SwiftShader) backend, `108,725 / 108,729` segments, 92 draw calls, and the @@ -126,8 +152,11 @@ STL is a single neutral object; **3MF** brings multi-object structure and per-ob **material colors** — and when the source *doesn't* declare colors, the render says `materials: 'unavailable'` rather than inventing one. A 3MF project can hold several **plates** and many **objects**: render **one plate at a time** and narrow to a **render scope** (a plate, or a -subset of objects) for a single thumbnail. Headless `renderModelStill` and interactive -`createModelViewer` share the look. See the +subset of objects) for a single thumbnail. Headless `renderModelStill` and the interactive viewer +share the look — and as of v0.20.0 the interactive viewer is a **first-class framework adapter**: +`` on every framework's `/model` subpath (`` for the Web Component), +the Prepare side shown at the top of this page. See the +[adapters guide](adapters.md) and the [model-renderer README](https://github.com/ChestnutLabs/gcode-preview/blob/dev/packages/gcode-model-renderer/README.md). ## Machine geometry @@ -156,9 +185,11 @@ Canned drilling cycles (`G81`/`G82`/`G83`) expand; controller support is **hones ## Framework integration -The whole viewer ships as drop-in **Vue, React, Svelte, and Web Component** components over one shared -engine, plus a lower-level API (composable / hook / store / action) for building your own controls, -and a headless `renderStill` for server thumbnails. See [framework adapters](adapters.md). +Both viewers ship as drop-in **Vue, React, Svelte, and Web Component** components over one shared +engine — the toolpath `` from the package root and the source-model `` from +the `/model` subpath — plus a lower-level API (composable / hook / store / action) for building your +own controls, and a headless `renderStill` for server thumbnails. Try them in the +[live demos](https://chestnutlabs.github.io/gcode-preview/demos/); see [framework adapters](adapters.md). --- diff --git a/docs/manual/index.md b/docs/manual/index.md index 73107ad0..63f680a3 100644 --- a/docs/manual/index.md +++ b/docs/manual/index.md @@ -3,18 +3,25 @@

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 + ▶ Try the live demo + Get started Feature gallery API reference GitHub
- 3DBenchy rendered as extrusion tubes with per-feature coloring on a neutral grey build plate + The G-code Preview Feature Lab application — a 3DBenchy colored by feature role with the inspector rail, color-mode legend, camera controls, layer/segment scrub, and capability badges
+

▶ Try the live demos — the interactive Feature Lab, and React / Vue / Svelte / Web Component examples, running in your browser on the published SDK.

+