Use case · Developers

Stop rebuilding the dashboard. Again.

Your users keep asking for analytics. You keep saying "next quarter." Drop two components. Ship it this sprint. Their data, their dashboards, zero backend.

Try the SDK Playground Read the docs
Back to home

Your users don't want "export to CSV." They want a dashboard.

Every B2B SaaS reaches the same fork in the road. Customers start asking for analytics. The team scopes a six-month charting project. The product manager adds export to CSV as a placeholder. Nobody wins.

Without DuckViz

  • Hire a senior FE engineer for 6 months
  • Pick a chart library — regret it in 3 months
  • Build a query layer, a cache, an auth bridge
  • Users still file tickets asking for more charts
  • Nothing ships until Q4

With DuckViz SDK

  • Install @duckviz/explorer and @duckviz/dashboard
  • Drop them into your React tree
  • DuckDB-WASM runs in the user's browser
  • 50+ AI-picked chart types out of the box
  • Ship a real feature this sprint

The minimum viable embed

Three imports. One provider. Two components. Your users get a full AI-assisted analytics workflow over their own data.

your-app/app/analytics/page.tsx
import { DuckvizDBProvider } from "@duckviz/db";
import { Explorer } from "@duckviz/explorer";
import { Dashboard } from "@duckviz/dashboard";

export default function AnalyticsPage() {
  return (
    <DuckvizDBProvider persistence>
      <Explorer
        authenticated
        onAddWidgetToDashboard={handleAdd}
      />
      <Dashboard dashboards={dashboards} />
    </DuckvizDBProvider>
  );
}

What you get, out of the box

  • 50+ chart types — D3-powered bar, line, heat, Sankey, treemap, geo-map, word cloud, sunburst, and more. All themed via CSS variables.
  • Full DuckDB SQL in-browser — CTEs, window functions, joins, aggregations. Nothing phones home.
  • AI widget recommendations — schema-aware. Your users pick charts by intent, not by guessing at aggregation types.
  • Drag-and-drop dashboards — react-grid-layout under the hood, persisted to IndexedDB.
  • Node SDK (@duckviz/sdk) — server-side integration for bearer-auth flows, managed credit routing, and headless report generation.
  • Theme system — 10 presets + custom token builder. Match your product in minutes.

How integration actually goes

  1. Install two npm packages

    bun add @duckviz/db @duckviz/explorer @duckviz/dashboard. Peer dependencies are React 19+ and a modern bundler.

  2. Wrap your tree with the DB provider

    <DuckvizDBProvider persistence> sets up DuckDB-WASM in a Web Worker and wires IndexedDB persistence. No module-level singletons; props flow config.

  3. Drop the components and wire the callbacks

    <Explorer /> gives users the file tree, query editor, and AI widget flow. <Dashboard /> renders their saved layouts. You control storage, auth, and dashboard lifecycle via props.

  4. Theme it to match your brand

    Pick one of 10 presets or pass your own theme tokens. Charts and chrome pick up the colors automatically.

  5. Ship

    No backend. No ETL pipeline. No per-seat licensing. Your users' data never leaves their browser.

Frequently asked

Does the data really stay in my user's browser?

Yes. DuckDB-WASM runs inside a Web Worker in the user's tab. Queries never leave that tab. AI features only see column names and types.

What if my users are uploading very large files?

DuckDB-WASM comfortably handles files into the hundreds of megabytes in modern browsers, persisted as Parquet in IndexedDB. For server-side datasets, the Node SDK lets you pre-ingest and hand the browser a ready-to-query table.

How does billing work when I embed this?

Non-AI features (upload, SQL, charts, exports) are free forever. AI features deduct credits from a DuckViz account your app holds on behalf of the user. Credits are one-time packs, never subscriptions.

Can I white-label it?

Yes. Pass your own theme tokens, your own strings, and your own callbacks. Nothing renders a DuckViz logo inside the embedded surface.

Your roadmap has had "embed analytics" on it for four quarters. End the streak.

Install two packages. Drop them in. Ship analytics this sprint — not next year.

Read the SDK docs View packages on npm