uinspy

uinspy — you eye spy

A single-file UI inspector for LVGL runtime state.

Drop a JSON dump from your LVGL device and get an interactive dashboard: object trees, 3D exploded view, animations, timers, input devices, image caches, and more — all in one self-contained HTML file with zero dependencies.

Features

• 📂 Drag & drop JSON or embed data at build time
• 🌲 Recursive object tree with click-to-select
• 🧊 3D exploded view with rotation, zoom, pan, layer toggle
• 📊 Section panels: displays, animations, timers, input devices, groups, draw units/tasks, image/header caches, decoders, subjects, FS drivers
• 🎨 Three themes: dark (Catppuccin Mocha), light (Catppuccin Latte), cyber (neon)
• 🔍 Live search filter across all panels
• 📦 Single HTML file output (~70 KB minified), no server needed

Quick Start

bun install
bun run build
open dist/uinspy.html

To embed device data at build time:

python3 -c "
html = open('dist/uinspy.html').read()
data = open('your_dump.json').read()
print(html.replace('{{JSON_DATA}}', data))
" > inspector.html

Development

bun run dev       # Generate CSS + start dev server at localhost:3000
bun run build     # Production build → dist/

Build Pipeline

graph LR
  subgraph "Bun.build (uiPlugin)"
    A["src/*.ts"] --> B["html`` → DOM calls"]
    A --> C["css`` → scopeCSS → collected"]
    A --> D["//@ component() → define"]
  end

  B & D --> JS["JS bundle"]
  E["src/app.css"] --> TW
  C --> TW["@tailwindcss/node<br/>compile()"]
  TW --> CSS["CSS bundle<br/>@theme + @apply + @utility"]

  JS & CSS --> HTML["dist/uinspy.html<br/>single file ~70KB"]

Loading

License

MIT