v8.1

Svelte Support

This highly-anticipated release introduces the new ui-svelte module, bringing native Svelte 5 runes-based reactive bindings to TinyBase. The module provides reactive functions and view components for building reactive UIs without any additional state management.

Reactive functions return a reactive object backed by Svelte's reactivity. Any component that reads current from it will automatically re-render when the underlying TinyBase data changes:

<script>
  import {createStore} from 'tinybase';
  import {getCell} from 'tinybase/ui-svelte';

  const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  const color = getCell('pets', 'fido', 'color', store);
</script>

<p>Color: {color.current}</p>

The getCell function and the getValue function provide a writable current property that pairs naturally with Svelte's bind: directive for two-way data binding:

<script>
  import {getCell} from 'tinybase/ui-svelte';

  const color = getCell('pets', 'fido', 'color', store);
</script>

<input bind:value={color.current} />

All reactive functions accept reactive getter functions as parameters — the MaybeGetter type (T | (() => T)) — so passing () => rowId from a $state variable causes the function to reactively track which row it reads, without unmounting and remounting.

The module further includes a provider component and context helpers for sharing TinyBase objects across a component tree, and many built-in view components for assembling UIs directly from Store data.

Read more in the ui-svelte module documentation and the Building UIs With Svelte guide.

New Demos

To showcase the new Svelte support, we have created two new Svelte-specific demos: a Hello World (Svelte) demo and a Countries (Svelte) demo. Check them out to see the new module in action.

The create-tinybase CLI tool also now includes an option to create a Svelte demo project, so you can easily get started with Svelte and TinyBase in exactly the same way you can with React:

> npm create tinybase@latest

📦 Creating your project...

Breaking Changes

If you tried the ui-svelte module in earlier beta releases, there are some intentional breaking changes made to ensure the API is more idiomatic for Svelte. What was useX is now a reactive getX or hasX function, so for example useCell has become the getCell function and useHasCell has become the hasCell function. Context lookups also use getX, as with the getMetrics function, but those return TinyBase objects directly from Provider context rather than reactive current-based wrappers. Listener functions now use onX; so for example useCellListener has become the onCell function. The old useBindableCell and useBindableValue beta names have also gone away because the getCell function and getValue function expose the writable scalar accessors directly.

This release also contains a minor breaking change since v8.0. The tinybase/omni module no longer includes the ui-react module, ui-react-dom module, or ui-react-inspector module. Since the ui-svelte module exports many of the same names, including both in a single flat namespace would cause silent name collisions.

If you were importing React UI helpers from tinybase/omni, update your imports:

// Before
import {createStore, useCell, Provider} from 'tinybase/omni';

// After
import {createStore} from 'tinybase/omni';
import {useCell, Provider} from 'tinybase/ui-react';

(Sorry about that!)

We need your help

We hope you enjoy exploring this early new Svelte support. But we really need feedback on how it works and whether or not you find it easy and idiomatic to work with! Please let us know in the issues, discussions, or on social media. Thanks and good luck!