v8.2.0

Svelte DOM Components

This release completes TinyBase's Svelte support with two new additions: the ui-svelte-dom module and the ui-svelte-inspector module.

The ui-svelte-dom module provides browser-ready Svelte components for rendering and editing TinyBase data as HTML tables. They mirror the React DOM components, but use Svelte component composition and props throughout:

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

  const store = createStore().setTable('pets', {
    fido: {species: 'dog', color: 'brown'},
    felix: {species: 'cat', color: 'black'},
  });
</script>

<TableInHtmlTable tableId="pets" {store} editable />

Svelte Inspector

Alongside the table components, the new ui-svelte-inspector module brings the TinyBase development inspector to Svelte apps too, making it easy to inspect and edit Stores, Indexes, Relationships, and Queries during development:

<script>
  import {createStore} from 'tinybase';
  import {Provider} from 'tinybase/ui-svelte';
  import {Inspector} from 'tinybase/ui-svelte-inspector';

  const store = createStore().setTable('pets', {
    fido: {species: 'dog'},
  });
</script>

<Provider {store}>
  <Inspector />
</Provider>

Read more in the Using Svelte DOM Components guide and the Inspecting Data guide.

New Demos

This release also adds a complete set of Svelte UI component demos, plus an Inspector demo, so you can see the new modules working across Stores, Indexes, Relationships, Queries, and editable views.

These demos intentionally mirror the React set where possible, making it easier to compare implementation patterns across frameworks.

There are no intended breaking changes in this release. If you spot any issues with the new Svelte DOM components or the Svelte inspector, please let us know!