@n6k.io/ui

React runtime for n6k. In-browser DuckDB, data hooks, and template bindings.

Data flow

DuckDBProvider initializes DuckDB WASM, loads the n6k extension, and ATTACHes databases from config. useQuery(sql) runs any SQL against the in-browser DuckDB — queries can use ATTACHed databases, n6k() table functions, or any other DuckDB SQL.

useView(db, name, sql) creates a named view via the n6k_create_view DuckDB function — no server protocol required.

Bindings

BindingProvider is a Zustand-backed key-value store. useBinding(key) reads/writes a value. useInterpolate(template) does Handlebars interpolation against bindings — this is how pages wire dynamic SQL.

Configuration

DuckDBProvider accepts an optional duckdbOptions prop to configure worker URLs and the extension repository:

<DuckDBProvider
  databases={{ mydb: "n6k://localhost:5432/mydb" }}
  duckdbOptions={{
    workerUrl: "/custom/worker.js",
    fetchWorkerUrl: "/custom/fetch-worker.js",
    extensionRepository: "https://extensions.example.com",
  }}
>
  {children}
</DuckDBProvider>

Defaults: /_n6k/workers/n6k-duckdb-worker.js, /_n6k/workers/fetch-worker.js, and window.location.origin.

License

MIT