A framework-free <gcode-preview> Web Component for the Chestnut Labs G-code viewer — a thin
custom-element shell over @chestnutlabs/gcode-preview-core, the same engine
the Vue/React/Svelte adapters wrap. Use it from plain HTML, Angular, or any framework — no peer
framework dependency.
npm install @chestnutlabs/gcode-preview-element three
three is a peer dependency of the underlying renderer.
<script type="module">
import '@chestnutlabs/gcode-preview-element/define'; // registers <gcode-preview>
const el = document.querySelector('gcode-preview');
el.addEventListener('ready', (e) => console.log('parsed', e.detail));
document.querySelector('input[type=file]').addEventListener('change', (ev) => {
el.source = ev.target.files[0]; // a File / Uint8Array / ArrayBuffer
});
</script>
<gcode-preview quality="tubes" show-travel="false" style="width: 100%; height: 70vh"></gcode-preview>
Prefer explicit registration? Import the function instead of the side-effectful entry:
import { defineGcodePreview } from '@chestnutlabs/gcode-preview-element';
defineGcodePreview(); // idempotent; defaults to the <gcode-preview> tag
Scalar options are attributes (also settable as properties); rich options are properties.
| Attribute | Property | Type | Default |
|---|---|---|---|
quality |
quality |
'auto' | 'lines' | 'tubes' |
'auto' |
camera-mode |
cameraMode |
'perspective' | 'orthographic' |
'perspective' |
show-travel |
showTravel |
"true" | "false" |
true |
show-retractions |
showRetractions |
"true" | "false" |
false |
scrub |
scrub |
integer | — (all) |
layer-range |
layerRange |
"start,end" / [number, number] |
— (all) |
| — | source |
Uint8Array | ArrayBuffer | File |
null |
| — | colorMode |
ColorMode |
— |
| — | theme |
Theme |
— |
| — | buildVolume |
BuildVolumeDef | MachineGeometry |
— |
| — | progress |
ProgressObservation | null |
null |
| — | createWorker |
() => WorkerLike |
batteries default |
sourceis a property only (never a URL attribute) — the element does not fetch.
CustomEvent, kebab-case detail)ready · parse-error · parse-cancelled · parse-progress · build-complete · disclosure ·
quality-fallback · progress-presentation-changed · machine-geometry-discovered ·
machine-geometry-mismatch · error.
The underlying handle is also exposed as instance members (state, controls, raw, onEvent,
parse, observeProgress, tickProgress, clearProgress) for advanced use — the same neutral
controller surface the other adapters expose.
By default the batteries worker parses off-thread. To supply a custom/slim worker, set the
createWorker factory property (see the Vue README for the shared worker
notes). The element passes the same behavioral parity suite as the Vue/React/Svelte adapters.