Demos
This is a selection of demos that show how TinyBase can be used in real-world applications.
TinyHub
TinyHub is a local-first GitHub client, built in public, using TinyBase, React, and GitHub OAuth. You can try it out here.
TinyRooms
TinyRooms is a local-first app demo, using TinyBase, PartyKit, and optional GitHub OAuth. You can try it out here.
Vite Templates
You can also use Vite to start simple demo apps of your own. We provide the following templates to get started with:
| Template | Language | React | Plus |
|---|---|---|---|
| vite-tinybase | JavaScript | No | |
| vite-tinybase-ts | TypeScript | No | |
| vite-tinybase-react | JavaScript | Yes | |
| vite-tinybase-ts-react | TypeScript | Yes | |
| vite-tinybase-ts-react-sync | TypeScript | Yes | Synchronization |
| vite-tinybase-ts-react-crsqlite | TypeScript | Yes | CR-SQLite |
| tinybase-ts-react-partykit | TypeScript | Yes | PartyKit |
| tinybase-ts-react-electricsql | TypeScript | Yes | ElectricSQL |
On-site Demos
For the main set of TinyBase demos on this site, we start with the obligatory 'Hello World' example, and then advance from there. Some demos have multiple versions which start simple and then gain additional functionality with subsequent iterations.
For a 'kitchen-sink' demo that shows TinyBase really being put through its paces, take a look at the Drawing demo.
This set of demos should grow over time, so keep checking back!
Hello World
These demos demonstrate the absolute basics of using TinyBase, with an obligatory 'Hello World' example.
Rolling Dice
These demos demonstrate metrics (such as average dice rolls) and indexes (such as grouping multiple dice rolls).
Countries
In this demo, we build a simple app that uses React and a simple Store object to load and display country data.
Todo App
These demos demonstrate how to build a classic 'Todo' app, with successive levels of complexity.
Drawing
In this demo, we build a more complex drawing app, using many of the features of TinyBase together.
City Database
In this demo, we build an app that loads over 140,000 records to push the size and performance limits of TinyBase.
Car Analysis
In this demo, we build an app that showcases the query capabilities of TinyBase v2.0, grouping and sorting dimensional data for lightweight analytical usage.
Movie Database
In this demo, we build an app that showcases the relational query capabilities of TinyBase v2.0, joining together information about movies, directors, and actors.
Word Frequencies
In this demo, we load the list of the 10,000 most common words in English, index them for a fast search experience, and showcase TinyBase v2.1's ability to register a Row in multiple Slice arrays of an Index.
UI Components
In this set of demos, we use a Store containing some sample data to showcase the UI components in the ui-react-dom module.