SkyGraph
In developmentHeadless UI Library
Reactive state engine and a set of UI components for React. DataGrid with virtualization, Tree, Form, Calendar, Graph — headless core + framework wrappers.
Key features
- Headless architecture: core separated from rendering
- 7 engines (Form, Table, Tree, Virtual, Graph, Calendar, Core)
- Middleware support (logger, persistence, validation, history)
- Multi-framework ready (React already, Vue/Solid possible)
Architecture
The headless architecture separates logic from rendering: all business logic lives in the core (signals, effects, reducers), and React components are thin wrappers that subscribe to state and draw the UI. This allows behavior tests without DOM, reuse of the core in Vue/Solid, and replacement of the renderer without rewriting the logic.
7 independent engines cover typical UI tasks: CoreEngine (shared event bus, middleware, persistence), FormEngine (validation, dirty/touched, async validation), TableEngine (sorting, filtering, selection, virtualization), TreeEngine (expansion, drag-drop, lazy loading), VirtualEngine (virtualization for Table/List), GraphEngine (nodes, edges, layout), CalendarEngine (date math, ranges, timezones).
The reactive runtime is similar to Solid: signal/effect/computed without object proxying and without VirtualDOM. Subscriptions are precise — only what depends on the changed signal updates. This delivers a stable 60 fps on a DataGrid with 100k+ rows.
The middleware layer (logger, persistence, validation, history) plugs in at the Core level and works uniformly across all engines. Persistence serializes state to localStorage/IndexedDB, history provides undo/redo, logger writes events for debugging.
SkyGraph has an interactive demo: a DataGrid with 100k rows, a Tree with drag-drop, a Form with conditional fields, a Graph with layout algorithms. All on the headless core, with no server logic.
Live Demo