gcode-preview

What gcode-preview is

gcode-preview is a G-code parser and viewer library written in TypeScript with 3D printing in mind. It takes the G-code text that a slicer produces and turns it into a visual representation of the toolpath, so a user can inspect a print before sending it to the printer. The library is published on npm as gcode-preview and is installed with npm install gcode-preview, which makes it easy to drop into a web based printing tool or a hobby dashboard. The repository moved on 11 November 2024 to a new organization called XYZ Tools, described as a collaboration between maintainers remcoder and sophiedeziel for 3D printing related work, so older references to the previous owner still point at the same code. The project carries 202 stars and 38 forks, and the issue tracker shows 38 open issues, which indicates active use and a steady flow of requests. A quick start in the README shows constructing a GCodePreview object with a canvas reference and an extrusion color, then calling processGCode with a short G-code string to draw a line. Full API documentation lives at the project's docs site, and a live demo is hosted at gcode-preview.web.app so visitors can try the renderer without setting up a build.

Rendering features

The feature set covers the details that matter when inspecting a sliced model. Multi color support means G-code sliced for a multi tool system renders with distinct colors per tool, assigned through an array passed to the extrusionColor property where the index matches the tool number from T0 upward. The README lists supported systems including Prusa MMU1, MMU2, and MMU3, the Prusa XL, Bambulab AMS and AMS lite, the Enraged Rabbit Carrot Feeder, IDEX machines, toolchangers, the 3D Chameleon, and virtual tools for color mixing. The renderer can draw extrusions as tube geometry when renderTubes is enabled, and it supports G2 and G3 arc commands thanks to a contribution, so output from ArcWelder processes correctly. Thumbnail preview is another feature: PrusaSlicer embeds thumbnails in comments between thumbnail begin and thumbnail end markers as base64 split across lines, and the library reassembles them into a usable data URL. The README shows accessing these through gcodePreview.parser.metadata.thumbnails with a size identifier and a .src property. A build volume can be drawn when the buildVolume parameter is supplied, which helps confirm the model fits the printer. Together these features make the preview useful for both single and multi material prints. These details make the preview useful before a print starts, not only after a failure on the printer.

Framework integration

Because gcode-preview is a plain TypeScript library, the project supplies integration examples for several front end frameworks rather than binding to one. The README links a Vue.js example with a Vue component that wraps the library, a React and TypeScript example with a React component, and a Svelte example with a Svelte component, each showing how to mount the canvas and feed it G-code inside the framework's lifecycle. That spread makes it approachable whether a team builds with Vue, React, or Svelte. A minimal demo on CodePen is also linked for a no install tryout. The library is distributed under the MIT license, which permits commercial and personal use with attribution, and the project invites discussion on a Discord server linked from the README. For developers who want finer control, the API docs at gcode-preview.web.app/docs describe the constructor options and the parser metadata in more depth than the README summary. The combination of a small install, framework specific examples, and a hosted demo lowers the effort needed to add G-code visualization to a printing related web app, which is likely why the repository has gathered a few hundred stars since its start. The MIT license and the framework examples together lower the effort needed to adopt it.

Editorial conclusion

gcode-preview is published under the MIT license, carries 202 stars, and is available as the gcode-preview package on npm for TypeScript based 3D printing tools.