A modern, accessible web interface for Klipper and Moonraker — built to be read from across a workshop and driven from a phone.
- Nothing here needs a reload. Klipper, Moonraker, and firmware restarts are handled in place — values dim while stale and crossfade back.
- Heater arrival times learned from your own machine — a real ETA and a climb rate, not a countdown, plus a warning when a print falls behind the slicer's own estimate.
printer.cfgreads like hypertext.[include]targets are clickable, moving a file offers to fix the include that pointed at it, and an unsaved edit is never lost to a wrong click.- A G-code viewer built for huge files. A 100 MB print starts drawing in about a quarter second, and can follow a live job bead by bead along the real path rather than sliding between position samples.
- Maintenance counted against the printer's own totals — print hours, filament, or days since — and asked about before a print starts into an overdue one.
- WCAG AA contrast enforced by a test, on every control over every surface, not a guideline someone might follow. Full localization, theme packs, five typefaces including OpenDyslexic.
More of what's different: hannott.github.io/Alabaster/guide/highlights
On the machine running Klipper — not your workstation — as the user that owns it, not root:
bash -c "$(curl -fsSL https://raw.githubusercontent.com/Hannott/Alabaster/main/scripts/install.sh)"Downloads the latest release, verifies its checksum, and asks before every
change it makes outside its own directory. Then open
http://<your-printer>.local:8081.
Re-running the same command updates Alabaster. bash ~/alabaster/scripts/uninstall.sh
reverses it.
Full walkthrough, every flag, and the off-printer / multiple-printer arrangement: hannott.github.io/Alabaster/guide/installation
The full guide — every page, theming, accessibility, keyboard shortcuts, and a plain account of what isn't finished yet — lives at hannott.github.io/Alabaster.
npm install
npm run devnpm run checknpm run check is the gate before any pull request: formatting, linting,
type-checking, every test, and the production build.
Node.js 24.15+ (or 22.22.2+ within the 22.x line), a Docker Compose service for a shared dev environment, and the documentation site's own build are covered in the development guide.
The conventions and design decisions this codebase follows — page layout, the button system, dialogs, the dashboard module contract, the Moonraker transport, theming, and deployment — are summarised in Contributing.
Every icon in AppIcon.vue is hand-drawn or
redrawn from an MIT/Apache-2.0-licensed glyph, neither of which require
attribution. One exception: the Spoolman card's icon (the spool token) is
selfh.st's "spoolman-light"
icon, © selfh.st, licensed
CC BY 4.0.
Alabaster's dashboard-module layout, its everyday-controls-first card anatomy, and much of what it expects a Klipper front end to expose all trace back to Mainsail and Fluidd — years of production use against real printers settled most of what a Moonraker client needs to get right, and Alabaster's own design docs were written against a survey of both. What's deliberately not carried over is their implementation: Alabaster is a from-scratch Vue 3 / Composition API codebase, not built on their Vue 2, class-component, Vuex, or Vuetify architecture.