A modern web-based interface built with React & Typescript for FluidNC, the ESP32-based CNC controller firmware. FigUI is designed as a drop-in replacement for the legacy WebUIs, offering a more capable and responsive experience across desktop, tablet, and mobile devices.
Try the live demo - no hardware needed, runs a simulated machine in the browser.
FigUI connects to your FluidNC controller over WebSocket and HTTP, providing real-time machine control, job management, file operations, and configuration.
The DRO displays live axis positions in both work coordinates (WPos) and machine coordinates (MPos). It supports machines with three to six axes (X, Y, Z, A, B, C).
- Zero any axis independently or all at once
- "Go to zero" buttons for each axis
- Tap an axis readout to enter a coordinate using your device’s keyboard, or the compact numpad in tablet mode. Set assigns the current position that work coordinate; Go moves the axis at its jog feed rate.
- Home all axes or individual axes
- Live feed rate and spindle RPM display
The jog pad offers two modes:
- Step jog - A ring-based interface where each press moves the axis by a configured increment. Step sizes are selectable per axis.
- Continuous jog - Hold to move; the machine jogs at the set feed rate for as long as the button is held.
Keyboard jogging is supported: arrow keys for X/Y, +/- for Z. Feed rates for XY, Z, and rotary axes are configured independently and saved to local storage between sessions.
A 3D toolpath viewer renders the loaded G-code file using WebGL. It provides a spatial overview of the job before and during execution.
Controller file previews and their work offsets are saved in IndexedDB. Reloading during a running or held job restores the matching preview from this browser without reading the file from the controller. The cache keeps the last prepared and last running file for each controller; successful uploads are included. Restored previews show a Cached label. Use the same browser and controller address, and prepare the file at least once before running it. Edits, replacements, renames, and deletions through FigUI invalidate saved copies; changes made elsewhere cannot be verified during a job.
[!Info] For very large G-code files, toolhead progress tracking is intentionally disabled. Rendering a live toolhead position on a dense toolpath is expensive and may degrade responsiveness.
While a job is running from the SD card or internal storage, the job control panel shows:
- Play / Resume
- Feed hold (pause)
- Abort
- Job progress as a percentage
The spindle panel provides direct RPM input, quick-select preset buttons (6K, 12K, 18K, 24K RPM), and start/stop controls. The current spindle state and override percentage are displayed alongside the controls.
The file manager gives access to both the SD card and the ESP32 internal filesystem:
- Browse directories and files
- Upload files with a live progress indicator
- Download files to the local machine
- Delete files and directories
- Rename files
- Create new directories
- Open text-based files (G-code, configuration) in the built-in code editor
Text files stored on the controller can be opened and edited directly in the browser. The editor includes syntax highlighting and saves changes back to the controller filesystem.
Config Studio, the visual YAML editor, is available on desktops and tablets; phones use YAML view. Open it from Settings → Machine Config to choose a YAML file from Internal storage. It downloads from GitHub Pages when first opened. After a successful download, the browser caches that Studio build for offline use on the same controller address. Clearing browser storage, changing browsers or controller addresses, or installing firmware that needs a different Studio build requires another download. Code view and config validation remain part of the controller UI.
Macros are custom one-click buttons that send a sequence of G-code or FluidNC commands to the controller. Macros can be created from scratch using the built-in editor or point to a file in the SD or internal filesystem.
Macros are saved to controller storage so they persist across sessions and devices.
The settings panel allows full configuration of the FluidNC host over HTTP and is fully searchable. Device information (firmware version, hostname, IP address) is displayed alongside editable settings organized by category, including network, WiFi, axes, limits, and services.
The interface operates in either millimeters or inches. The preference is saved to local storage and applied across all position displays, feed rate inputs, and jog calculations.
Four built-in themes are available and can be switched at any time:
Light |
Dark |
Anthracite Dark |
Midnight Dark |
The selected theme persists to local storage.
FigUI switches between mobile, tablet, and desktop from viewport width and pointer type (auto, or a forced layout in Settings).
On short landscape tablets (visible height under 640px), the tablet UI stacks POSITION and JOG side by side and puts Viewer/Files/Macros in a full-width tab strip, with page scroll so jog targets stay usable. Taller tablets keep the two-column landscape layout.
Tablet Layout
Mobile Layout
FigUI supports custom plugins - self-contained HTML files that run inside sandboxed iframes with access to machine control, file I/O, and UI theme integration.
Build the project and copy the output to the controller's filesystem:
npm install
npm run build:esp32The dist/ directory contains the static index.html.gz file you can upload to the internal filesystem of the ESP32. Simply refresh the page to show changes.
Config Studio is built separately with npm run build:studio. Production UI builds reference an exact Studio build under config-studio/<build-id>/ on GitHub Pages; deploy those assets before distributing a custom firmware build. Both Pages workflows build Studio and restore previously published versions through scripts/prepare-config-studio-pages.mjs, so older controllers continue to work. The archive is retained as config-studio/archive.json.gz; restoration failures stop deployment instead of silently deleting old builds. Keep the build input list in scripts/config-studio-build-id.mjs current when adding Studio dependencies.
For local development, npm run dev loads Studio from the local source when opened. Run npm run test:config and npm run test:studio to check config compatibility, remote loading, offline caching, retries, and asset preservation.
GPLv3