A tinybase adapter for Svelte.
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.
First of all, you'll have to install the library:
npm i svelte-tinybase
pnpm i svelte-tinybase
yarn add svelte-tinybase
bun i svelte-tinybase
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.
The useTable
hook is used to always have the latest table data in a reactive way.
import { useTable } from "svelte-tinybase";
const tasks = useTable(store, "tasks");
tasks.value; // contains the latest table data. It's reactive.
The useRow
hook is used to always have the latest row data in a reactive way.
import { useRow } from "svelte-tinybase";
const task = useRow(store, "tasks", "taskId");
task.value; // contains the latest row data. It's reactive.
The useCell
hook is used to always have the latest cell data in a reactive way.
import { useCell } from "svelte-tinybase";
const title = useCell(store, "tasks", "taskId", "title");
title.value; // contains the latest cell data. It's reactive.
The useValues
hook is used to always have the latest store values in a reactive way.
import { useValues } from "svelte-tinybase";
const values = useValues(store);
values.value; // contains the latest store values. It's reactive.
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.
<input bind:value={values.value.title} />
Feel free to check out the demo on svelte-tinybase.polv.dev. Source is here
Inspired by s1adem4n (this comment)