diff --git a/examples/guestbook-solid-js/README.md b/examples/guestbook-solid-js/README.md
new file mode 100644
index 0000000..ecef389
--- /dev/null
+++ b/examples/guestbook-solid-js/README.md
@@ -0,0 +1,3 @@
+# Solid JS + TypeScript + Vite + SQLSync
+
+This template provides a minimal setup to get SQLSync working with Solid JS and Vite.
diff --git a/examples/guestbook-solid-js/index.html b/examples/guestbook-solid-js/index.html
new file mode 100644
index 0000000..74ce165
--- /dev/null
+++ b/examples/guestbook-solid-js/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ SQLSync + Vite + Solid JS + TS
+
+
+
+ if nothing renders, open the console
+
+
+
+
\ No newline at end of file
diff --git a/examples/guestbook-solid-js/package.json b/examples/guestbook-solid-js/package.json
new file mode 100644
index 0000000..ced4a85
--- /dev/null
+++ b/examples/guestbook-solid-js/package.json
@@ -0,0 +1,24 @@
+{
+ "name": "guestbook-react",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@orbitinghail/sqlsync-solid-js": "workspace:*",
+ "@orbitinghail/sqlsync-worker": "workspace:*",
+ "uuid": "^9.0.1",
+ "solid-js": "^1.8.7"
+ },
+ "devDependencies": {
+ "@types/uuid": "^9.0.6",
+ "vite-plugin-solid": "^2.7.0",
+ "typescript": "^5.2.2",
+ "vite": "^4.5.0",
+ "vitest": "^0.34.6"
+ }
+}
diff --git a/examples/guestbook-solid-js/src/doctype.ts b/examples/guestbook-solid-js/src/doctype.ts
new file mode 100644
index 0000000..82dda55
--- /dev/null
+++ b/examples/guestbook-solid-js/src/doctype.ts
@@ -0,0 +1,29 @@
+import { createDocHooks } from "@orbitinghail/sqlsync-solid-js";
+import { DocType, serializeMutationAsJSON } from "@orbitinghail/sqlsync-worker";
+
+const REDUCER_URL = new URL(
+ "../../../target/wasm32-unknown-unknown/release/reducer_guestbook.wasm",
+ import.meta.url,
+);
+
+// Must match the Mutation type in the Rust Reducer code
+export type Mutation =
+ | {
+ tag: "InitSchema";
+ }
+ | {
+ tag: "AddMessage";
+ id: string;
+ msg: string;
+ }
+ | {
+ tag: "DeleteMessage";
+ id: string;
+ };
+
+export const TaskDocType: DocType = {
+ reducerUrl: REDUCER_URL,
+ serializeMutation: serializeMutationAsJSON,
+};
+
+export const { useMutate, useQuery, useSetConnectionEnabled } = createDocHooks(() => TaskDocType);
diff --git a/examples/guestbook-solid-js/src/main.tsx b/examples/guestbook-solid-js/src/main.tsx
new file mode 100644
index 0000000..856a5f5
--- /dev/null
+++ b/examples/guestbook-solid-js/src/main.tsx
@@ -0,0 +1,114 @@
+import { SQLSyncProvider } from "@orbitinghail/sqlsync-solid-js";
+import { journalIdFromString, sql } from "@orbitinghail/sqlsync-worker";
+
+// this example uses the uuid library (`npm install uuid`)
+import { JSX } from "solid-js/jsx-runtime";
+import { v4 as uuidv4 } from "uuid";
+
+// You'll need to configure your build system to make these entrypoints
+// available as urls. Vite does this automatically via the `?url` and `?worker&url` suffix.
+import sqlSyncWasmUrl from "@orbitinghail/sqlsync-worker/sqlsync.wasm?url";
+import workerUrl from "@orbitinghail/sqlsync-worker/worker.ts?worker&url";
+
+import { createEffect, createSignal } from "solid-js";
+import { For, render } from "solid-js/web";
+import { useMutate, useQuery } from "./doctype";
+
+// Create a DOC_ID to use, each DOC_ID will correspond to a different SQLite
+// database. We use a static doc id so we can play with cross-tab sync.
+const DOC_ID = journalIdFromString("VM7fC4gKxa52pbdtrgd9G9");
+
+// Use SQLSync hooks in your app
+export function App() {
+ // we will use the standard useState hook to handle the message input box
+ const [msg, setMsg] = createSignal("");
+
+ // create a mutate function for our document
+ const mutate = useMutate(DOC_ID);
+
+ // initialize the schema; eventually this will be handled by SQLSync automatically
+ createEffect(() => {
+ mutate({ tag: "InitSchema" }).catch((err) => {
+ console.error("Failed to init schema", err);
+ });
+ });
+
+ // create a callback which knows how to trigger the add message mutation
+ const handleSubmit: JSX.EventHandler = (e) => {
+ // Prevent the browser from reloading the page
+ e.preventDefault();
+
+ // create a unique message id
+ const id = crypto.randomUUID ? crypto.randomUUID() : uuidv4();
+
+ // don't add empty messages
+ if (msg().trim() !== "") {
+ mutate({ tag: "AddMessage", id, msg: msg() }).catch((err) => {
+ console.error("Failed to add message", err);
+ });
+ // clear the message
+ setMsg("");
+ }
+ };
+
+ // create a callback to delete a message
+ const handleDelete = (id: string) => {
+ mutate({ tag: "DeleteMessage", id }).catch((err) => {
+ console.error("Failed to delete message", err);
+ });
+ };
+
+ // finally, query SQLSync for all the messages, sorted by created_at
+ const queryState = useQuery<{ id: string; msg: string }>(
+ () => DOC_ID,
+ () => sql`
+ select id, msg from messages
+ order by created_at
+ `,
+ );
+
+ const rows = () => queryState().rows ?? [];
+
+ return (
+
+
Guestbook:
+
+
+ {(row) => {
+ return (
+ -
+ {row.msg}
+
+
+ );
+ }}
+
+
+
Leave a message:
+
+