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.
You must read and understand every line of code you submit. This applies equally to code you write yourself and code produced by AI tools or agents. You must be able to explain what it does, why it is needed, how it interacts with the existing code, and how you verified it. You are responsible for its correctness, safety, scope, and maintenance throughout review. Do not submit generated code you cannot explain or rely on maintainers to review it on your behalf.
Do not use AI agents to mass-generate or flood the project with pull requests.
Submit focused changes you have personally reviewed and tested. Review capacity is limited. PR floods and submissions that do not meet these requirements may be closed without a detailed review of each PR.
FigUI lives on the ESP32's internal filesystem alongside macros and configuration files. Bundle size is a primary design constraint for every contribution. Each increase reduces space available to users and room for future features. Keep changes focused and justify the storage cost of additions to the core UI.
Before submitting a PR, build both the target branch and your changes using the same Node/npm versions and each revision's lockfile:
npm ci
npm run build:esp32Compare the final dist/index.html.gz files. Include the before/after sizes in bytes, the increase or decrease, and a brief explanation of any growth in your PR description.
- Reuse existing code and UI. Share repeated controls, parameter rows, probe symbols, SVG definitions, and common logic where doing so reduces the output. Measure the result; extra abstraction can also add bytes.
- Choose dependencies carefully. Prefer existing utilities and browser APIs when they meet the need. Check the actual production cost of a new package, use imports that allow unused code to be removed, and avoid pulling in a general-purpose library for a small helper. Use the existing generated icon system.
- Keep specialized features optional. Consider a plugin for advanced workflows.
- Account for the single-file build. The ESP32 build inlines dynamic imports and assets. Moving code into another file or using
import()alone does not reduce controller storage. - Preserve safety and readability. The build already minifies, mangles CSS classes, packs JavaScript, and compresses with Zopfli. Focus on scope, duplication, dependencies, and assets. Keep necessary validation and machine-control safeguards, and let the build tools minify readable source.
Contributions with unexplained or disproportionate bundle growth may need to be reduced or moved out of the core UI before merging.
GPLv3