Building UIs With Svelte

These guides cover TinyBase's Svelte-specific UI modules for building reactive user interfaces.

They start with the ui-svelte module's reactive functions and view components, move on to the browser-focused ui-svelte-dom module, and finish with Provider context patterns.

See also the Hello World (Svelte), Countries (Svelte), and UI Components (Svelte) demos.

Getting Started With ui-svelte

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

Using Reactive Functions

Every reactive function in the ui-svelte module returns a reactive object with a current property that automatically updates any part of your template that reads it when the underlying Store data changes. Read more.

Using Svelte Components

The view components in the ui-svelte module let you declaratively display parts of a Store. 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.

Using Context

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