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.

useTable

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.

useRow

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.

useCell

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.

useValues

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.

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.

<input bind:value={values.value.title} />

Examples & Demo

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

Inspired by

Inspired by s1adem4n (this comment)