Building UIs

These guides cover TinyBase's optional UI modules for building reactive user interfaces.

Most of this section focuses on the ui-react module, including hooks, components, React DOM helpers, and context. The Building UIs With Svelte guide covers the ui-svelte module and its Svelte 5 idioms, the Using Svelte DOM Components guide covers the ui-svelte-dom module, and the Inspecting Data guide covers both the React and Svelte inspector modules.

See also the Countries demo, the Todo App demos, and the Drawing demo.

Getting Started With ui-react

To build React-based user interfaces with TinyBase, you will need to install the ui-react module in addition to the main module, and, of course, React itself. Read more.

Using React Hooks

There are reactive hooks in the ui-react module for accessing every part of a Store, as well as more advanced things like the Metrics and Indexes objects. Read more.

Using React Components

The reactive components in the ui-react module let you declaratively display parts of a Store. Read more.

Using React DOM Components

The reactive components in the ui-react-dom module let you declaratively display parts of a Store in a web browser, where the ReactDOM module is available. Read more.

Using Context

The ui-react module includes a context provider that lets you avoid passing global objects down through your component hierarchy. Read more.

Building UIs With Svelte

This guide describes how to use the ui-svelte module to build reactive user interfaces in Svelte 5 applications. Read more.

Using Svelte DOM Components

The reactive components in the ui-svelte-dom module let you declaratively display parts of a Store in a web browser, where Svelte's DOM runtime is available. Read more.