DuckDB WASM AdapterIn-Browser Analytics for Modern Web Apps

Quick Start ​

Install the adapter for your framework:

# React
npm install @northprint/duckdb-wasm-adapter-react

# Vue
npm install @northprint/duckdb-wasm-adapter-vue

# Svelte
npm install @northprint/duckdb-wasm-adapter-svelte

# React
pnpm add @northprint/duckdb-wasm-adapter-react

# Vue
pnpm add @northprint/duckdb-wasm-adapter-vue

# Svelte
pnpm add @northprint/duckdb-wasm-adapter-svelte

# React
yarn add @northprint/duckdb-wasm-adapter-react

# Vue
yarn add @northprint/duckdb-wasm-adapter-vue

# Svelte
yarn add @northprint/duckdb-wasm-adapter-svelte

Basic Usage ​

import { DuckDBProvider, useQuery } from '@northprint/duckdb-wasm-adapter-react';

function App() {
  return (
    <DuckDBProvider autoConnect>
      <DataTable />
    </DuckDBProvider>
  );
}

function DataTable() {
  const { data, loading } = useQuery('SELECT * FROM users');
  
  if (loading) return <div>Loading...</div>;
  
  return (
    <table>
      {data?.map(row => (
        <tr key={row.id}>
          <td>{row.name}</td>
          <td>{row.email}</td>
        </tr>
      ))}
    </table>
  );
}

<template>
  <div v-if="loading">Loading...</div>
  <table v-else>
    <tr v-for="row in data" :key="row.id">
      <td>{{ row.name }}</td>
      <td>{{ row.email }}</td>
    </tr>
  </table>
</template>

<script setup>
import { useQuery } from '@northprint/duckdb-wasm-adapter-vue';

const { data, loading } = useQuery('SELECT * FROM users');
</script>

<script>
  import { duckdb } from '@northprint/duckdb-wasm-adapter-svelte';
  
  const { query } = duckdb();
  const result = query('SELECT * FROM users');
</script>

{#if $result.loading}
  <div>Loading...</div>
{:else}
  <table>
    {#each $result.data as row}
      <tr>
        <td>{row.name}</td>
        <td>{row.email}</td>
      </tr>
    {/each}
  </table>
{/if}

Key Features ​

🔍 Query Builder ​

Build type-safe SQL queries with a fluent API:

const query = select('name', 'email')
  .from('users')
  .where('age', '>', 18)
  .orderBy('name')
  .limit(10)
  .build();

💾 Smart Caching ​

Automatic query result caching with multiple eviction strategies:

const { data } = useQuery(sql, params, {
  cache: {
    enabled: true,
    ttl: 60000, // 1 minute
    strategy: 'lru'
  }
});

🐛 Debug Mode ​

Comprehensive debugging tools for development:

<DuckDBProvider debug={{
  enabled: true,
  logQueries: true,
  slowQueryThreshold: 50
}}>

📊 Data Import/Export ​

Easy data import and export in multiple formats:

// Import CSV
await importCSV(file, 'table_name');

// Export to JSON
const data = await exportJSON('SELECT * FROM table');

Performance ​

Why DuckDB WASM Adapter? ​

• No Backend Required: Run complex analytical queries directly in the browser
• Privacy First: Data never leaves the user's device
• Offline Capable: Works without internet connection
• Cost Effective: No server infrastructure needed
• Fast Development: Rapid prototyping with instant feedback

Community ​

Join our growing community of developers building data-intensive web applications:

• 📖 Documentation
• 💬 GitHub Discussions
• 🐛 Issue Tracker
• 📦 NPM Package

License ​

MIT License - feel free to use in your projects!