Minimalist model-driven UI toolkit for linked data resources.
@metreeca/tile provides specialised Preact components for working with linked data resources served by @metreeca/qest APIs.
- Model-Driven Data: resource models shared by client and server drive data exchanges and validation, cutting the boilerplate usually required by both
- Declarative Screens: JSX composes general-purpose widgets and layouts with specialised linked data components, such as resource and collection viewers, search facets and property editors
- Optional Design System: design tokens theme every component according to the platform light or dark scheme, and can be left out without breaking any of them
npm install @metreeca/tile # design system package, optional
npm install @metreeca/tile-<layer> # Preact package, one per component layerWarning
TypeScript consumers must use "moduleResolution": "nodenext"/"node16"/"bundler" in tsconfig.json.
The legacy "node" resolver is not supported.
Add a binding package for each component layer an app assembles its screens from. Bindings render with Preact and take it as a peer dependency: check the package README for what each one expects. The design system package is optional and styles whatever a binding renders.
| Package | Description |
|---|---|
| @metreeca/tile | Design system |
| @metreeca/tile-data | Contexts and hooks |
| @metreeca/tile-cell | Widgets and controls |
| @metreeca/tile-hive | Layouts and containers |
| @metreeca/tile-move | Movable items and the move lifecycle |
| @metreeca/tile-lens | Linked data views |
| @metreeca/tile-form | Linked data forms |
Note
Each package documents its own API in its README and API reference; for complete coverage, see the API reference.
- open an issue to report a problem or to suggest a new feature
- start a discussion to ask a how-to question or to share an idea
This project is licensed under the Apache 2.0 License – see LICENSE file for details.