Andrea Mancuso

Data-heavy desktop applications often need maps — GPS tracking dashboards, IoT fleet monitors, logistics tools, geospatial analysis. In web apps, you'd reach for Leaflet or Mapbox GL. But XFrames doesn't run in a browser DOM, so those libraries aren't an option.

MapView solves this by rendering OpenStreetMap raster tiles directly through ImGui's draw list. Each visible 256x256 tile is fetched, decoded, uploaded to the GPU, and drawn with ImDrawList::AddImage(). The same React component works on desktop (OpenGL) and in the browser (WebGPU), with smooth panning, scroll-wheel zoom, and overlay support for markers, polylines, and accuracy circles.

You write <XFrames.Button label="Click me" /> and a GPU-rendered button appears on screen. No DOM, no CSS, no browser engine. What happens in between?

XFrames bridges two very different worlds: React's declarative component model and Dear ImGui's immediate-mode rendering. This post traces the full path from JSX to pixels.

Building graphical user interfaces (GUIs) has always been a balancing act—developers want performance, flexibility, and simplicity, yet most tools force compromises. That's why I created XFrames, a library designed to address these challenges and empower developers to build high-performance, cross-platform applications without relying on traditional web engines.