svelte-tinybase

A tinybase adapter for Svelte.

Introduction

svelte-tinybase is a library that allows you to use Tinybase with Svelte 5 in a reactive way.

Tinybase is a lightweight database for the web. It's a simple, yet powerful tool for building web applications. It's really incredible, honestly. Only problem is that they only provide first-class support for React.

So, this library is my attempt to bring the power of Tinybase to Svelte 5.

Installation

First of all, you'll have to install the library:

- npm: npm i svelte-tinybase
- pnpm: pnpm i svelte-tinybase
- yarn: yarn add svelte-tinybase
- bun: bun i svelte-tinybase

Usage

To use svelte-tinybase, you'll first need to have a Tinybase store initialized. You can check tinybase's documentation for more information.

> You'll likely want to also explore other topics, like schemas and persistance.
>
> svelte-tinybase takes full advantage of schemas.

Once you have your store, you can start using the hooks svelte-tinybase provides.

$3

The useTable hook is used to always have the latest table data in a reactive way.

``ts
import { useTable } from "svelte-tinybase";

const tasks = useTable(store, "tasks");

tasks.value; // contains the latest table data. It's reactive.
`

$3

The useRow hook is used to always have the latest row data in a reactive way.

`ts
import { useRow } from "svelte-tinybase";

const task = useRow(store, "tasks", "taskId");

task.value; // contains the latest row data. It's reactive.
`

$3

The useCell hook is used to always have the latest cell data in a reactive way.

`ts
import { useCell } from "svelte-tinybase";

const title = useCell(store, "tasks", "taskId", "title");

title.value; // contains the latest cell data. It's reactive.
`

$3

The useValues hook is used to always have the latest store values in a reactive way.

`ts
import { useValues } from "svelte-tinybase";

const values = useValues(store);

values.value; // contains the latest store values. It's reactive.
`

Reactiveness

The value will update when the data changes, which will render the new value in the UI. The value is also reactive to changes, and even bindable.

`svelte

``

Examples & Demo

Feel free to check out the demo on svelte-tinybase.polv.dev. Source is here

Inspired by

Inspired by s1adem4n (this comment)