</code></pre><p>This tool provides the following templates to get started with:</p><ul><li>Todos: a simple todo list app with support for adding, editing, and deleting tasks.</li><li>Chat: a real-time chat app with support for multiple rooms and message history.</li><li>Draw: a collaborative drawing app with support for multiple users and real-time updates.</li><li>Games: a turn-based tic-tac-toe game with computed game state and win detection.</li></ul><p>You can also configure these templates with different options, such as using TypeScript or JavaScript, adding persistence with SQLite or PGlite, and enabling synchronization with a remote server or Durable Objects.</p><h3 id="tinyhub">TinyHub</h3><p><a href="https://github.com/tinyplex/tinyhub">TinyHub</a> is a blazingly fast local-first GitHub client, built in public, using TinyBase, React, and GitHub OAuth. You can try it out <a href="https://tinyhub.org">here</a>.</p><h3 id="docs-search">Docs Search</h3><p>Even the search feature on this site is powered by TinyBase! The summaries of all the API documents and guides are loaded into a local <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a>, indexed in your browser, and bound to the UI with vanilla JavaScript. The code, if you're curious, is <a href="https://github.com/tinyplex/tinybase/blob/main/site/js/common/search.ts">here</a>.</p><h3 id="on-site-demos">On-site Demos</h3><p>For the main set of TinyBase demos on this site, we start with the obligatory '<a href="/demos/hello-world/">Hello World</a>' example, and then advance from there. Some demos have multiple versions which start simple and then gain additional functionality with subsequent iterations.</p><p>For a 'kitchen-sink' demo that shows TinyBase really being put through its paces, take a look at the <a href="/demos/drawing/">Drawing</a> demo.</p><p>This set of demos should grow over time, so keep checking back!</p><section class="s2" id="/demos/hello-world/" data-id="HW"><h2>Hello World</h2><p>These demos demonstrate the absolute basics of using TinyBase, with an obligatory 'Hello World' example. <a href="/demos/hello-world/">Read more</a>.</p><ul><li><a href="/demos/hello-world/hello-world-v1/">Hello World v1</a></li><li><a href="/demos/hello-world/hello-world-v2/">Hello World v2</a></li><li><a href="/demos/hello-world/hello-world-v3/">Hello World v3</a></li><li><a href="/demos/hello-world/hello-world-v4/">Hello World v4</a></li></ul></section><section class="s2" id="/demos/rolling-dice/" data-id="RD"><h2>Rolling Dice</h2><p>These demos demonstrate metrics (such as average dice rolls) and indexes (such as grouping multiple dice rolls). <a href="/demos/rolling-dice/">Read more</a>.</p><ul><li><a href="/demos/rolling-dice/averaging-dice-rolls/">Averaging Dice Rolls</a></li><li><a href="/demos/rolling-dice/grouping-dice-rolls/">Grouping Dice Rolls</a></li></ul></section><section class="s2" id="/demos/countries/" data-id="C2"><h2>Countries</h2><p>In this demo, we build a simple app that uses React and a simple <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> object to load and display country data. <a href="/demos/countries/">Read more</a>.</p></section><section class="s2" id="/demos/todo-app/" data-id="TA"><h2>Todo App</h2><p>These demos demonstrate how to build a classic 'Todo' app, with successive levels of complexity. <a href="/demos/todo-app/">Read more</a>.</p><ul><li><a href="/demos/todo-app/todo-app-v1-the-basics/">Todo App v1 (the basics)</a></li><li><a href="/demos/todo-app/todo-app-v2-indexes/">Todo App v2 (indexes)</a></li><li><a href="/demos/todo-app/todo-app-v3-persistence/">Todo App v3 (persistence)</a></li><li><a href="/demos/todo-app/todo-app-v4-metrics/">Todo App v4 (metrics)</a></li><li><a href="/demos/todo-app/todo-app-v5-checkpoints/">Todo App v5 (checkpoints)</a></li><li><a href="/demos/todo-app/todo-app-v6-collaboration/">Todo App v6 (collaboration)</a></li></ul></section><section class="s2" id="/demos/drawing/" data-id="D3"><h2>Drawing</h2><p>In this demo, we build a more complex drawing app, using many of the features of TinyBase together. <a href="/demos/drawing/">Read more</a>.</p></section><section class="s2" id="/demos/city-database/" data-id="CD"><h2>City Database</h2><p>In this demo, we build an app that loads over 140,000 records to push the size and performance limits of TinyBase. <a href="/demos/city-database/">Read more</a>.</p></section><section class="s2" id="/demos/car-analysis/" data-id="CA"><h2>Car Analysis</h2><p>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. <a href="/demos/car-analysis/">Read more</a>.</p></section><section class="s2" id="/demos/movie-database/" data-id="MD"><h2>Movie Database</h2><p>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. <a href="/demos/movie-database/">Read more</a>.</p></section><section class="s2" id="/demos/word-frequencies/" data-id="WF"><h2>Word Frequencies</h2><p>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 <a href="/api/store/type-aliases/store/row/"><code>Row</code></a> in multiple <a href="/api/indexes/type-aliases/concept/slice/"><code>Slice</code></a> arrays of an <a href="/api/indexes/type-aliases/concept/index/"><code>Index</code></a>. <a href="/demos/word-frequencies/">Read more</a>.</p></section><section class="s2" id="/demos/ui-components/" data-id="UIC"><h2>UI Components</h2><p>In this set of demos, we use a <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> containing some sample data to showcase the UI components in the <a href="/api/ui-react-dom/"><code>ui-react-dom</code></a> module. <a href="/demos/ui-components/">Read more</a>.</p><ul><li><a href="/demos/ui-components/valuesinhtmltable/"><ValuesInHtmlTable /></a></li><li><a href="/demos/ui-components/tableinhtmltable/"><TableInHtmlTable /></a></li><li><a href="/demos/ui-components/sortedtableinhtmltable/"><SortedTableInHtmlTable /></a></li><li><a href="/demos/ui-components/sliceinhtmltable/"><SliceInHtmlTable /></a></li><li><a href="/demos/ui-components/relationshipinhtmltable/"><RelationshipInHtmlTable /></a></li><li><a href="/demos/ui-components/resulttableinhtmltable/"><ResultTableInHtmlTable /></a></li><li><a href="/demos/ui-components/resultsortedtableinhtmltable/"><ResultSortedTableInHtmlTable /></a></li><li><a href="/demos/ui-components/editablevalueview/"><EditableValueView /></a></li><li><a href="/demos/ui-components/editablecellview/"><EditableCellView /></a></li><li><a href="/demos/ui-components/inspector/"><Inspector /></a></li></ul></section></section>
0 commit comments