Overview & Architecture
Umwelt is a specification-driven system for multimodal data representations. A single UmweltSpec describes a dataset, its fields, a key, and a set of visual and audio units; from it, Umwelt renders three coordinated views — a visualization, a keyboard-navigable textual structure, and a sonification. This section covers the developer API and the spec format. If you want to author representations interactively, see Using Umwelt and the editor.
Data flow
- A spec arrives from the editor, a share URL, or your own code, and its data source is resolved (embedded values, a URL, or a built-in example dataset).
- The visual units are compiled to a Vega-Lite specification and rendered as an interactive chart.
- The spec's structure is converted to an Olli spec and rendered as an accessible navigation tree.
- The audio units drive a Tone.js engine that plays the data in traversal order.
Selections propagate between the views through the spec's key: navigating the tree highlights marks in the chart, and brushing the chart selects in the tree.
Packages
| Package | Purpose |
|---|---|
umwelt-js | Framework-agnostic embeddable viewer: createViewer(spec, container) |
umwelt-solid | SolidJS implementation of the editor and viewer; deployed as the hosted editor |
@umwelt-data/umwelt-utils | Shared utilities (data parsing, predicates, descriptions, Vega-Lite bridge) used by Umwelt and Olli |
olli | Accessible tree-navigation rendering for the textual structure |
Where to go next
- Embed the viewer in a page: Start with the Quickstart, then read the Viewer API.
- Generate specs programmatically: Read UmweltSpec and the pages on data, fields, visual units, and audio units.
- Link into the editor: See Editor Share URLs to construct links that open the editor with a spec preloaded.
- See working specs: Browse the gallery — every example shows its spec and links into the editor.