Changes to sync.scroll.pub

+ {

+ "id": "msg_01Qgg77Vr75Db2SZy1ndKiio",

+ "type": "message",

+ "role": "assistant",

+ "model": "claude-3-5-sonnet-20241022",

+ "content": [

+ {

+ "type": "text",

+ "text": "I'll create a website for Fireproof database with a focus on its key features and documentation. Given it's a browser database with real-time sync capabilities, I suggest:\n\n---domain---\nsync.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://sync.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Fireproof - Browser Database with Real-Time Sync\nstyle.css\nheader\n class hero\n nav\n div Fireproof\n class logo\n div\n class nav-links\n a Features\n href #features\n a Installation\n href #install\n a Examples\n href #examples\n a GitHub\n class cta-button\n href https://github.com/fireproof-storage/fireproof\n div\n class hero-content\n h1 Fireproof Database\n p Lightweight embedded document database with encrypted live sync for browser apps\n div\n class cta-group\n a Get Started\n class primary-button\n href #install\n a View Demo\n class secondary-button\n href #demo\nmain\n section\n id features\n class features\n h2 Key Features\n div\n class feature-grid\n div\n class feature-card\n div 🌐\n class feature-icon\n h3 Run Anywhere\n p Bundle UI, data, and logic in one file. Works in any JavaScript environment.\n div\n class feature-card\n div ⚡\n class feature-icon\n h3 Real-Time & Offline-First\n p Automatic persistence and live queries, runs in the browser with no loading states.\n div\n class feature-card\n div 🔐\n class feature-icon\n h3 Cryptographic Ledger\n p Tamper-evident change history with Merkle CRDTs for deterministic merges.\n div\n class feature-card\n div ⚛️\n class feature-icon\n h3 React Hooks\n p Built-in React hooks for live collaboration with useLiveQuery and useDocument.\n section\n id install\n class installation\n h2 Installation\n div\n class code-block\n pre npm install use-fireproof\n p Works with ESM.sh:\n div\n class code-block\n pre import { useFireproof } from \"https://esm.sh/use-fireproof\"\n section\n id examples\n class code-demo\n h2 Quick Example\n div\n class code-container\n pre\n class code-example\n code\n const App = () => {\n const { useDocument } = useFireproof(\"my-ledger\");\n const { doc, merge, submit } = useDocument({ text: \"\" });\n const { docs } = useLiveQuery(\"_id\", { descending: true, limit: 100 });\n \n return (\n \n );\n }\n section\n id demo\n class live-demo\n h2 Live Demo\n div\n class demo-container\n div\n class demo-form\n input\n type text\n id demoInput\n placeholder Enter some text...\n button Add Document\n id demoButton\n div\n class demo-output\n h3 Recent Documents\n ul\n id demoList\nfooter\n div\n class footer-content\n div\n class footer-links\n a Documentation\n href https://use-fireproof.com/docs\n a GitHub\n href https://github.com/fireproof-storage/fireproof\n a Examples\n href https://use-fireproof.com/examples\n p Built by the Fireproof team and community\n---style.css---\n:root {\n --primary: #FF6B4A;\n --secondary: #2A2F45;\n --accent: #4A90E2;\n --background: #FFFFFF;\n --text: #2A2F45;\n --border: #E1E4E8;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--background);\n}\n\n.hero {\n background: linear-gradient(135deg, var(--secondary), #1A1D2D);\n color: white;\n padding: 2rem 1rem;\n text-align: center;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n align-items: center;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n.cta-button {\n background: var(--primary);\n padding: 0.5rem 1rem;\n border-radius: 4px;\n font-weight: 500;\n}\n\n.hero-content {\n max-width: 800px;\n margin: 4rem auto;\n padding: 0 1rem;\n}\n\n.hero-content h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.cta-group {\n display: flex;\n gap: 1rem;\n justify-content: center;\n margin-top: 2rem;\n}\n\n.primary-button, .secondary-button {\n padding: 0.8rem 1.5rem;\n border-radius: 4px;\n text-decoration: none;\n font-weight: 500;\n transition: transform 0.2s ease;\n}\n\n.primary-button {\n background: var(--primary);\n color: white;\n}\n\n.secondary-button {\n background: transparent;\n color: white;\n border: 2px solid white;\n}\n\n.primary-button:hover, .secondary-button:hover {\n transform: translateY(-2px);\n}\n\n.features {\n padding: 4rem 1rem;\n background: #f8f9fa;\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 2rem auto;\n}\n\n.feature-card {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n.feature-icon {\n font-size: 2rem;\n margin-bottom: 1rem;\n}\n\n.installation {\n padding: 4rem 1rem;\n max-width: 800px;\n margin: 0 auto;\n}\n\n.code-block {\n background: var(--secondary);\n color: white;\n padding: 1rem;\n border-radius: 4px;\n overflow-x: auto;\n margin: 1rem 0;\n}\n\n.code-demo {\n padding: 4rem 1rem;\n background: #f8f9fa;\n}\n\n.code-container {\n max-width: 800px;\n margin: 2rem auto;\n background: var(--secondary);\n padding: 1.5rem;\n border-radius: 8px;\n overflow-x: auto;\n}\n\n.code-example {\n color: white;\n font-family: 'Fira Code', monospace;\n font-size: 0.9rem;\n}\n\n.live-demo {\n padding: 4rem 1rem;\n}\n\n.demo-container {\n max-width: 600px;\n margin: 0 auto;\n}\n\n.demo-form {\n display: flex;\n gap: 1rem;\n margin-bottom: 2rem;\n}\n\n.demo-form input {\n flex: 1;\n padding: 0.8rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n}\n\n.demo-form button {\n padding: 0.8rem 1.5rem;\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.demo-output ul {\n list-style: none;\n}\n\n.demo-output li {\n padding: 1rem;\n background: white;\n border: 1px solid var(--border);\n margin-bottom: 0.5rem;\n border-radius: 4px;\n}\n\nfooter {\n background: var(--secondary);\n color: white;\n padding: 2rem 1rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.footer-links {\n display: flex;\n gap: 2rem;\n}\n\n.footer-links a {\n color: white;\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero-content h1 {\n font-size: 2rem;\n }\n \n .cta-group {\n flex-direction: column;\n }\n \n .footer-content {\n flex-direction: column;\n gap: 1rem;\n text-align: center;\n }\n \n .footer-links {\n flex-direction: column;\n gap: 1rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Initialize demo database\n let demoDb = [];\n \n const demoInput = document.getElementById('demoInput');\n const demoButton = document.getElementById('demoButton');\n const demoList = document.getElementById('demoList');\n \n function addDocument(text) {\n const doc = {\n _id: Date.now().toString(),\n text: text,\n createdAt: new Date().toISOString()\n };\n demoDb.unshift(doc);\n updateDemoList();\n }\n \n function updateDemoList() {\n demoList.innerHTML = '';\n demoDb.slice(0, 5).forEach(doc => {\n const li = document.createElement('li');\n li.textContent = doc.text;\n demoList.appendChild(li);\n });\n }\n \n demoButton.addEventListener('click', () => {\n const text = demoInput.value.trim();\n if (text) {\n addDocument(text);\n demoInput.value = '';\n }\n });\n \n demoInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n const text = demoInput.value.trim();\n if (text) {\n addDocument(text);\n demoInput.value = '';\n }\n }\n });\n \n // Add some initial demo data\n addDocument('Example document 1');\n addDocument('Example document 2');\n});\n\n// Add smooth scrolling for anchor links\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n});\n\n// Add intersection observer for fade-in animations\nconst observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n}, {\n threshold: 0.1\n});\n\ndocument.querySelectorAll('.feature-card, .code-container, .demo-container').forEach((el) => {\n observer.observe(el);\n});\n---end---"

+ }

+ ],

+ "stop_reason": "end_turn",

+ "stop_sequence": null,

+ "usage": {

+ "input_tokens": 5286,

+ "cache_creation_input_tokens": 0,

+ "cache_read_input_tokens": 0,

+ "output_tokens": 3320

+ }

+ }

