Overview & Architecture
Olli converts data visualizations and diagrams into accessible, keyboard-navigable tree views for screen reader users. This section covers the architecture and developer API. If you're a screen reader user, see Using Olli instead.
Data flow
- An adapter converts an external format (primarily Vega-Lite) into Olli's own spec type.
- A lowerer (part of a domain) converts the spec into a hypergraph — a directed, multi-parent graph.
- The navigation runtime manages focus, selection, expansion state, and builds a nav tree from the hypergraph.
- The renderer produces an accessible ARIA tree view from the nav tree.
Packages
| Package | Purpose |
|---|---|
olli | Vanilla JS entry points (olliVis, olliDiagram, olli) and the OlliHandle API |
olli-core | Hypergraph data model, navigation runtime, description framework |
olli-vis | Visualization domain: spec types, lowerer, tokens, dialogs, keybindings, presets |
olli-diagram | Diagram domain: spec types, lowerer, tokens |
olli-adapters | Adapters for Vega-Lite, Bluefish, and other visualization formats |
olli-render-solid | Solid.js ARIA tree renderer, keyboard handling, dialog system |
Where to go next
- Integrate Olli into a page: Start with the Quickstart, then read Entry Points and OlliHandle.
- Customize the look: See Theming & CSS.
- Understand the spec types: See OlliVisSpec for charts or DiagramSpec for diagrams.
- Learn the internals: Read Hypergraph, Navigation Tree, and Navigation Runtime.
- Customize descriptions: See Tokens, Recipes, and Presets.
- Build a new domain: Start with Domain Architecture, then follow Creating a Domain.