Gcode Preview

A simple GCode parser & previewer with 3D printing in mind. Written in Typescript.
Alternatives To Gcode Preview
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
18 hours ago3,149agpl-3.0C++
G-code generator for 3D printers (RepRap, Makerbot, Ultimaker etc.)
Bigtreetech Skr Mini E31,661
4 months ago479C++
BIGTREETECH SKR-mini-E3 motherboard is a ultra-quiet, low-power, high-quality 3D printing machine control board. It is launched by the 3D printing team of Shenzhen BIGTREE technology co., LTD. This board is specially tailored for Ender 3 printer, perfectly replacing the original Ender3 printer motherboard.
7 days ago397bsd-2-clauseC#
3D printing software for Windows, Mac and Linux
Awesome 3d Printing326
2 months ago14cc0-1.0
A curated list of awesome 3D printing resources
a month agogpl-3.0C
100x Faster Slicing of SCAD Files for 3D Printing
Make Me189
9 years ago21gpl-3.0JavaScript
Tools and an API for easy 3D Printing
2 years ago65agpl-3.0Python
AstroBox allows you to control your 3D Printer wirelessly
3 months ago11gpl-3.0C++
Rapid prototyping CAD IDE for RepRap and RepStrap 3D printing machines.
2 years ago8gpl-3.0C++
My take on a SpotMicro with an optimized design for supportfree 3D-printing. It utilizes an ESP32-DevKitC for the low-level control of the electronics. The heavy computation will be made by external devices, which in return have the power to command the robot.
4 months ago56gpl-3.0JavaScript
Control software for resin 3D printers
Alternatives To Gcode Preview
Select To Compare

Alternative Project Comparisons

GCode Preview npm version MIT license

A simple G-code parser & viewer with 3D printing in mind. Written in Typescript.

Try the online demo

Demo Animation


npm version

npm install gcode-preview


yarn add gcode-preview

Quick start

  import * as GCodePreview from 'gcode-preview';

  const preview = GCodePreview.init({
  // draw a diagonal line
  const gcode = 'G0 X0 Y0 Z0.2\nG1 X42 Y42 E10';

Vue.js / React / Svelte integration

There's a Vue.js example that has a Vue component to wrap the library.

@Zeng95 provided a React & Typescript example that has a React component to wrap the library.

There is a Svelte example with a Svelte component.


G2/G3 arc support

Thanks to @Sindarius arc commands are now supported, which means gcode processed by ArcWelder should be rendered correctly.

3D WebGL + pan/zoom/rotate controls

Demo Animation

Thumbnail preview

Thumbnail previews as generated by PrusaSlicer are detected and parsed. In the gcode these are found in comments, enclosed between 'thumbnail begin' and 'thumbnail end'. The images are encoded as base64 strings but split over multiple lines. These are now parsed and patched back together, but still kept a base64. This allows easy use in the browser for us as data urls.


The thumbnails can be accessed like this: gcodePreview.parser.metadata.thumbnails['220x124']

Thumbnails have a .src property that will create a usable data url from the base64 string.

See an example in the demo source.

Build volume

The build volume will be rendered if the buildVolume parameter is passed. It has the following type:

buildVolume: { 
  x: number; 
  y: number; 
  z: number



Go try the interactive demo.


If you have found a bug or if have an idea for a feature, don't hesitate to create an issue.

It would be great if you want to help! Maybe you'd like to help out with:

  • testing GCode Preview with a variety of gcode files, from different slicers
  • making GCode Preview suitable for different printer types, like Deltas, Belt printers, IDEX, etc.
  • reporting any bugs you find and add as much detail as possible, or even better, a screenshot
  • even better yet: send in a pull request :-)
  • apart from the main code, lots of improvements can still be made in:
    • documentation
    • unit tests


  • ❤️ Thank you @Zeng95 for providing a React & Typescript example
  • ❤️ Thanks to @Sindarius for implementing G2/G3 arc support


Jump to the CHANGELOG

Known issues

Preview doesn't render in Brave

This is caused by the device recognition shield in Brave. By changing the setting for "Device Recognition" in Shield settings to "Allow all device recognition attemps" or "Only block cross-site device recognition attemps" you should not get this error. https://github.com/mrdoob/three.js/issues/16904


A big thanks to these sponsors for their contributions.




If you want to show gratitude you can always buy me beer/coffee/filament via a Paypal donation ^_^

Popular Printing Projects
Popular 3d Graphics Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
3d Printing