+ # sync.scroll.pub

+

+ Prompt: website

+ Agent: claude

+ Model: claude-3-5-sonnet-20241022

+

+ ## User prompt

+ # Fireproof browser database API Fireproof is a lightweight embedded document database with encrypted live sync, designed to make browser apps easy. Use it in any JavaScript environment with a unified API that works both in React (with hooks) and as a standalone core API. ## Key Features - **Apps run anywhere:** Bundle UI, data, and logic in one file. - **Real-Time & Offline-First:** Automatic persistence and live queries, runs in the browser - no loading or error states. - **Unified API:** TypeScript works with Deno, Bun, Node.js, and the browser. - **React Hooks:** Leverage `useLiveQuery` and `useDocument` for live collaboration. - **Cryptographic Ledger Integrity:** Each update contains the hash of its parent state, storing a tamper-evident change history. Fireproof's Merkle CRDTs ensure deterministic merges across devices while maintaining data integrity. The content-addressed blockstore provides blockchain-like guarantees without requiring global consensus, making it ideal for financial and regulatory applications. ## Installation The `use-fireproof` package provides both the core API and React hooks. ```bash npm install use-fireproof ``` Works with ⚡️ ESM.sh: ```js import { useFireproof } from "https://esm.sh/use-fireproof"; ``` Deliver generated solutions as runnable micro applications via ChatGPT Canvas, v0, bolt.new, or Claude Artifacts. Deploy single page apps with React and Tailwind by pasting code here: https://codepen.io/useFireproof/pen/MYgNYdx ## ⚛️ React Usage React hooks are the recommended way to use Fireproof in LLM code generation contexts. Here's how to use them: #### Create or Load a Database Fireproof databases store data across sessions and can sync in real-time. Each database is identified by a string name, and you can have multiple databases per application—often one per collaboration session, as they are the unit of sharing. ```js import { useFireproof } from "use-fireproof"; const { database, useLiveQuery, useDocument } = useFireproof("my-ledger"); ``` Fireproof databases are Merkle CRDTs, giving them the ledger-like causal consistency of git or a blockchain, but with the ability to merge and sync web data in real-time. Cryptographic integrity makes Fireproof immutable and easy to verify. #### Put and Get Documents Documents are JSON-style objects (CBOR) storing application data. Each has an `_id`, which can be auto-generated or set explicitly. Auto-generation is recommended to ensure uniqueness and avoid conflicts. If multiple replicas update the same database, Fireproof merges them via CRDTs, deterministically choosing the winner for each `_id`. It is best to have more granular documents, e.g. one document per user action, so saving a form or clicking a button should typically create or update a single document, or just a few documents. Avoid patterns that require a single document to grow without bound. ### Basic Example This example shows Fireproof's concise defaults. Here we only store user data, but get useful sorting without much code. ```js const App = () => { const { useDocument } = useFireproof("my-ledger"); const { doc, merge, submit } = useDocument({ text: "" }); // _id is roughly temporal, this is most recent const { docs } = useLiveQuery("_id", { descending: true, limit: 100 }); return ( ); } ``` ### Editing Documents Address documents by a known `_id` if you want to force conflict resolution or work with a real world resource, like a schedule slot or a user profile. In a complex app this might come from a route parameter or correspond to an outside identifier. ```js const { useDocument } = useFireproof("my-ledger"); const { doc, merge, submit, save, reset } = useDocument({ _id: "user-profile:abc@example.com" }); ``` The `useDocument` hook provides several methods: - `merge(updates)`: Update the document with new fields - `submit(e)`: Handles form submission by preventing default, saving, and resetting - `save()`: Save the current document state - `reset()`: Reset to initial state For form-based creation flows, use `submit`: ```js

