Tech Stack

Server

Technology	Version	Purpose
PHP	8.1	Backend API, page rendering
PostgreSQL	15	Primary database
Apache	2.4	Web server with mod_php
Nginx	1.18	Reverse proxy, SSL termination
Node.js	20.x	Build tools, VitePress docs
Stockfish	15	Chess engine

Frontend

Technology	Purpose
Vanilla JS	Desktop UI, window manager, all apps
CSS3	Custom properties, glassmorphism, animations
marked.js	Markdown rendering (v15.0.7)
chess.js	Chess logic (v1.4.0)

No Frontend Framework

Niuton intentionally uses vanilla JavaScript without frameworks like React or Vue on the server side. This keeps the system lightweight, fast, and dependency-free. Each app is a self-contained PHP/HTML/JS file loaded in an iframe.

Local Client

Technology	Version	Purpose
Tauri	2.0	Native desktop wrapper
React	18	Client UI framework
TypeScript	5.x	Type-safe client code
Rust	Latest	Tauri backend, file sync

Infrastructure

Component	Technology
Virtualization	Proxmox VE (LXC containers)
SSL	Let's Encrypt (certbot)
DNS	Wildcard CNAME via DynDNS
AI Providers	Anthropic, OpenAI, Google, LM Studio

CSS Component Library (Design System)

Niuton includes niuton-app.css, a built-in CSS component library used by all 23 apps for consistent styling. This ensures a unified, desktop-OS-level look and feel across the entire platform.

/* Available components */
.n-app          /* App container */
.n-toolbar      /* Top toolbar */
.n-sidebar      /* Side navigation */
.n-content      /* Main content area */
.n-btn          /* Buttons (glassmorphism base style) */
.n-btn-primary  /* Primary action button */
.n-btn-danger   /* Destructive action button */
.n-btn-success  /* Positive action button */
.n-btn-sm       /* Small button variant */
.n-btn-lg       /* Large button variant */
.n-btn-icon     /* Icon-only button */
.n-card         /* Card containers */
.n-input        /* Form inputs */
.n-list         /* List views */
.n-modal        /* Modal dialogs */
.n-badge        /* Status badges */
.n-tabs         /* Tab navigation */

Unified Button System

All apps use the n-btn class family instead of custom button styles. The base n-btn provides a glassmorphism/ghost appearance with hover and active states:

<button class="n-btn">Default</button>
<button class="n-btn n-btn-primary">Primary</button>
<button class="n-btn n-btn-danger">Delete</button>
<button class="n-btn n-btn-success">Confirm</button>
<button class="n-btn n-btn-sm">Small</button>
<button class="n-btn n-btn-icon"><svg>...</svg></button>

SVG Icon System

All UI icons use inline Feather-style SVGs for consistency. No emojis are used in buttons or UI elements:

<!-- Standard inline SVG icon format -->
<svg width="16" height="16" viewBox="0 0 24 24"
     fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round"
     stroke-linejoin="round">
  <path d="..."/>
</svg>

Icon sizing is handled automatically by the button class:

Button Size	Icon Size
.n-btn / .n-btn-icon	16x16px
.n-btn-sm	14x14px
.n-btn-lg	18x18px

Responsive Breakpoints

Breakpoint	Target	Behavior
1024px	Tablet	Reduced spacing
768px	Small tablet	Sidebar collapses to overlay
480px	Mobile	Stacked layout, touch targets

The responsive framework includes helper classes like .n-hide-mobile, .n-show-mobile, .n-stack-mobile, and .n-full-mobile.