🚧 Glyx is pre-release software. APIs may change before v1.0. Get started →
Documentation
Roadmap
Developer Tools

Developer Tools

Glyx ships with a practical set of development tools today, with a more integrated DevTools panel on the roadmap.


What exists today

Dev overlay (Ctrl+Shift+D)

A lightweight heads-up display rendered directly onto the window in dev mode. Shows frame timing, memory, and reload status at a glance. Currently being slimmed down — the next version will show three concise lines (FPS, timing, memory) plus a minimal frame bar, with a second press toggling verbose GPU/cache detail.

Hot module replacement

Sub-100ms edit-to-screen. Bun rebuilds the JS bundle on every file save; the Glyx runtime re-evaluates in place without restarting the native window. See Hot Reload.

JS inspector (CDP)

glyx dev --inspect opens a Chrome DevTools Protocol endpoint on port 9229. Attach any CDP-compatible debugger — Chrome DevTools, VS Code, WebStorm — to set breakpoints, inspect the V8 heap, and profile JS execution. See Debugging.

Performance API

perf.snapshot() and perf.onBudgetExceeded() give you programmatic access to frame timing, JS time, layout time, GPU time, and memory usage from within your app. Works in both dev and production. See perf API.

Build check

glyx build --check-performance validates frame budget compliance as part of CI. See CLI reference.

@glyx-dev/testing

A test harness for unit-testing Glyx components and backend logic without a live window. Provides stubs for all native bindings so tests run in Bun's test runner with no native dependencies. See @glyx-dev/testing.


What's coming

DevTools panel

Status: Planned. Design phase.

A floating panel (toggled with Ctrl+Shift+D) that replaces the current overlay with a proper tabbed interface:

TabContent
PerformanceFrame timeline, JS/layout/GPU breakdown, budget violations
MemoryV8 heap, RSS, GPU buffers/textures — live graph
ElementsLive node tree with layout bounds inspection
LogsStructured log viewer with level filtering
NetworkPending fetch/WebSocket calls

The Elements tab requires a node-tree introspection bridge (exposing js_nodes from glyx-core to JS via a binding) — the groundwork is laid but not yet wired.

Error overlay improvements

Build errors currently show as a full-screen red overlay. The planned improvement shows the error inline with a file link that opens in your editor (via EDITOR env var or the VS Code extension).

If you have specific DevTools workflows you'd like supported, share them in GitHub Discussions (opens in a new tab).