gcode-preview for LiaScript: Visualize G-Code for 3D Printing and CNC in Open Courses

G-Code is the language of digital fabrication. Every 3D printer, CNC milling machine, laser cutter, and lathe is controlled by sequences of G-Code instructions — yet most learners never get to see what those instructions actually describe spatially.

The gcode-preview template changes that. It integrates the gcode-preview npm package directly into LiaScript courses, so learners can visualize G-Code paths, layer by layer, in the browser — with no server, no software to install, and no file uploads.

What is G-Code?

G-Code (also called RS-274) is the dominant programming language for numerically controlled machine tools. A G-Code program is a sequence of commands that describe how a tool should move through space: which coordinates to reach, at what speed, whether to extrude material or only travel, and how to handle layers.

A minimal example:

G0 X0 Y0 Z0.2    ; rapid move to start position
G1 X42 Y42 E10   ; extrude while moving to (42,42)
G0 X100 Y100 Z20.2
G1 X42 Y42 E10

In 3D printing education, CNC training, and maker contexts, understanding the connection between the G-Code text and the resulting physical path is a core competency — and exactly what this template makes visible and interactive.

Quick Start

Add a single import line to your LiaScript course header:

<!--
import: https://raw.githubusercontent.com/LiaTemplates/gcode-preview/main/README.md
-->

All macros are now available in your document.

Visualizing G-Code: @GCODE.preview

The simplest macro adds a 3D viewer directly below a code block. Add @GCODE.preview to the opening fence of any gcode block:

``` gcode @GCODE.preview
G0 X0 Y0 Z0.2
G1 X42 Y42 E10
G0 X100 Y100 Z20.2
G1 X42 Y42 E10
```

The viewer renders the toolpath as a 3D scene — extrusion moves in one color, travel moves in another. You can rotate and zoom with the mouse.

Try it live:

Customizing the Viewer: @GCODE.previewWithParams

For full control over the visualization, use @GCODE.previewWithParams. You can set colors, line widths, render modes, and more:

``` gcode @GCODE.previewWithParams(style="width: 100%; height: 300px;" backgroundColor="#1a1a2e" renderTravel="true" renderTubes="true" extrusionColor="#e94560" travelColor="#0f3460" lineWidth="3")
G0 X0 Y0 Z0.2
G1 X42 Y42 E10
G0 X100 Y100 Z20.2
G1 X42 Y42 E10
```

Live Editing: @GCODE.eval and @GCODE.evalWithParams

The @GCODE.eval and @GCODE.evalWithParams macros go at the end of the code block (not in the fence opener). Learners can edit the G-Code, run it, and immediately see the result — the output panel is resizable.

``` gcode
G0 X0 Y0 Z0.2
G1 X42 Y42 E10
```
@GCODE.evalWithParams(extrusionColor="green" backgroundColor="#222" style="width: 100%;" animate="false")

This is particularly powerful in a teaching context: students modify a single coordinate, re-run, and observe exactly how the toolpath changes — a tight feedback loop that static diagrams cannot provide.

Loading External G-Code Files: @GCODE.load

Real G-Code files from slicers and CAM software can be large — sometimes thousands of lines. The @GCODE.load macros let you link to any .gcode file (from your course repository or an absolute URL) without embedding it inline:

@[GCODE.load.preview](./example/eiffel-tower.gcode)

@[GCODE.load.eval](./example/eiffel-tower.gcode)

The template repo includes an Eiffel Tower example — a complex multi-layer print that dramatically shows the layered visualization:

Supported Parameters

The viewer accepts a rich set of configuration options, all passable via @GCODE.previewWithParams or @GCODE.evalWithParams:

Use Cases

3D printing courses — Show students the difference between infill patterns, support structures, and perimeters. Let them write a simple G-Code shape from scratch and visualize the result before ever touching a printer.

CNC machining training — Explain cutting paths, approach moves, and tool changes with interactive visualizations. The color-coded travel vs. extrusion moves map directly to air moves vs. cutting passes.

Technical education and TVET — Many vocational training programs cover CNC or additive manufacturing. gcode-preview brings the machine behavior into the classroom without requiring physical machines.

Maker spaces and workshops — Participants can paste G-Code exported from their slicer directly into an @GCODE.eval block and inspect the toolpath before printing.

CAD/CAM introductions — Compare hand-written G-Code with slicer output to build intuition for what slicers actually produce.

Technical Facts

Try It

Related Templates

• MicroBit-Simulator — simulate BBC micro:bit and MicroPython programs in the browser
• AVR8js — Arduino-compatible AVR microcontroller simulator
• JSXGraph — interactive mathematical visualizations and geometry
• DigiSim — digital logic circuit simulator
• jscad — 3D CAD modeling with JSCAD in the browser