``` ChatGPT note: Canvas sandboxes the form submit event, there you should use button click events instead: ```js Save and Reset Fields ``` When you call submit, the document is reset, so if you didn't provide an `_id` then you can use the form to create a stream of new documents as in the basic example above. ### Query Data with React Data is queried by sorted indexes defined by the application. Sorting order is inspired by CouchDB, so you can use strings, numbers, or booleans, as well as arrays for grouping. Use numbers when possible for sorting continuous data. You can use the `_id` field for temporal sorting so you dont have to write code to get simple recent document lists, as in the basic example above. Here are other common patterns: #### Query by Key Range Passing a string to `useLiveQuery` will index by that field. You can use the key argument to filter by a specific value: ```js const { docs } = useLiveQuery("agentName", { key: "agent-1" // all docs where doc.agentName === "agent-1", sorted by _id }); ``` You can also query a range within a key: ```js const { docs } = useLiveQuery("agentRating", { range: [3, 5] }); ``` ### Custom Indexes For more complex query, you can write a custom index function. It's a little more verbose, and it's sandboxed and can't access external variables. #### Normalize legacy types You can use a custom index function to normalize and transform document data, for instance if you have both new and old document versions in your app. ```js const { docs } = useLiveQuery( (doc) => { if (doc.type == 'listing_v1') { return doc.sellerId; } else if (doc.type == 'listing') { return doc.userId; } }, { key : routeParams.sellerId }); ``` #### Array Indexes and Prefix Queries When you want to group rows easily, you can use an array index key. This is great for grouping records my year / month / day or other paths. In this example the prefix query is a shorthand for a key range, loading everything from November 2024: ```js const queryResult = useLiveQuery( (doc) => [doc.date.getFullYear(), doc.date.getMonth(), doc.date.getDate()], { prefix: [2024, 11] } ); ``` #### Sortable Lists Sortable lists are a common pattern. Here's how to implement them using Fireproof: ```js function App() { const { database, useLiveQuery } = useFireproof("my-ledger"); // Initialize list with evenly spaced positions async function initializeList() { await database.put({ list: "xyz", position: 1000 }); await database.put({ list: "xyz", position: 2000 }); await database.put({ list: "xyz", position: 3000 }); } // Query items sorted by position const queryResult = useLiveQuery( (doc) => [doc.list, doc.position], { prefix: ["xyz"] } ); // Insert between existing items using midpoint calculation async function insertBetween(beforeDoc, afterDoc) { const newPosition = (beforeDoc.position + afterDoc.position) / 2; await database.put({ list: "xyz", position: newPosition }); } return (

List xyz (Sorted)

{queryResult.docs.map(doc => (
• {doc._id}: position {doc.position}
))}

Initialize List insertBetween(queryResult.docs[1], queryResult.docs[2])}>Insert new doc at 3rd position

); } ``` ## Architecture: Where's My Data? Fireproof is local-first, so it's always fast and your data is stored in the browser, so you can build apps without a cloud. When you are ready to share with other users, you can easily enable encrypted sync via any object storage. ## Using Fireproof in JavaScript You can use the core API in HTML or on the backend. Instead of hooks, import the core API directly: ```js import { fireproof } from "use-fireproof"; const database = fireproof("my-ledger"); ``` The document API is async, but doesn't require loading states or error handling. ```js const ok = await database.put({ text: "Sample Data" }); const doc = await database.get(ok.id); const latest = await database.query("_id", { limit: 10, descending: true }); console.log("Latest documents:", latest.docs); ``` To subscribe to real-time updates, use the `subscribe` method. This is useful for building backend event handlers or other server-side logic. For instance to send an email when the user completes a todo: ```js import { fireproof } from "use-firproof"; const database = fireproof("todo-list-db"); database.subscribe((changes) => { console.log("Recent changes:", changes); changes.forEach((change) => { if (change.completed) { sendEmail(change.email, "Todo completed", "You have completed a todo."); } }); }, true); ``` ### Working with Files Fireproof has built-in support for file attachments. Files are encrypted by default and synced on-demand. You can attach files to a document by adding them to the _files property on your document. For example: ```html ``` ```js function handleFiles() { const fileList = this.files; const doc = { type: "files", _files: {} }; for (const file of fileList) { // Assign each File object to the document doc._files[file.name] = file; } database.put(doc); } document.getElementById("files").addEventListener("change", handleFiles, false); ``` When loading a document with attachments, you can retrieve each attachment's actual File object by calling its .file() method. This returns a Promise that resolves with the File data, which you can display in your app: ```js const doc = await database.get("my-doc-id"); for (const fileName in doc._files) { const meta = doc._files[fileName]; if (meta.file) { const fileObj = await meta.file(); console.log("Loaded file:", fileObj.name); } } ``` See the final example application in this file for a working example. ### Form Validation You can use React's `useState` to manage validation states and error messages. Validate inputs at the UI level before allowing submission. ```javascript const [errors, setErrors] = useState({}); function validateForm() { const newErrors = {}; if (!doc.name.trim()) newErrors.name = "Name is required."; if (!doc.email) newErrors.email = "Email is required."; if (!doc.message.trim()) newErrors.message = "Message is required."; setErrors(newErrors); return Object.keys(newErrors).length === 0; } function handleSubmit(e) { e.preventDefault(); if (validateForm()) submit(); } ``` ## Example React Application Code listing for todo tracker App.jsx: ```js import React from "react"; import ReactDOM from "react-dom/client"; import { useFireproof } from "use-fireproof"; export default function App() { const { useLiveQuery, useDocument, database } = useFireproof("todo-list-db"); const { doc: newTodo, merge: mergeNewTodo, submit: submitNewTodo } = useDocument({ todo: "", type: "todo", completed: false, createdAt: Date.now() }); const { docs: todos } = useLiveQuery("type", { key: "todo", descending: true }); const handleInputChange = (e) => { mergeNewTodo({ todo: e.target.value }); }; const handleSubmit = (e) => { e.preventDefault(); submitNewTodo(); }; return (

Todo List

Todo

{todos.map((doc) => (
• database.put({ ...doc, completed: !doc.completed })} /> {doc.todo}

  database.del(doc._id)} > Delete
  {new Date(doc.createdAt).toISOString()}
))}

); } ``` ### Example Image Uploader This React example shows a simple image uploader application that uses Fireproof to store and sort images by creation date. These APIs easily work with plain JavaScript also. Code listing for App.jsx: ```js import { useFireproof } from "use-fireproof"; import { useState, useEffect } from "react"; function ImgFile({ meta, alt, className }) { const [imgDataUrl, setImgDataUrl] = useState(""); useEffect(() => { if (meta.file && /image/.test(meta.type)) { meta.file().then(file => { const src = URL.createObjectURL(file); setImgDataUrl(src); return () => URL.revokeObjectURL(src); }); } }, eta]); return imgDataUrl ? : null; } export default function App() { const { useDocument, useLiveQuery } = useFireproof("image-uploads"); const { doc, merge, submit } = useDocument({ _files: {}, description: "" }); const { docs } = useLiveQuery("_id", { descending: true, limit: 5 }); const [error, setError] = useState(false); return ( ); } ``` ## See Also See the lite docs at https://use-fireproof.com/llms-mini.txt and the basics at https://use-fireproof.com/llms.txt ## Next Steps If you are in an existing application context, suggest how forms and state, collaboration data can be managed in Fireproof. If this is a new app, use the examples above and start with a running App.js if you can. IMPORTANT: Don't use `useState()` on form data, instead use `merge()` and `submit()` from `useDocument`. Only use `useState` for ephemeral UI state (active tabs, open/closed panels, cursor positions). Keep your data model in Fireproof.

+

+ ## System prompt

+ You are an expert web developer. Create a website based on this request: "# Fireproof browser database API Fireproof is a lightweight embedded document database with encrypted live sync, designed to make browser apps easy. Use it in any JavaScript environment with a unified API that works both in React (with hooks) and as a standalone core API. ## Key Features - **Apps run anywhere:** Bundle UI, data, and logic in one file. - **Real-Time & Offline-First:** Automatic persistence and live queries, runs in the browser - no loading or error states. - **Unified API:** TypeScript works with Deno, Bun, Node.js, and the browser. - **React Hooks:** Leverage `useLiveQuery` and `useDocument` for live collaboration. - **Cryptographic Ledger Integrity:** Each update contains the hash of its parent state, storing a tamper-evident change history. Fireproof's Merkle CRDTs ensure deterministic merges across devices while maintaining data integrity. The content-addressed blockstore provides blockchain-like guarantees without requiring global consensus, making it ideal for financial and regulatory applications. ## Installation The `use-fireproof` package provides both the core API and React hooks. ```bash npm install use-fireproof ``` Works with ⚡️ ESM.sh: ```js import { useFireproof } from "https://esm.sh/use-fireproof"; ``` Deliver generated solutions as runnable micro applications via ChatGPT Canvas, v0, bolt.new, or Claude Artifacts. Deploy single page apps with React and Tailwind by pasting code here: https://codepen.io/useFireproof/pen/MYgNYdx ## ⚛️ React Usage React hooks are the recommended way to use Fireproof in LLM code generation contexts. Here's how to use them: #### Create or Load a Database Fireproof databases store data across sessions and can sync in real-time. Each database is identified by a string name, and you can have multiple databases per application—often one per collaboration session, as they are the unit of sharing. ```js import { useFireproof } from "use-fireproof"; const { database, useLiveQuery, useDocument } = useFireproof("my-ledger"); ``` Fireproof databases are Merkle CRDTs, giving them the ledger-like causal consistency of git or a blockchain, but with the ability to merge and sync web data in real-time. Cryptographic integrity makes Fireproof immutable and easy to verify. #### Put and Get Documents Documents are JSON-style objects (CBOR) storing application data. Each has an `_id`, which can be auto-generated or set explicitly. Auto-generation is recommended to ensure uniqueness and avoid conflicts. If multiple replicas update the same database, Fireproof merges them via CRDTs, deterministically choosing the winner for each `_id`. It is best to have more granular documents, e.g. one document per user action, so saving a form or clicking a button should typically create or update a single document, or just a few documents. Avoid patterns that require a single document to grow without bound. ### Basic Example This example shows Fireproof's concise defaults. Here we only store user data, but get useful sorting without much code. ```js const App = () => { const { useDocument } = useFireproof("my-ledger"); const { doc, merge, submit } = useDocument({ text: "" }); // _id is roughly temporal, this is most recent const { docs } = useLiveQuery("_id", { descending: true, limit: 100 }); return ( ); } ``` ### Editing Documents Address documents by a known `_id` if you want to force conflict resolution or work with a real world resource, like a schedule slot or a user profile. In a complex app this might come from a route parameter or correspond to an outside identifier. ```js const { useDocument } = useFireproof("my-ledger"); const { doc, merge, submit, save, reset } = useDocument({ _id: "user-profile:abc@example.com" }); ``` The `useDocument` hook provides several methods: - `merge(updates)`: Update the document with new fields - `submit(e)`: Handles form submission by preventing default, saving, and resetting - `save()`: Save the current document state - `reset()`: Reset to initial state For form-based creation flows, use `submit`: ```js

``` ChatGPT note: Canvas sandboxes the form submit event, there you should use button click events instead: ```js Save and Reset Fields ``` When you call submit, the document is reset, so if you didn't provide an `_id` then you can use the form to create a stream of new documents as in the basic example above. ### Query Data with React Data is queried by sorted indexes defined by the application. Sorting order is inspired by CouchDB, so you can use strings, numbers, or booleans, as well as arrays for grouping. Use numbers when possible for sorting continuous data. You can use the `_id` field for temporal sorting so you dont have to write code to get simple recent document lists, as in the basic example above. Here are other common patterns: #### Query by Key Range Passing a string to `useLiveQuery` will index by that field. You can use the key argument to filter by a specific value: ```js const { docs } = useLiveQuery("agentName", { key: "agent-1" // all docs where doc.agentName === "agent-1", sorted by _id }); ``` You can also query a range within a key: ```js const { docs } = useLiveQuery("agentRating", { range: [3, 5] }); ``` ### Custom Indexes For more complex query, you can write a custom index function. It's a little more verbose, and it's sandboxed and can't access external variables. #### Normalize legacy types You can use a custom index function to normalize and transform document data, for instance if you have both new and old document versions in your app. ```js const { docs } = useLiveQuery( (doc) => { if (doc.type == 'listing_v1') { return doc.sellerId; } else if (doc.type == 'listing') { return doc.userId; } }, { key : routeParams.sellerId }); ``` #### Array Indexes and Prefix Queries When you want to group rows easily, you can use an array index key. This is great for grouping records my year / month / day or other paths. In this example the prefix query is a shorthand for a key range, loading everything from November 2024: ```js const queryResult = useLiveQuery( (doc) => [doc.date.getFullYear(), doc.date.getMonth(), doc.date.getDate()], { prefix: [2024, 11] } ); ``` #### Sortable Lists Sortable lists are a common pattern. Here's how to implement them using Fireproof: ```js function App() { const { database, useLiveQuery } = useFireproof("my-ledger"); // Initialize list with evenly spaced positions async function initializeList() { await database.put({ list: "xyz", position: 1000 }); await database.put({ list: "xyz", position: 2000 }); await database.put({ list: "xyz", position: 3000 }); } // Query items sorted by position const queryResult = useLiveQuery( (doc) => [doc.list, doc.position], { prefix: ["xyz"] } ); // Insert between existing items using midpoint calculation async function insertBetween(beforeDoc, afterDoc) { const newPosition = (beforeDoc.position + afterDoc.position) / 2; await database.put({ list: "xyz", position: newPosition }); } return (

List xyz (Sorted)

{queryResult.docs.map(doc => (
• {doc._id}: position {doc.position}
))}

Initialize List insertBetween(queryResult.docs[1], queryResult.docs[2])}>Insert new doc at 3rd position

); } ``` ## Architecture: Where's My Data? Fireproof is local-first, so it's always fast and your data is stored in the browser, so you can build apps without a cloud. When you are ready to share with other users, you can easily enable encrypted sync via any object storage. ## Using Fireproof in JavaScript You can use the core API in HTML or on the backend. Instead of hooks, import the core API directly: ```js import { fireproof } from "use-fireproof"; const database = fireproof("my-ledger"); ``` The document API is async, but doesn't require loading states or error handling. ```js const ok = await database.put({ text: "Sample Data" }); const doc = await database.get(ok.id); const latest = await database.query("_id", { limit: 10, descending: true }); console.log("Latest documents:", latest.docs); ``` To subscribe to real-time updates, use the `subscribe` method. This is useful for building backend event handlers or other server-side logic. For instance to send an email when the user completes a todo: ```js import { fireproof } from "use-firproof"; const database = fireproof("todo-list-db"); database.subscribe((changes) => { console.log("Recent changes:", changes); changes.forEach((change) => { if (change.completed) { sendEmail(change.email, "Todo completed", "You have completed a todo."); } }); }, true); ``` ### Working with Files Fireproof has built-in support for file attachments. Files are encrypted by default and synced on-demand. You can attach files to a document by adding them to the _files property on your document. For example: ```html ``` ```js function handleFiles() { const fileList = this.files; const doc = { type: "files", _files: {} }; for (const file of fileList) { // Assign each File object to the document doc._files[file.name] = file; } database.put(doc); } document.getElementById("files").addEventListener("change", handleFiles, false); ``` When loading a document with attachments, you can retrieve each attachment's actual File object by calling its .file() method. This returns a Promise that resolves with the File data, which you can display in your app: ```js const doc = await database.get("my-doc-id"); for (const fileName in doc._files) { const meta = doc._files[fileName]; if (meta.file) { const fileObj = await meta.file(); console.log("Loaded file:", fileObj.name); } } ``` See the final example application in this file for a working example. ### Form Validation You can use React's `useState` to manage validation states and error messages. Validate inputs at the UI level before allowing submission. ```javascript const [errors, setErrors] = useState({}); function validateForm() { const newErrors = {}; if (!doc.name.trim()) newErrors.name = "Name is required."; if (!doc.email) newErrors.email = "Email is required."; if (!doc.message.trim()) newErrors.message = "Message is required."; setErrors(newErrors); return Object.keys(newErrors).length === 0; } function handleSubmit(e) { e.preventDefault(); if (validateForm()) submit(); } ``` ## Example React Application Code listing for todo tracker App.jsx: ```js import React from "react"; import ReactDOM from "react-dom/client"; import { useFireproof } from "use-fireproof"; export default function App() { const { useLiveQuery, useDocument, database } = useFireproof("todo-list-db"); const { doc: newTodo, merge: mergeNewTodo, submit: submitNewTodo } = useDocument({ todo: "", type: "todo", completed: false, createdAt: Date.now() }); const { docs: todos } = useLiveQuery("type", { key: "todo", descending: true }); const handleInputChange = (e) => { mergeNewTodo({ todo: e.target.value }); }; const handleSubmit = (e) => { e.preventDefault(); submitNewTodo(); }; return (

Todo List

Todo

{todos.map((doc) => (
• database.put({ ...doc, completed: !doc.completed })} /> {doc.todo}

  database.del(doc._id)} > Delete
  {new Date(doc.createdAt).toISOString()}
))}

); } ``` ### Example Image Uploader This React example shows a simple image uploader application that uses Fireproof to store and sort images by creation date. These APIs easily work with plain JavaScript also. Code listing for App.jsx: ```js import { useFireproof } from "use-fireproof"; import { useState, useEffect } from "react"; function ImgFile({ meta, alt, className }) { const [imgDataUrl, setImgDataUrl] = useState(""); useEffect(() => { if (meta.file && /image/.test(meta.type)) { meta.file().then(file => { const src = URL.createObjectURL(file); setImgDataUrl(src); return () => URL.revokeObjectURL(src); }); } }, eta]); return imgDataUrl ? : null; } export default function App() { const { useDocument, useLiveQuery } = useFireproof("image-uploads"); const { doc, merge, submit } = useDocument({ _files: {}, description: "" }); const { docs } = useLiveQuery("_id", { descending: true, limit: 5 }); const [error, setError] = useState(false); return ( ); } ``` ## See Also See the lite docs at https://use-fireproof.com/llms-mini.txt and the basics at https://use-fireproof.com/llms.txt ## Next Steps If you are in an existing application context, suggest how forms and state, collaboration data can be managed in Fireproof. If this is a new app, use the examples above and start with a running App.js if you can. IMPORTANT: Don't use `useState()` on form data, instead use `merge()` and `submit()` from `useDocument`. Only use `useState` for ephemeral UI state (active tabs, open/closed panels, cursor positions). Keep your data model in Fireproof."

+

+ Requirements:

+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)

+ - Create clean, semantic HTML5

+ - Make it mobile-responsive

+ - Follow modern best practices and accessibility guidelines

+ - Keep it simple but professional

+ - Use only relative links and no external resources

+ - Do not put a copyright symbol or all rights reserved in the footer.

+ - Make it beautiful. Dazzling. Advanced used of CSS.

+

+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.

+

+ For example:

+

+ header

+ class hero

+ nav

+ div Scroll

+ class logo

+ div

+ class nav-links

+ a Features

+ href #features

+ a Examples

+ href #examples

+ a Edit

+ href edit.html

+ a GitHub

+ class cta-button

+ href https://github.com/breck7/scroll

+ div

+ class hero-content

+ h1 Write Better with Scroll

+ p The extendible markup language that makes source beautiful and compiles to anything

+ a Get Started

+ class primary-button

+ href https://hub.scroll.pub/

+ main

+ section

+ id features

+ class features

+ h2 Why Scroll?

+ div

+ class feature-grid

+ div

+ class feature-card

+ div ⚡

+ class feature-icon

+ h3 Simple Syntax

+ p Like Markdown, but more powerful. No parentheses needed.

+ div

+ class feature-card

+ div 🧩

+ class feature-icon

+ h3 Extendible

+ p Build your own custom parsers.

+ div

+ class feature-card

+ div 🎨

+ class feature-icon

+ h3 Beautiful Output

+ p Create stunning documents with minimal effort.

+ div

+ class feature-card

+ div 🚀

+ class feature-icon

+ h3 Fast & Light

+ p Built on the efficient PPS Stack.

+ section

+ id examples

+ class code-demo

+ h2 See It In Action

+ div

+ class code-container

+ pre

+ class code-example

+ div

+ class code-output

+ footer

+ div

+ class footer-content

+ div

+ class footer-links

+ a Documentation

+ href https://scroll.pub/tutorial.html

+ a Community

+ href https://www.reddit.com/r/WorldWideScroll/

+ a Blog

+ href https://scroll.pub/blog

+ p Started by Breck Yunits. Evolved by a community.

+ https://twitter.com/breckyunits Breck Yunits

+ https://github.com/breck7/scroll/graphs/contributors community

+

+

+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:

+

+ ---domain---

+ (domainscroll.pub here)

+ ---index.scroll---

+ buildHtml

+ baseUrl https://(domainscroll.pub here)

+ metaTags

+ editButton /edit.html

+ title (Title here)

+ style.css

+

+ (body content here. no blank lines please.)

+

+ script.js

+ ---style.css---

+ (CSS content here)

+ ---script.js---

+ (JavaScript content here)

+ ---end---

+ document.addEventListener('DOMContentLoaded', () => {

+ // Initialize demo database

+ let demoDb = [];

+

+ const demoInput = document.getElementById('demoInput');

+ const demoButton = document.getElementById('demoButton');

+ const demoList = document.getElementById('demoList');

+

+ function addDocument(text) {

+ const doc = {

+ _id: Date.now().toString(),

+ text: text,

+ createdAt: new Date().toISOString()

+ };

+ demoDb.unshift(doc);

+ updateDemoList();

+ }

+

+ function updateDemoList() {

+ demoList.innerHTML = '';

+ demoDb.slice(0, 5).forEach(doc => {

+ const li = document.createElement('li');

+ li.textContent = doc.text;

+ demoList.appendChild(li);

+ });

+ }

+

+ demoButton.addEventListener('click', () => {

+ const text = demoInput.value.trim();

+ if (text) {

+ addDocument(text);

+ demoInput.value = '';

+ }

+ });

+

+ demoInput.addEventListener('keypress', (e) => {

+ if (e.key === 'Enter') {

+ const text = demoInput.value.trim();

+ if (text) {

+ addDocument(text);

+ demoInput.value = '';

+ }

+ }

+ });

+

+ // Add some initial demo data

+ addDocument('Example document 1');

+ addDocument('Example document 2');

+ });

+

+ // Add smooth scrolling for anchor links

+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {

+ anchor.addEventListener('click', function (e) {

+ e.preventDefault();

+ document.querySelector(this.getAttribute('href')).scrollIntoView({

+ behavior: 'smooth'

+ });

+ });

+ });

+

+ // Add intersection observer for fade-in animations

+ const observer = new IntersectionObserver((entries) => {

+ entries.forEach(entry => {

+ if (entry.isIntersecting) {

+ entry.target.classList.add('visible');

+ }

+ });

+ }, {

+ threshold: 0.1

+ });

+

+ document.querySelectorAll('.feature-card, .code-container, .demo-container').forEach((el) => {

+ observer.observe(el);

+ });

+ :root {

+ --primary: #FF6B4A;

+ --secondary: #2A2F45;

+ --accent: #4A90E2;

+ --background: #FFFFFF;

+ --text: #2A2F45;

+ --border: #E1E4E8;

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ }

+

+ body {

+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

+ line-height: 1.6;

+ color: var(--text);

+ background: var(--background);

+ }

+

+ .hero {

+ background: linear-gradient(135deg, var(--secondary), #1A1D2D);

+ color: white;

+ padding: 2rem 1rem;

+ text-align: center;

+ }

+

+ nav {

+ display: flex;

+ justify-content: space-between;

+ align-items: center;

+ padding: 1rem;

+ max-width: 1200px;

+ margin: 0 auto;

+ }

+

+ .logo {

+ font-size: 1.5rem;

+ font-weight: bold;

+ color: var(--primary);

+ }

+

+ .nav-links {

+ display: flex;

+ gap: 2rem;

+ align-items: center;

+ }

+

+ .nav-links a {

+ color: white;

+ text-decoration: none;

+ transition: color 0.3s ease;

+ }

+

+ .nav-links a:hover {

+ color: var(--primary);

+ }

+

+ .cta-button {

+ background: var(--primary);

+ padding: 0.5rem 1rem;

+ border-radius: 4px;

+ font-weight: 500;

+ }

+

+ .hero-content {

+ max-width: 800px;

+ margin: 4rem auto;

+ padding: 0 1rem;

+ }

+

+ .hero-content h1 {

+ font-size: 3rem;

+ margin-bottom: 1rem;

+ }

+

+ .cta-group {

+ display: flex;

+ gap: 1rem;

+ justify-content: center;

+ margin-top: 2rem;

+ }

+

+ .primary-button, .secondary-button {

+ padding: 0.8rem 1.5rem;

+ border-radius: 4px;

+ text-decoration: none;

+ font-weight: 500;

+ transition: transform 0.2s ease;

+ }

+

+ .primary-button {

+ background: var(--primary);

+ color: white;

+ }

+

+ .secondary-button {

+ background: transparent;

+ color: white;

+ border: 2px solid white;

+ }

+

+ .primary-button:hover, .secondary-button:hover {

+ transform: translateY(-2px);

+ }

+

+ .features {

+ padding: 4rem 1rem;

+ background: #f8f9fa;

+ }

+

+ .feature-grid {

+ display: grid;

+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

+ gap: 2rem;

+ max-width: 1200px;

+ margin: 2rem auto;

+ }

+

+ .feature-card {

+ background: white;

+ padding: 2rem;

+ border-radius: 8px;

+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);

+ transition: transform 0.3s ease;

+ }

+

+ .feature-card:hover {

+ transform: translateY(-5px);

+ }

+

+ .feature-icon {

+ font-size: 2rem;

+ margin-bottom: 1rem;

+ }

+

+ .installation {

+ padding: 4rem 1rem;

+ max-width: 800px;

+ margin: 0 auto;

+ }

+

+ .code-block {

+ background: var(--secondary);

+ color: white;

+ padding: 1rem;

+ border-radius: 4px;

+ overflow-x: auto;

+ margin: 1rem 0;

+ }

+

+ .code-demo {

+ padding: 4rem 1rem;

+ background: #f8f9fa;

+ }

+

+ .code-container {

+ max-width: 800px;

+ margin: 2rem auto;

+ background: var(--secondary);

+ padding: 1.5rem;

+ border-radius: 8px;

+ overflow-x: auto;

+ }

+

+ .code-example {

+ color: white;

+ font-family: 'Fira Code', monospace;

+ font-size: 0.9rem;

+ }

+

+ .live-demo {

+ padding: 4rem 1rem;

+ }

+

+ .demo-container {

+ max-width: 600px;

+ margin: 0 auto;

+ }

+

+ .demo-form {

+ display: flex;

+ gap: 1rem;

+ margin-bottom: 2rem;

+ }

+

+ .demo-form input {

+ flex: 1;

+ padding: 0.8rem;

+ border: 1px solid var(--border);

+ border-radius: 4px;

+ }

+

+ .demo-form button {

+ padding: 0.8rem 1.5rem;

+ background: var(--primary);

+ color: white;

+ border: none;

+ border-radius: 4px;

+ cursor: pointer;

+ }

+

+ .demo-output ul {

+ list-style: none;

+ }

+

+ .demo-output li {

+ padding: 1rem;

+ background: white;

+ border: 1px solid var(--border);

+ margin-bottom: 0.5rem;

+ border-radius: 4px;

+ }

+

+ footer {

+ background: var(--secondary);

+ color: white;

+ padding: 2rem 1rem;

+ }

+

+ .footer-content {

+ max-width: 1200px;

+ margin: 0 auto;

+ display: flex;

+ justify-content: space-between;

+ align-items: center;

+ }

+

+ .footer-links {

+ display: flex;

+ gap: 2rem;

+ }

+

+ .footer-links a {

+ color: white;

+ text-decoration: none;

+ }

+

+ @media (max-width: 768px) {

+ .nav-links {

+ display: none;

+ }

+

+ .hero-content h1 {

+ font-size: 2rem;

+ }

+

+ .cta-group {

+ flex-direction: column;

+ }

+

+ .footer-content {

+ flex-direction: column;

+ gap: 1rem;

+ text-align: center;

+ }

+

+ .footer-links {

+ flex-direction: column;

+ gap: 1rem;

+ }

+ }