Calculator

A compact desktop calculator used for exercising Glyx's native (Rust + JS) toolchain. It features a custom frameless title bar, a Catppuccin color theme, standard and scientific keypads, a live expression bar, and a scrollable history panel.

Mode: Native (cargo run via glyx dev — compiles the Rust host). Demonstrates: native build, glyxDraggable title bar, grid layout, theming, dialog

Run it

cd examples/calculator
glyx dev

Features

• Standard (+, −, ×, ÷, %, ←, C) and scientific (sin, cos, tan, log, ln, √, xⁿ, parentheses) modes
• Frameless window with a custom draggable title bar (glyxDraggable)
• Catppuccin pastel palette with automatic dark-on-light label contrast
• Live expression bar showing the in-progress calculation
• Scrollable history panel (last 50 calculations) with a result modal
• Responsive button grid that reflows between standard and scientific layouts

Key code

Calculator state machine

function calc(state, key) {
  if (key === 'C') return { disp: '0', prev: null, op: null, wait: false, expr: '' };
  if (key === '=') {
    if (!state.op) return state;
    const result = compute(state.prev, state.disp, state.op);
    return { disp: String(result), prev: null, op: null, wait: true, expr: '', lastResult: result };
  }
  // ... digits, operators, backspace, decimal
}

Frameless draggable title bar

<View glyxDraggable style={{ backgroundColor: C.surfaceAlt, borderRadius: 8, ... }}>
  <Text>Calculator</Text>
  {/* minimize / mode / close controls */}
</View>

Source

Browse the full source on GitHub: glyx-dev/glyx · examples/calculator (opens in a new tab)

glyx.config.json

{
  "window": {
    "title": "Calculator", "width": 320, "height": 480,
    "decorations": false, "renderMode": "skia", "background": "#1e1e2e"
  },
  "capabilities": { "fs": { "read": ["**"], "write": ["**"] }, "dialog": true },
  "dev": { "entry": "js/app.jsx", "output": "js/dist/app.js", "watch": ["js"] }
}