GCode Editor

GCode viewer and CNC toolpath simulator powered by the webgcode library.

Live Demo

<iframe id="gc-demo" src="/online/webapp/gcode-editor" width="100%" height="500" frameborder="0" style="border:1px solid #ccc; border-radius:4px;"></iframe>
<script>window._wsConnect('gc-demo', 'gcSocket');</script>

Embed

<iframe src="https://sgapps.io/online/webapp/gcode-editor"
    width="100%" height="600" frameborder="0"></iframe>

Open with a GCode File

var gcodeUrl = "https://example.com/design.gcode";
var src = "https://sgapps.io/online/webapp/gcode-editor/url/" + btoa(gcodeUrl);

Events Reference

reset -- Reset Simulation

Clears the current GCode and relaunches the simulation.

socket.fire("webapp::instance::request", "reset", function () {
    console.log("Simulation reset");
});

<button onclick="window._ws('gcSocket')&&window.gcSocket.fire('webapp::instance::request','reset')">Try: Reset</button>

Features