# Fireproof for AI Code Generation

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.
- **Unified API:** TypeScript works with Deno, Bun, Node.js, and the browser.
- **React Hooks:** Leverage `useLiveQuery` and `useDocument` for live collaboration.

## 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 runnable applications via ChatGPT Canvas, v0, bolt.new, or Claude Artifacts. Deploy single page apps with React and Tailwind here: https://codepen.io/useFireproof/pen/MYgNYdx

## ⚛️ React Example

You can use `useDocument` to manage individual documents and `useLiveQuery` to listen for real-time changes. For example:

```js
import { useFireproof } from "use-fireproof";

function App() {
  const { useDocument, useLiveQuery, database } = useFireproof("my-ledger");
  const { doc, merge, submit } = useDocument({ text: "Initial Data", timestamp: Date.now() });
  const { docs } = useLiveQuery("_id", { limit: 10, descending: true });

  return (
    <div>
      <form onSubmit={submit}>
        <input
          value={doc.text}
          onChange={(e) => merge({ text: e.target.value })}
          placeholder="Edit document"
        />
        <button type="submit">Save</button>
      </form>

      <h3>Recent Documents</h3>
      <ul>
        {docs.map((doc) => (
          <li key={doc._id}>
            {doc.text} — {new Date(doc.timestamp).toLocaleString()}
          </li>
        ))}
      </ul>
    </div>
  );
}
```

To sort all documents withing a specific tag, use a view function and map by prefix (note that the function is sandboxed and can only access the document fields):

```js
const queryResult = useLiveQuery(
  (doc) => [doc.list_id, doc.timestamp], 
  { descending: true, limit: 5, prefix: ["zyx-456-list-id"] }
);
```

### Using the Core API in Plain JavaScript

If you're not using React, the core API offers similar capabilities:

```js
import { fireproof } from "use-fireproof";

const database = fireproof("my-ledger");

async function putAndQuery() {
  await database.put({ text: "Sample Data", timestamp: Date.now() });
  const latest = await database.query("timestamp", { limit: 10, descending: true });
  console.log("Latest documents:", latest.docs);
}

database.subscribe((changes) => {
  console.log("Changes", changes)
}, true)

putAndQuery();
```

## Best Practices

- **Leverage `useLiveQuery`:**  
  Use this hook to effortlessly build UIs that update in real time as data changes.

- **Granular Documents:**  
  Save small, individual data pieces (e.g., one per user action) to simplify conflict resolution via CRDTs.

- **Single File Deployment:**  
  Ideal for constrained environments, bundle everything into one file without external dependencies.

For more details and advanced usage (such as file attachments and cloud syncing), refer to the full documentation at [Fireproof Docs](https://use-fireproof.com/).

## See also

See the lite docs at https://use-fireproof.com/llms-mini.txt and the full docs at https://use-fireproof.com/llms-full.txt