-<!DOCTYPE html><html lang="en"><head><link rel="dns-prefetch" href="https://www.googletagmanager.com/"><link href="https://www.googletagmanager.com/gtag/js?id=G-D1MGR8VRWJ" rel="preload" as="script"><link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin="anonymous"><link rel="preload" as="font" href="/fonts/inconsolata.woff2" type="font/woff2" crossorigin="anonymous"><title>TinyBase</title><meta name="description" content="The reactive data store for local-first apps."><meta property="og:type" content="website"><meta property="og:title" content="TinyBase"><meta property="og:description" content="The reactive data store for local-first apps."><meta property="og:url" content="https://tinybase.org/"><meta property="og:image" content="https://tinybase.org/favicon_pad.png"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="TinyBase"><meta name="twitter:description" content="The reactive data store for local-first apps."><meta name="twitter:site" content="@tinybasejs"><meta name="twitter:image" content="https://tinybase.org/favicon_pad.png"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="stylesheet" href="/css/index.css"><link rel="canonical" href="https://tinybase.org/"><script src="/js/home.js"></script></head><body><header><a href="/"><img src="/favicon.svg" alt="TinyBase logo"><span>TinyBase</span></a><nav><ul><li><a href="/guides/">Guides</a></li><li><a href="/demos/">Demos</a></li><li><a href="/api/">API</a></li><li><a href="https://github.com/tinyplex/tinybase">GitHub</a></li></ul></nav><span id="dark"></span></header><main><article id="home"><em><img src="/favicon.svg" alt="Large TinyBase logo" width="100%" height="100%"></em><section id="hero"><h2 id="the-reactive-data-store-for-local-first-apps">The <em>reactive</em> data store for <span>local-first apps</span>.</h2><p>Modern apps deserve better. Why trade reactive user experiences to be able to use relational data? Why sacrifice store features for bundle size? And why should the cloud do all the work <a href="https://localfirstweb.dev/" target="_blank">anyway</a>?</p><p><em>TinyBase is a smart new way to structure your local app data:</em></p><ul><li>Manage <a href="#start-with-a-simple-key-value-store">key-value data</a> (<em>new!</em>), <a href="#level-up-to-use-tabular-data">tabular data</a> - or both - with optional <a href="#apply-schemas-to-tables-and-values">schematization</a> to model it.</li><li><a href="#register-listeners-at-any-granularity">Flexibly reactive</a> to reconciled updates, so your UI only spends cycles on the data that changes.</li><li><a href="#build-complex-queries-with-tinyql">Powerful query engine</a> to select, join, filter, group, sort and paginate data - reactively.</li><li><a href="#create-indexes-for-fast-lookups">Indexing</a>, <a href="#define-metrics-and-aggregations">metrics</a>, <a href="#configure-relationships-between-tables">relationships</a> - and even an <a href="#use-checkpoints-for-an-easy-undo-stack">undo stack</a> for your app state! - out of the box.</li><li>Easily <a href="#persist-data-to-browser-file-or-server">sync your data</a> to local or remote storage, and use <a href="#call-hooks-to-bind-to-data">idiomatic bindings</a> to your UI.</li><li><a href="#type-definitions-orm-like-apis">Type definitions & ORM-like APIs</a> (<em>new!</em>), based on a schema or inferred from actual data.</li></ul><p><em>Tiny by name, tiny by nature</em>, TinyBase only costs <a href="#did-we-say-tiny">4.2kB - 8.7kB</a> when compressed, and has zero dependencies. And of course it's <a href="#well-tested-and-documented">well tested</a>, <a href="/guides/the-basics/getting-started/">fully documented</a>, and <a href="https://github.com/tinyplex/tinybase">open source</a>. Other <a href="/guides/faq/">FAQs</a>?</p></section><p><a id="new" href="/guides/releases/#v3-1"><em>NEW!</em> v3.1 release</a></p><hr><p><a class="start" href="/guides/the-basics/getting-started/">Get started</a></p><p><a href="/demos/">Try the demos</a></p><p><a href="/api/store/interfaces/store/store/">Read the docs</a></p><hr><section><h3 id="proud-to-be-sponsored-by">Proud to be sponsored by:</h3><p><a href="https://github.com/expo" target="_blank"><img title="expo" src="https://github.com/expo.png?size=48" width="48" height="48"></a><a href="https://github.com/WonderPanda" target="_blank"><img title="WonderPanda" src="https://github.com/WonderPanda.png?size=48" width="48" height="48"></a><a href="https://github.com/arpitBhalla" target="_blank"><img title="arpitBhalla" src="https://github.com/arpitBhalla.png?size=48" width="48" height="48"></a></p></section><section><h3 id="excited-to-be-used-by">Excited to be used by:</h3><p><a href="https://github.com/brentvatne" target="_blank"><img title="brentvatne" src="https://github.com/brentvatne.png?size=48" width="48" height="48"></a><a href="https://github.com/circadian-risk" target="_blank"><img title="circadian-risk" src="https://github.com/circadian-risk.png?size=48" width="48" height="48"></a><a href="https://github.com/WonderPanda" target="_blank"><img title="WonderPanda" src="https://github.com/WonderPanda.png?size=48" width="48" height="48"></a><a href="https://github.com/miking-the-viking" target="_blank"><img title="miking-the-viking" src="https://github.com/miking-the-viking.png?size=48" width="48" height="48"></a><a href="https://github.com/cubecull" target="_blank"><img title="cubecull" src="https://github.com/cubecull.png?size=48" width="48" height="48"></a><a href="https://github.com/Apocalypsor" target="_blank"><img title="Apocalypsor" src="https://github.com/Apocalypsor.png?size=48" width="48" height="48"></a><a href="https://github.com/uptonking" target="_blank"><img title="uptonking" src="https://github.com/uptonking.png?size=48" width="48" height="48"></a><a href="https://github.com/erwinkn" target="_blank"><img title="erwinkn" src="https://github.com/erwinkn.png?size=48" width="48" height="48"></a><a href="https://github.com/Kayoo-asso" target="_blank"><img title="Kayoo-asso" src="https://github.com/Kayoo-asso.png?size=48" width="48" height="48"></a><a href="https://github.com/shaneosullivan" target="_blank"><img title="shaneosullivan" src="https://github.com/shaneosullivan.png?size=48" width="48" height="48"></a><a href="https://github.com/generates" target="_blank"><img title="generates" src="https://github.com/generates.png?size=48" width="48" height="48"></a><a href="https://github.com/flaming-codes" target="_blank"><img title="flaming-codes" src="https://github.com/flaming-codes.png?size=48" width="48" height="48"></a><a href="https://github.com/jaysc" target="_blank"><img title="jaysc" src="https://github.com/jaysc.png?size=48" width="48" height="48"></a><a href="https://github.com/kotofurumiya" target="_blank"><img title="kotofurumiya" src="https://github.com/kotofurumiya.png?size=48" width="48" height="48"></a></p></section><hr><section><h2 id="start-with-a-simple-key-value-store">Start with a simple key-value store.</h2><p>Creating a <a href="/api/store/interfaces/store/store/"><code>Store</code></a> requires just a simple call to the <a href="/api/store/functions/creation/createstore/"><code>createStore</code></a> function. Once you have one, you can easily set <a href="/api/store/type-aliases/store/values/"><code>Values</code></a> in it by unique <a href="/api/common/type-aliases/identity/id/"><code>Id</code></a>. And of course you can easily get them back out again.</p><p>Read more about using keyed value data in <a href="/guides/the-basics/">The Basics</a> guide.</p></section><pre><code><span class="keyword">const</span> store <span class="operator">=</span> <span class="function"><a href="/api/store/functions/creation/createstore/">createStore</a></span><span class="punctuation">(</span><span class="punctuation">)</span>
0 commit comments