TinyBase, a reactive data store & sync engine

#tinybase #opensource #char #ai

In this article, we review TinyBase. You will understand the following:

What is a TinyBase?
TinyBase usage in Char codebase.

What is TinyBase?

TinyBase is a reactive data store & sync engine.

It’s Reactive

TinyBase lets you listen to changes made to any part of your data. This means your app will be fast, since you only spend rendering cycles on things that change. The optional bindings to React and pre-built components let you easily build fully reactive UIs on top of TinyBase. You even get a built-in undo stack, and developer tools!

It’s Database-Like

Consumer app? Enterprise app? Or even a game? Model key-value data and tabular data with optional typed schematization, whatever its data structures. There are built-in indexing, metric aggregation, and tabular relationships APIs — and a powerful query engine to select, join, filter, and group data (reactively!) without SQL.

It Synchronizes

TinyBase has native CRDT support, meaning that you can deterministically synchronize and merge data across multiple sources, clients, and servers. And although TinyBase is an in-memory data store, you can easily persist your data to file, browser storage, IndexedDB, SQLite or PostgreSQL databases, and more.

It’s Built For A Local-First World

TinyBase works anywhere that JavaScript does, but it’s especially great for local-first apps: where data is stored locally on the user’s device and that can be run offline. It’s tiny by name, tiny by nature: just 5.5kB — 12.2kB and with no dependencies — yet 100% tested, fully documented, and of course, open source!

I copied the above info from tinybase.org

Below is a simple example, demonstrating how you’d use TinyBase in a Node application:

import {createStore} from 'tinybase';

const store = createStore();
store.setValue('v1', 'Hello');
store.setCell('t1', 'r1', 'c1', 'World');
console.log(store.getValue('v1') + ' ' + store.getCell('t1', 'r1', 'c1'));

TinyBase usage in Char codebase.

So I came across TinyBase in the Char codebase. I wrote an article about what Char is about. It is an AI notepad for meetings. There was a package named tinybase-utils

And this got me search for TinyBase across the char repository.

There’s 100 references, but really what we want to do is pick relevant examples:

char/packages/store/src/tinybase.ts

In this file I noticed there’s schemas defined:

import {
  calendarSchema,
  chatGroupSchema,
  chatMessageSchema,
  chatShortcutSchema,
  enhancedNoteSchema,
  eventSchema,
  generalSchema,
  humanSchema,
  mappingMentionSchema,
  mappingSessionParticipantSchema,
  mappingTagSessionSchema,
  memorySchema,
  organizationSchema,
  promptSchema,
  sessionSchema,
  tagSchema,
  templateSchema,
  transcriptSchema,
} from "./zod";

export const tableSchemaForTinybase = {
...

and that’s all it has, just schemas defined

char/apps/web/src/store/tinybase.tsx

I found another reference, this time it is apps workspace, used in the web. It has the following symbols defined.

exporting StoreProvider as shown below:

export function StoreProvider({ children }: { children: React.ReactNode }) {
  const store = useCreateStore(() =>
    createStore().setTablesSchema(TABLE_SCHEMA).setValuesSchema(VALUE_SCHEMA),
  );

  useProvideStore(STORE_ID, store);

  return <>{children}</>;
}

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com