LocalHtmlDataTest/paste

Paste -- Demo App

A minimal paste-bin app used to test and compare all five IndexSyncFile storage variants. Each version compiles to a single self-contained HTML file.

What it does

1. You type or paste text into a text area
2. It saves automatically to a local database
3. You pick a sync folder on disk
4. Open the same HTML file in another browser window, point it at the same folder
5. Both windows stay in sync (auto-sync every 3 seconds)

That's it. No server, no accounts, no network. Just two browser windows and a folder.

The Nostr variant adds optional cross-device sync over public Nostr relays via WebSocket. Enter a shared room key and devices sync over the internet too.

Five versions

File	Storage engine	Sync transport	Opens from file://?	Size
paste-indexeddb.html	IndexedDB (browser built-in)	Folder	Yes	~23 KB
paste-nedb.html	NeDB (in-memory, MongoDB-style)	Folder	Yes	~115 KB
paste-sql-js.html	sql.js (SQLite via asm.js)	Folder	Yes	~1.9 MB
paste-sqlite.html	SQLite WASM (official build)	Folder	No (needs HTTP)	~1.4 MB
paste-nostr.html	IndexedDB	Folder + Nostr	Yes	~75 KB

paste-indexeddb.html

Uses the browser's built-in IndexedDB. Smallest file, fastest startup, zero dependencies. The best choice for most use cases.

paste-nedb.html

Uses NeDB (@seald-io/nedb) running in-memory. Persists NDJSON snapshots to /data/ in the selected folder for fast reload. Useful if you need MongoDB-style query operators ($gt, $in, $regex).

paste-sql-js.html

Uses sql.js, which is SQLite compiled to pure JavaScript (asm.js, not WebAssembly). The full SQLite database is exported as a binary file to /data/store.sqlite in the selected folder. You can open that file with any SQLite tool. Larger bundle but works from file:// with no special setup.

paste-sqlite.html

Uses the official @sqlite.org/sqlite-wasm package. Requires an HTTP server because the browser must fetch() the .wasm binary at runtime. May also need COOP/COEP headers for OPFS persistence. Run bun run serve.ts to test this variant.

paste-nostr.html

Uses IndexedDB for local cache (same as the indexeddb variant) plus Nostr relay sync for cross-device reach. Has both a folder picker and a room key input. Use either or both:

• Folder only — local multi-browser sync (works offline)
• Room only — cross-device sync via Nostr relays (no folder needed)
• Both — folder for local speed + Nostr for internet reach

WebSocket connections to public Nostr relays work from file:// origins, so no server is needed.

How to test

Quick (three variants)

Double-click or drag any of these into Chrome:

dist/paste-indexeddb.html
dist/paste-nedb.html
dist/paste-sql-js.html
dist/paste-nostr.html

They work directly from file://.

SQLite WASM variant (needs HTTP)

bun run serve.ts

Then open http://localhost:4040/paste-sqlite.html.

Multi-browser sync test

1. Open paste-indexeddb.html in Chrome
2. Click "Select sync folder" and pick an empty folder
3. Type something
4. Open the same paste-indexeddb.html in a second Chrome window
5. Click "Select sync folder" and pick the same folder
6. Wait a few seconds -- the text should appear in the second window
7. Edit in either window -- changes propagate both ways

Building

Requires Bun 1.3.10+.

bun run build.ts

This produces five single-file HTMLs in dist/. The build script:

1. Runs Bun.build() for each variant (bundles TypeScript, minifies)
2. Inlines all JS and CSS chunks into the HTML
3. Copies sqlite3.wasm to dist/ for the WASM variant

Project structure

paste/
  indexeddb/          source for IndexedDB paste app
    app.ts
    index.html
  nedb/               source for NeDB paste app
    app.ts
    index.html
  sql-js/             source for sql.js paste app
    app.ts
    index.html
  sqlite/             source for SQLite WASM paste app
    app.ts
    index.html
  nostr/              source for Nostr + Folder paste app
    app.ts
    index.html
  shared.ts           shared UI logic (all variants import this)
  styles.css          shared styles
  build.ts            bun build script
  serve.ts            dev server for SQLite WASM variant
  dist/               built output (single HTML files)

Folder layout on disk

After selecting a sync folder, you'll see:

your-folder/
  events/
    1710000000000_a1b2c3d4e5f6.json
    1710000001000_f6e5d4c3b2a1.json
  data/                                 (nedb and sql-js only)
    kv.db                               (nedb: NDJSON)
    docs.db                             (nedb: NDJSON)
    store.sqlite                        (sql-js: SQLite binary)

The events/ folder is shared by all variants. If you point two different variant HTMLs at the same folder, they will sync with each other (the event format is identical across all five).