create-tinybase 0.1.5 → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) James Pearce, 2025 -
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,227 @@
+# create-tinybase
+
+A CLI tool to scaffold a new TinyBase application with full synchronization and local-first capabilities.
+
+## Usage
+
+```bash
+npm init tinybase
+```
+
+This will prompt you with questions to configure your new TinyBase app:
+
+- **Project name** - Name of your project directory
+- **Language** - TypeScript or JavaScript
+- **Framework** - React or Vanilla JS
+- **App type** - Todo app, Chat app, Drawing app, or Tic-tac-toe game
+- **Store schemas** - TypeScript type safety for stores (TypeScript only)
+- **Synchronization** - Enable real-time sync between clients
+- **Server code** - Include Node.js or Cloudflare Durable Objects server
+- **Prettier** - Include Prettier for code formatting
+- **ESLint** - Include ESLint for code linting
+
+After creating your project:
+
+```bash
+cd my-tinybase-app/client
+npm install
+npm run dev
+```
+
+If you included server code:
+
+```bash
+# In a separate terminal
+cd my-tinybase-app/server
+npm install
+npm run dev
+```
+
+Your app will be available at `http://localhost:5173`
+
+## Features
+
+- ⚡ **Fast Setup** - Get started in seconds with Vite
+- 🔄 **Real-time Sync** - Built-in synchronization support
+- 🎨 **Four Demo Apps** - Learn from complete examples
+- 📦 **Zero Config** - Works out of the box
+- 🔧 **Fully Customizable** - Modify templates to your needs
+- 🌐 **Local-First** - Offline-capable by default
+- 🔐 **Type-Safe** - Optional TypeScript schemas
+
+## Configuration Guide
+
+### Language Choice
+
+**TypeScript** provides full type safety with:
+
+- Typed store schemas (optional)
+- IntelliSense support for TinyBase APIs
+- Compile-time error checking
+- Better IDE integration
+
+**JavaScript** offers:
+
+- Faster setup with no transpilation step
+- Simpler learning curve
+- Still fully functional with TinyBase
+
+### Framework Choice
+
+**React** provides:
+
+- Component-based architecture
+- React hooks for TinyBase stores
+- Automatic re-rendering on store updates
+- Full ecosystem support
+
+**Vanilla JS** offers:
+
+- No framework dependencies
+- Smaller bundle size
+- Direct DOM manipulation
+- Manual listener-based updates
+
+### App Types
+
+#### Todo App
+
+![Todo App](screenshots/todos.png)
+
+- Task list with add/complete/delete
+- Single store for todos
+- Demonstrates basic CRUD operations
+- Perfect starter example
+
+#### Chat App
+
+![Chat App](screenshots/chat.png)
+
+- Multi-user messaging interface
+- Dual stores: settings + messages
+- Username configuration
+- Real-time message sync
+
+#### Drawing App
+
+![Drawing App](screenshots/drawing.png)
+
+- Collaborative drawing canvas
+- Brush size and color controls
+- Dual stores: settings + canvas
+- Optimized point-based stroke storage
+
+#### Tic-tac-toe Game
+
+![Tic-tac-toe Game](screenshots/game.png)
+
+- Two-player game board
+- Win/draw detection
+- Turn management
+- Game state synchronization
+
+### Store Schemas (TypeScript Only)
+
+When enabled, schemas provide:
+
+- Full TypeScript typing for store structure
+- Runtime validation
+- Better autocomplete
+- Type-safe data access
+
+Schemas define:
+
+- Table structures with cell types
+- Value types
+- Default values
+- Strict typing for all store operations
+
+### Synchronization
+
+**Enabled** (default):
+
+- Real-time sync between browser tabs
+- WebSocket-based synchronization
+- Connects to demo server by default (wss://vite.tinybase.org)
+- MergeableStore for conflict-free replication
+- Automatic reconnection handling
+
+**Disabled**:
+
+- Local-only data storage
+- No network dependencies
+- Simpler architecture
+- Still uses MergeableStore for consistency
+
+### Server Code
+
+When synchronization is enabled, you can include server code:
+
+**Node.js Server** (port 8043):
+
+- WebSocket server using `ws` library
+- TinyBase server synchronizer
+- Runs with `npm run dev` in server directory
+- Easy to deploy to any Node.js host
+
+**Cloudflare Durable Objects** (port 8787):
+
+- Serverless WebSocket server
+- Edge computing with Durable Objects
+- Global distribution
+- Runs locally with Wrangler
+
+**No Server**:
+
+- Connects to public demo server
+- Great for prototyping
+- No local server management needed
+
+### Prettier & ESLint
+
+**Prettier**:
+
+- Automatic code formatting
+- Consistent style across project
+- Pre-configured settings
+- Runs on save (with IDE integration)
+
+**ESLint**:
+
+- Code quality checks
+- Catch common errors
+- Import organization
+- TypeScript-aware rules
+
+## Project Structure
+
+All apps are created with a monorepo structure:
+
+```
+my-tinybase-app/
+├── package.json          # Root package (manages workspaces)
+├── README.md            # Getting started guide
+├── client/              # Client application
+│   ├── package.json     # Client dependencies
+│   ├── index.html       # Entry HTML
+│   ├── public/          # Static assets
+│   └── src/             # Source code
+│       ├── App.tsx      # Main app component
+│       ├── Store.tsx    # TinyBase store setup
+│       └── ...          # App-specific components
+└── server/              # Server code (optional)
+    ├── package.json     # Server dependencies
+    └── src/
+        └── index.ts     # Server entry point
+```
+
+## Learn More
+
+- [TinyBase Documentation](https://tinybase.org)
+- [TinyBase GitHub](https://github.com/tinyplex/tinybase)
+- [Synchronization Guide](https://tinybase.org/guides/synchronization)
+- [React Integration](https://tinybase.org/guides/building-uis/using-react)
+
+## License
+
+MIT License - see [LICENSE](https://github.com/tinyplex/tinybase/blob/main/LICENSE) file for details.

package/cli.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-import{existsSync as p}from"fs";import{dirname as m,join as o}from"path";import{createCLI as u}from"tinycreate";import{fileURLToPath as g}from"url";const d=m(g(import.meta.url)),y={welcomeMessage:`\u{1F389} Welcome to TinyBase!
-`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinybase-app",validate:e=>{if(e.length===0)return"Project name is required";const t=o(process.cwd(),e);return p(t)?`Directory "${e}" already exists. Please choose a different name.`:!0}},{type:"select",name:"language",message:"Language:",choices:[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],initial:0},{type:"select",name:"framework",message:"Framework:",choices:[{title:"React",value:"react"},{title:"Vanilla",value:"vanilla"}],initial:0},{type:"confirm",name:"prettier",message:"Include Prettier?",initial:!1},{type:"confirm",name:"eslint",message:"Include ESLint?",initial:!1}],createContext:e=>{const{projectName:t,language:s,framework:n,prettier:r,eslint:c}=e,a=s==="typescript",l=!a,i=n==="react";return{projectName:t,language:s,framework:n,prettier:r,eslint:c,typescript:a,javascript:l,react:i,ext:a?i?"tsx":"ts":i?"jsx":"js"}},createDirectories:async e=>{const{mkdir:t}=await import("fs/promises"),{join:s}=await import("path");await t(s(e,"src"),{recursive:!0}),await t(s(e,"public"),{recursive:!0})},getFiles:()=>[{template:"package.json.hbs",output:"package.json",prettier:!0},{template:"README.md.hbs",output:"README.md",prettier:!0}],processIncludedFile:(e,t)=>{const{javascript:s}=t,n=e.prettier??/\.(js|jsx|ts|tsx|css|json|html|md)$/.test(e.output),r=e.transpile??(/\.(ts|tsx)\.hbs$/.test(e.template)&&s===!0);return{...e,prettier:n,transpile:r}},templateRoot:o(d,"templates"),installCommand:"{pm} install",devCommand:"{pm} run dev",onSuccess:e=>{console.log("Next steps:"),console.log(`  cd ${e}`),console.log("  npm install"),console.log("  npm run dev")}};u(y).catch(e=>{console.error(e),process.exit(1)});
+import{existsSync as v}from"fs";import{dirname as y,join as p}from"path";import{createCLI as f}from"tinycreate";import{fileURLToPath as h}from"url";const w=y(h(import.meta.url)),j={welcomeMessage:`\u{1F389} Welcome to TinyBase!
+`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinybase-app",validate:e=>{if(e.length===0)return"Project name is required";const t=p(process.cwd(),e);return v(t)?`Directory "${e}" already exists. Please choose a different name.`:!0}},{type:"select",name:"language",message:"Language:",choices:[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],initial:0},{type:"select",name:"framework",message:"Framework:",choices:[{title:"React",value:"react"},{title:"Vanilla",value:"vanilla"}],initial:0},{type:"select",name:"appType",message:"App type:",choices:[{title:"Todo app",value:"todos"},{title:"Chat app",value:"chat"},{title:"Drawing app",value:"drawing"},{title:"Tic-tac-toe game",value:"game"}],initial:0},{type:(e,t)=>t.language==="typescript"?"confirm":null,name:"schemas",message:"Include store schemas?",initial:!1},{type:"confirm",name:"sync",message:"Enable synchronization?",initial:!0},{type:(e,t)=>t.sync?"confirm":null,name:"server",message:"Add code for server?",initial:!1},{type:(e,t)=>t.server?"select":null,name:"serverType",message:"Server type:",choices:[{title:"Node",value:"node"},{title:"Durable Objects",value:"durable-objects"}],initial:0},{type:"confirm",name:"prettier",message:"Include Prettier?",initial:!1},{type:"confirm",name:"eslint",message:"Include ESLint?",initial:!1}],createContext:e=>{const{projectName:t,language:s,framework:n,appType:r,prettier:m,eslint:u,schemas:o,sync:c,server:l,serverType:g}=e,a=s==="typescript",d=!a,i=n==="react";return{projectName:t,language:s,framework:n,appType:r,prettier:m,eslint:u,schemas:a&&(o===!0||o==="true"),sync:c===!0||c==="true",server:l===!0||l==="true",serverType:g||"node",typescript:a,javascript:d,react:i,ext:a?i?"tsx":"ts":i?"jsx":"js"}},createDirectories:async(e,t)=>{const{mkdir:s}=await import("fs/promises"),{join:n}=await import("path"),r=t.server;await s(n(e,"client/src"),{recursive:!0}),await s(n(e,"client/public"),{recursive:!0}),r&&await s(n(e,"server"),{recursive:!0})},getFiles:e=>{const t=e.server,s=[{template:"README.md.hbs",output:"README.md",prettier:!0},{template:"client/package.json.hbs",output:"client/package.json",prettier:!0}];return t&&s.push({template:"package.json.hbs",output:"package.json",prettier:!0}),s},processIncludedFile:(e,t)=>{const{javascript:s}=t,n=e.prettier??/\.(js|jsx|ts|tsx|css|json|html|md)$/.test(e.output),r=e.transpile??(/\.(ts|tsx)\.hbs$/.test(e.template)&&s===!0);return{...e,prettier:n,transpile:r}},templateRoot:p(w,"templates"),installCommand:"{pm} install",devCommand:"{pm} run dev",onSuccess:e=>{console.log("Next steps:"),console.log(`  cd ${e}/client`),console.log("  npm install"),console.log("  npm run dev")}};f(j).catch(e=>{console.error(e),process.exit(1)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tinybase",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "author": "jamesgpearce",
   "repository": {
     "type": "git",
@@ -23,13 +23,16 @@
     "create-tinybase": "cli.js"
   },
   "dependencies": {
-    "tinycreate": "^0.1.1"
+    "tinycreate": "^1.0.0"
   },
   "engines": {
     "node": ">=18.0.0"
   },
   "files": [
     "cli.js",
-    "templates"
+    "templates",
+    "screenshots",
+    "README.md",
+    "LICENSE"
   ]
 }

package/templates/README.md.hbs

@@ -5,6 +5,7 @@ A TinyBase app built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}
 ## Getting Started
 
 ```bash
+cd client
 npm install
 npm run dev
 ```

package/templates/{eslint.config.js.hbs → client/eslint.config.js.hbs}

@@ -9,6 +9,11 @@
 export default [
 {{#if typescript}}
   ...tseslint.configs.recommended,
+  {
+  rules: {
+  '@typescript-eslint/no-unused-vars': 'warn',
+  },
+  },
 {{else}}
   {
   rules: {

package/templates/client/index.html.hbs

@@ -0,0 +1,182 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap" />
+  {{includeFile template="client/public/favicon.svg" output="client/public/favicon.svg"}}
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <title>
+    TinyBase {{#if (eq appType "chat")}}Chat{{else if (eq appType "drawing")}}Drawing{{else if (eq appType "game")}}Game{{else}}Todos{{/if}}
+  </title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      --hue: 270;
+      --fg: oklch(85% 0.01 var(--hue));
+      --fg2: oklch(60% 0.01 var(--hue));
+      --bg: oklch(20% 0.01 var(--hue));
+      --bg2: oklch(25% 0.01 var(--hue));
+      --border: oklch(30% 0.01 var(--hue));
+      --bg-header: oklch(30% 0.008 var(--hue) / 0.5);
+      --accent: #d81b60;
+      color: var(--fg);
+      background: var(--bg);
+      font-family: 'Inter', sans-serif;
+      user-select: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    #appContainer {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+
+    #topBar {
+      background: var(--bg-header);
+      border-bottom: 1px solid var(--border);
+      box-shadow: 0 1px 2px 0 #0007;
+      padding: 0.75rem 1.5rem;
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      backdrop-filter: blur(4px);
+    }
+
+    #topBarLogo {
+      height: 2rem;
+      width: 2rem;
+      flex-shrink: 0;
+    }
+
+    #topBarTitle {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: #fff;
+      flex: 1;
+    }
+
+    #topBarInfo {
+      position: relative;
+    }
+
+    #infoIcon {
+      width: 1.25rem;
+      height: 1.25rem;
+      border: 2px solid var(--fg2);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      font-weight: 800;
+      color: var(--fg2);
+      cursor: help;
+      transition: all 0.2s;
+      user-select: none;
+    }
+
+    #infoIcon:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+
+    #infoIcon:hover #infoTooltip {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    #infoTooltip {
+      position: absolute;
+      right: 0;
+      top: calc(100% + 0.5rem);
+      background: var(--bg2);
+      border: 1px solid var(--border);
+      border-radius: 0.375rem;
+      padding: 0.75rem 1rem;
+      font-size: 0.85rem;
+      font-weight: 400;
+      width: 20rem;
+      white-space: normal;
+      color: var(--fg);
+      line-height: 1.5;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-0.25rem);
+      transition: all 0.2s;
+      pointer-events: none;
+      box-shadow: 0 1px 2px 0 #0007;
+    }
+
+    #infoTooltip a {
+      color: var(--fg);
+      text-decoration: underline;
+    }
+
+    #infoTooltip::before {
+      content: '';
+      position: absolute;
+      right: 0.75rem;
+      top: -0.375rem;
+      width: 0.75rem;
+      height: 0.75rem;
+      background: var(--bg2);
+      border-left: 1px solid var(--border);
+      border-top: 1px solid var(--border);
+      transform: rotate(45deg);
+    }
+
+    #app {
+      max-width: 60rem;
+      width: 100%;
+      margin: 0 auto;
+      padding: 2rem 1.5rem;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="appContainer">
+    <div id="topBar">
+      <img src="/favicon.svg" id="topBarLogo" alt="TinyBase" />
+      <div id="topBarTitle">
+        TinyBase {{#if (eq appType "chat")}}Chat{{else if (eq appType "drawing")}}Drawing{{else if (eq appType "game")}}Game{{else}}Todos{{/if}}
+      </div>
+      <div id="topBarInfo">
+        <div id="infoIcon">
+          i
+          <div id="infoTooltip">
+            {{#if (eq appType "todos")}}
+              A simple todo list application demonstrating TinyBase's reactive data management with CRUD operations.
+            {{else if (eq appType "chat")}}
+              A real-time chat application demonstrating TinyBase's reactive data management.
+            {{else if (eq appType "drawing")}}
+              A collaborative drawing canvas showcasing TinyBase's state synchronization.
+            {{else if (eq appType "game")}}
+              A tic-tac-toe game demonstrating turn-based logic and computed game state.
+            {{/if}}
+            <br><br>
+            Built with {{#if typescript}}TypeScript{{#if schemas}} (using typed store schemas){{/if}}{{else}}JavaScript{{/if}}{{#if react}} and React{{/if}}.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="app"></div>
+  </div>
+  {{includeFile template="client/src/index.tsx.hbs" output="client/src/index.{{ext}}"}}
+  <script type="module" src="/src/index.{{ext}}"></script>
+</body>
+
+</html>

package/templates/client/package.json.hbs

@@ -0,0 +1,76 @@
+{
+"name": "{{projectName}}{{#if server}}-client{{/if}}",
+"version": "1.0.0",
+"scripts": {
+{{#list}}
+  {{includeFile template="client/index.html.hbs" output="client/index.html"}}
+  "dev": "vite"
+  {{#if typescript}}
+    "build": "tsc && vite build"
+  {{else}}
+    "build": "vite build"
+  {{/if}}
+  "preview": "vite preview"
+  {{#if prettier}}
+    "format": "prettier --write ."
+    "format:check": "prettier --check ."
+  {{/if}}
+  {{#if eslint}}
+    "lint": "eslint ."
+  {{/if}}
+{{/list}}
+},
+"devDependencies": {
+{{#list}}
+  "vite": "^7.1.3"
+  {{#if typescript}}
+    "typescript": "^5.9.3"
+    "@types/node": "^25.0.3"
+    {{#if react}}
+      "@types/react": "^19.2.7"
+      "@types/react-dom": "^19.2.3"
+    {{/if}}
+  {{/if}}
+  {{#if react}}
+    "@vitejs/plugin-react": "^4.3.4"
+  {{/if}}
+  {{#if prettier}}
+    "prettier": "^3.7.4"
+  {{/if}}
+  {{#if eslint}}
+    "eslint": "^9.39.2"
+    {{#if typescript}}
+      "typescript-eslint": "^8.51.0"
+    {{/if}}
+    {{#if react}}
+      "eslint-plugin-react": "7.37.5"
+      "eslint-plugin-react-hooks": "^7.0.1"
+    {{/if}}
+  {{/if}}
+{{/list}}
+},
+"dependencies": {
+{{#list}}
+  "tinybase": "^7.3.1"
+  {{#if react}}
+    "react": "^19.2.3"
+    "react-dom": "^19.2.3"
+  {{/if}}
+  {{#if sync}}
+    "reconnecting-websocket": "^4.4.0"
+  {{/if}}
+{{/list}}
+}
+}
+{{#if prettier}}
+  {{includeFile template="client/.prettierrc.hbs" output="client/.prettierrc"}}
+{{/if}}
+{{#if eslint}}
+  {{includeFile template="client/eslint.config.js.hbs" output="client/eslint.config.js"}}
+{{/if}}
+{{#if react}}
+  {{includeFile template="client/vite.config.js.hbs" output="client/vite.config.js"}}
+{{/if}}
+{{#if typescript}}
+  {{includeFile template="client/tsconfig.json.hbs" output="client/tsconfig.json"}}
+{{/if}}

package/templates/client/src/chat/App.tsx.hbs

@@ -0,0 +1,40 @@
+import {StrictMode} from 'react';
+
+{{#if schemas}}
+  import {Provider} from 'tinybase/ui-react/with-schemas';
+{{else}}
+  import {Provider} from 'tinybase/ui-react';
+{{/if}}
+import {Inspector} from 'tinybase/ui-react-inspector';
+
+{{includeFile template="client/src/chat/SettingsStore.tsx.hbs" output="client/src/SettingsStore.{{ext}}"}}
+import {SettingsStore} from './SettingsStore';
+
+{{includeFile template="client/src/chat/ChatStore.tsx.hbs" output="client/src/ChatStore.{{ext}}"}}
+import {ChatStore} from './ChatStore';
+
+{{includeFile template="client/src/chat/UsernameInput.tsx.hbs" output="client/src/UsernameInput.{{ext}}"}}
+import {UsernameInput} from './UsernameInput';
+
+{{includeFile template="client/src/chat/Messages.tsx.hbs" output="client/src/Messages.{{ext}}"}}
+import {Messages} from './Messages';
+
+{{includeFile template="client/src/chat/MessageInput.tsx.hbs" output="client/src/MessageInput.{{ext}}"}}
+import {MessageInput} from './MessageInput';
+
+const App = () => {
+return (
+<StrictMode>
+  <Provider>
+    <SettingsStore />
+    <ChatStore />
+    <UsernameInput />
+    <Messages />
+    <MessageInput />
+    <Inspector />
+  </Provider>
+</StrictMode>
+);
+};
+
+export {App};

package/templates/client/src/chat/ChatStore.tsx.hbs

@@ -0,0 +1,70 @@
+{{#if schemas}}
+  import {createMergeableStore} from 'tinybase/with-schemas';
+  import * as UiReact from 'tinybase/ui-react/with-schemas';
+  import {type NoValuesSchema} from 'tinybase/with-schemas';
+{{else}}
+  import {createMergeableStore} from 'tinybase';
+  import {useCreateStore, useProvideStore, useAddRowCallback, useRow, useRowIds, useStore} from 'tinybase/ui-react';
+{{/if}}
+
+export const STORE_ID = 'chat';
+
+{{#if schemas}}
+  const TABLES_SCHEMA = {
+  messages: {
+  username: {type: 'string'},
+  text: {type: 'string'},
+  timestamp: {type: 'number'},
+  },
+  } as const;
+
+  type Schemas = [typeof TABLES_SCHEMA, NoValuesSchema];
+
+  const {useCreateStore, useProvideStore, useAddRowCallback, useRow, useRowIds, useStore} = UiReact as UiReact.WithSchemas<Schemas>;
+{{/if}}
+
+export {useAddRowCallback, useRow, useRowIds, useStore};
+
+export const ChatStore = () => {
+const store = useCreateStore(() =>
+createMergeableStore(STORE_ID){{#if schemas}}
+  .setTablesSchema(TABLES_SCHEMA){{/if}}
+.setDefaultContent([
+{
+messages: {
+'1': {username: 'Alice', text: 'Hello!', timestamp: Date.now() - 60000},
+'2': {username: 'Bob', text: 'Hi there!', timestamp: Date.now() - 30000},
+},
+},
+{},
+]),
+);
+
+useProvideStore(STORE_ID, store);
+
+{{#if sync}}
+  {{includeFile template="client/src/shared/config.ts.hbs" output="client/src/config.ts"}}
+  {{addImport "import {SERVER} from './config';"}}
+  {{addImport "import ReconnectingWebSocket from 'reconnecting-websocket';"}}
+  {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
+  {{addImport "import {useCreateSynchronizer} from 'tinybase/ui-react';"}}
+  {{addImport "import type {MergeableStore} from 'tinybase';"}}
+
+  useCreateSynchronizer(store, async (store: MergeableStore) => {
+  const serverPathId = location.pathname;
+  const synchronizer = await createWsSynchronizer(
+  store,
+  new ReconnectingWebSocket(SERVER + serverPathId),
+  );
+  await synchronizer.startSync();
+
+  synchronizer.getWebSocket().addEventListener('open', () => {
+  synchronizer.load().then(() => synchronizer.save());
+  });
+
+  return synchronizer;
+  });
+{{/if}}
+
+return null;
+};