Skip to content

Commit

Permalink
[electric-sql] Homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesgpearce
jamesgpearce committed Dec 14, 2023
1 parent 465b859 commit 0e1f25c
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 5 deletions.
2 changes: 1 addition & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!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"><link rel="preload" as="font" href="/fonts/icons.woff2" type="font/woff2" crossorigin="anonymous"><link rel="preload" as="font" href="/fonts/shantell.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://beta.tinybase.org/"><meta property="og:image" content="https://beta.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://beta.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://beta.tinybase.org/"><script src="/js/home.js"></script></head><body><header><a href="/"><img src="/favicon.svg" alt="TinyBase logo"><span>TinyBase <em title="4.6.0-beta.1">β</em></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 id="copy">Build blisteringly fast web apps that work both online and offline. Manage your state locally, synchronize it to the cloud when you need to, or even make it collaborative. But, most importantly... have fun building stuff again!</p></section><p><a href="/guides/releases/#v4-6"><em>NEW!</em> v4.6 release</a> <span id="one-with">&quot;The One With Electric SQL&quot;</span></p><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><ul><li>Manage <a href="#start-with-a-simple-key-value-store">key-value data</a>, <a href="#level-up-to-use-tabular-data">tabular data</a> - or both - with optional <a href="#apply-schemas-to-tables-values">schematization</a> to model your app&#x27;s data structures.</li><li><a href="#register-granular-listeners">Flexibly reactive</a> to reconciled updates, so you only spend rendering cycles on things that change.</li><li><a href="#build-complex-queries-with-tinyql">Powerful query engine</a> to select, join, filter, group, sort and paginate data - reactively - and without SQL.</li><li>Built-in <a href="#create-indexes-for-fast-lookups">indexing</a>, <a href="#define-metrics-and-aggregations">metric aggregation</a>, <a href="#model-table-relationships">tabular relationships</a> - and even an <a href="#set-checkpoints-for-an-undo-stack">undo stack</a> for your app state.</li><li>Create <a href="#type-definitions-orm-like-apis">type definitions &amp; ORM-like APIs</a>, from schema or inference. <a href="#an-inspector-for-your-data">Inspect your data</a> (<em>new!</em>) directly in the browser.</li><li>Easily <a href="#persist-to-storage-sqlite-crdts">sync your data</a> to browser <a href="/api/persister-browser">storage</a>, <a href="/api/persister-indexed-db/">IndexedDB</a>, <a href="/guides/schemas-and-persistence/database-persistence/">SQLite</a>, <a href="/guides/schemas-and-persistence/synchronizing-data/">CRDTs</a>, and (<em>new!</em>) <a href="/api/persister-partykit-client/">PartyKit</a>.</li><li>Optional <a href="#call-hooks-to-bind-to-data">bindings to React</a> and (<em>new!</em>) <a href="#pre-built-reactive-components">pre-built components</a> that let you easily build fully reactive user interfaces.</li><li>Tiny by name, tiny by nature: <a href="#did-we-say-tiny">5.0kB - 9.4kB</a>, no dependencies. <a href="#well-tested-and-documented">100% tested</a>, <a href="/guides/the-basics/getting-started/">fully documented</a>, and of course, <a href="https://github.com/tinyplex/tinybase">open source</a>!</li></ul><hr><section id="friends"><h2 id="tinybase-works-great-on-its-own-but-also-plays-well-with-friends">Tinybase works great on its own, but also plays well with friends!</h2><div><a href="/guides/building-uis/getting-started-with-ui-react"><img width="48" src="/react.svg"> React</a></div><div><a href="/api/persister-partykit-client"><img width="48" src="/partykit.svg"> PartyKit</a></div><div><a href="/guides/schemas-and-persistence/database-persistence"><img width="48" src="/expo.svg">Expo SQLite</a></div><div><a href="/guides/schemas-and-persistence/database-persistence"><img width="48" src="/electric.svg">ElectricSQL</a></div><div><a href="/guides/schemas-and-persistence/database-persistence"><img width="48" src="/sqlite.svg"> SQLite</a></div><div><a href="/api/persister-indexed-db/functions/creation/createindexeddbpersister"><img width="48" src="/indexeddb.svg"> IndexedDB</a></div><div><a href="/api/persister-yjs/functions/creation/createyjspersister"><img width="48" src="/yjs.svg"> YJS</a></div><div><a href="/api/persister-cr-sqlite-wasm"><img width="48" src="/crsqlite.png"> CR-SQLite</a></div><div><a href="/api/persister-automerge"><img width="48" src="/automerge.svg"> Automerge</a></div></section><hr><section id="follow"><a href="https://github.com/tinyplex/tinybase" target="_blank"><img src="https://img.shields.io/github/stars/tinyplex/tinybase?style=for-the-badge&amp;logo=GitHub&amp;logoColor=%23fff&amp;label=GitHub&amp;labelColor=%23d81b60&amp;color=%23333"> </a><a href="https://discord.com/invite/mGz3mevwP8" target="_blank"><img src="https://img.shields.io/discord/1027918215323590676?style=for-the-badge&amp;logo=discord&amp;logoColor=%23fff&amp;label=Discord&amp;labelColor=%233131e8&amp;color=%23333"> </a><a href="https://twitter.com/tinybasejs" target="_blank"><img src="https://img.shields.io/twitter/follow/tinybasejs?style=for-the-badge&amp;logo=x&amp;logoColor=%23fff&amp;label=Twitter&amp;labelColor=%23333&amp;color=%23333"></a><br><a href="https://github.com/tinyplex/tinybase/discussions" target="_blank"><img src="https://img.shields.io/github/discussions/tinyplex/tinybase?style=for-the-badge&amp;logo=GitHub&amp;logoColor=%23fff&amp;label=Ideas&amp;labelColor=%23d81b60&amp;color=%23333"> </a><a href="https://github.com/tinyplex/tinybase/issues" target="_blank"><img src="https://img.shields.io/github/issues/tinyplex/tinybase?style=for-the-badge&amp;logo=GitHub&amp;logoColor=%23fff&amp;label=Issues&amp;labelColor=%23d81b60&amp;color=%23333"> </a><a href="#well-tested-and-documented"><img src="https://img.shields.io/badge/Tests-100%25-green?style=for-the-badge&amp;logo=jest&amp;logoColor=%23fff&amp;color=%23333&amp;labelColor=%2387c305"> </a><a href="https://www.npmjs.com/package/tinybase/v/4.6.0-beta.1" target="_blank"><img src="https://img.shields.io/npm/v/tinybase?style=for-the-badge&amp;logo=npm&amp;logoColor=%23fff&amp;labelColor=%23bd0005&amp;color=%23333"></a></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>
<!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"><link rel="preload" as="font" href="/fonts/icons.woff2" type="font/woff2" crossorigin="anonymous"><link rel="preload" as="font" href="/fonts/shantell.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://beta.tinybase.org/"><meta property="og:image" content="https://beta.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://beta.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://beta.tinybase.org/"><script src="/js/home.js"></script></head><body><header><a href="/"><img src="/favicon.svg" alt="TinyBase logo"><span>TinyBase <em title="4.6.0-beta.1">β</em></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 id="copy">Build blisteringly fast web apps that work both online and offline. Manage your state locally, synchronize it to the cloud when you need to, or even make it collaborative. But, most importantly... have fun building stuff again!</p></section><p><a href="/guides/releases/#v4-6"><em>NEW!</em> v4.6 release</a> <span id="one-with">&quot;The One With ElectricSQL&quot;</span></p><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><ul><li>Manage <a href="#start-with-a-simple-key-value-store">key-value data</a>, <a href="#level-up-to-use-tabular-data">tabular data</a> - or both - with optional <a href="#apply-schemas-to-tables-values">schematization</a> to model your app&#x27;s data structures.</li><li><a href="#register-granular-listeners">Flexibly reactive</a> to reconciled updates, so you only spend rendering cycles on things that change.</li><li><a href="#build-complex-queries-with-tinyql">Powerful query engine</a> to select, join, filter, group, sort and paginate data - reactively - and without SQL.</li><li>Built-in <a href="#create-indexes-for-fast-lookups">indexing</a>, <a href="#define-metrics-and-aggregations">metric aggregation</a>, <a href="#model-table-relationships">tabular relationships</a> - and even an <a href="#set-checkpoints-for-an-undo-stack">undo stack</a> for your app state.</li><li>Create <a href="#type-definitions-orm-like-apis">type definitions &amp; ORM-like APIs</a>, from schema or inference. <a href="#an-inspector-for-your-data">Inspect your data</a> (<em>new!</em>) directly in the browser.</li><li>Easily <a href="#persist-to-storage-sqlite-crdts">sync your data</a> to browser <a href="/api/persister-browser">storage</a>, <a href="/api/persister-indexed-db/">IndexedDB</a>, <a href="/guides/schemas-and-persistence/database-persistence/">SQLite</a>, <a href="/guides/schemas-and-persistence/synchronizing-data/">CRDTs</a>; and (<em>new!</em>) <a href="/api/persister-partykit-client/">PartyKit</a> and <a href="https://electric-sql.com/">ElectricSQL</a>.</li><li>Optional <a href="#call-hooks-to-bind-to-data">bindings to React</a> and (<em>new!</em>) <a href="#pre-built-reactive-components">pre-built components</a> that let you easily build fully reactive user interfaces.</li><li>Tiny by name, tiny by nature: <a href="#did-we-say-tiny">5.0kB - 9.4kB</a>, no dependencies. <a href="#well-tested-and-documented">100% tested</a>, <a href="/guides/the-basics/getting-started/">fully documented</a>, and of course, <a href="https://github.com/tinyplex/tinybase">open source</a>!</li></ul><hr><section id="friends"><h2 id="tinybase-works-great-on-its-own-but-also-plays-well-with-friends">Tinybase works great on its own, but also plays well with friends!</h2><div><a href="/guides/building-uis/getting-started-with-ui-react"><img width="48" src="/react.svg"> React</a></div><div><a href="/api/persister-partykit-client"><img width="48" src="/partykit.svg"> PartyKit</a></div><div><a href="/guides/schemas-and-persistence/database-persistence"><img width="48" src="/expo.svg">Expo SQLite</a></div><div><a href="/guides/schemas-and-persistence/database-persistence"><img width="48" src="/electric.svg">ElectricSQL</a></div><div><a href="/guides/schemas-and-persistence/database-persistence"><img width="48" src="/sqlite.svg"> SQLite</a></div><div><a href="/api/persister-indexed-db/functions/creation/createindexeddbpersister"><img width="48" src="/indexeddb.svg"> IndexedDB</a></div><div><a href="/api/persister-yjs/functions/creation/createyjspersister"><img width="48" src="/yjs.svg"> YJS</a></div><div><a href="/api/persister-cr-sqlite-wasm"><img width="48" src="/crsqlite.png"> CR-SQLite</a></div><div><a href="/api/persister-automerge"><img width="48" src="/automerge.svg"> Automerge</a></div></section><hr><section id="follow"><a href="https://github.com/tinyplex/tinybase" target="_blank"><img src="https://img.shields.io/github/stars/tinyplex/tinybase?style=for-the-badge&amp;logo=GitHub&amp;logoColor=%23fff&amp;label=GitHub&amp;labelColor=%23d81b60&amp;color=%23333"> </a><a href="https://discord.com/invite/mGz3mevwP8" target="_blank"><img src="https://img.shields.io/discord/1027918215323590676?style=for-the-badge&amp;logo=discord&amp;logoColor=%23fff&amp;label=Discord&amp;labelColor=%233131e8&amp;color=%23333"> </a><a href="https://twitter.com/tinybasejs" target="_blank"><img src="https://img.shields.io/twitter/follow/tinybasejs?style=for-the-badge&amp;logo=x&amp;logoColor=%23fff&amp;label=Twitter&amp;labelColor=%23333&amp;color=%23333"></a><br><a href="https://github.com/tinyplex/tinybase/discussions" target="_blank"><img src="https://img.shields.io/github/discussions/tinyplex/tinybase?style=for-the-badge&amp;logo=GitHub&amp;logoColor=%23fff&amp;label=Ideas&amp;labelColor=%23d81b60&amp;color=%23333"> </a><a href="https://github.com/tinyplex/tinybase/issues" target="_blank"><img src="https://img.shields.io/github/issues/tinyplex/tinybase?style=for-the-badge&amp;logo=GitHub&amp;logoColor=%23fff&amp;label=Issues&amp;labelColor=%23d81b60&amp;color=%23333"> </a><a href="#well-tested-and-documented"><img src="https://img.shields.io/badge/Tests-100%25-green?style=for-the-badge&amp;logo=jest&amp;logoColor=%23fff&amp;color=%23333&amp;labelColor=%2387c305"> </a><a href="https://www.npmjs.com/package/tinybase/v/4.6.0-beta.1" target="_blank"><img src="https://img.shields.io/npm/v/tinybase?style=for-the-badge&amp;logo=npm&amp;logoColor=%23fff&amp;labelColor=%23bd0005&amp;color=%23333"></a></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>
<span class="punctuation">.</span><span class="function"><a href="/api/store/interfaces/store/store/methods/setter/setvalues/">setValues</a></span><span class="punctuation">(</span><span class="punctuation">{</span><span class="literal-property">employees</span><span class="operator">:</span> <span class="number">3</span><span class="punctuation">}</span><span class="punctuation">)</span>
<span class="punctuation">.</span><span class="function"><a href="/api/store/interfaces/store/store/methods/setter/setvalue/">setValue</a></span><span class="punctuation">(</span><span class="string">'open'</span><span class="punctuation">,</span> <span class="boolean">true</span><span class="punctuation">)</span><span class="punctuation">;</span>

Expand Down
Loading

0 comments on commit 0e1f25c

Please sign in to comment.