{"id":47172109,"title":"Show HN: Duck-UI Embed – SQL-Powered React Dashboard Components with DuckDB-WASM","points":1,"user":"caioricciuti","time":1772140618,"time_ago":"8 hours ago","type":"link","content":"

Hi HN,

I built @duck_ui/embed — a set of React components that turn SQL queries into interactive dashboards, powered by DuckDB-WASM running entirely in the browser.

     `npm install @duck_ui/embed @duckdb/duckdb-wasm`\n\n The idea: pass your data (arrays, CSV, Parquet, JSON, or a fetch callback), write SQL, and get charts, tables, KPIs, and filters — no backend required.\n\n     <DuckUIProvider data={{ sales: { url: "/sales.parquet", format: "parquet" } }}>\n       <Dashboard columns={3}>\n         <Dashboard.Panel>\n           <KPICard sql="SELECT sum(revenue) as value FROM sales" label="Revenue" format="currency" />\n         </Dashboard.Panel>\n         <Dashboard.Panel span={2}>\n           <Chart sql="SELECT month, sum(revenue) FROM sales GROUP BY 1" type="bar" />\n         </Dashboard.Panel>\n         <Dashboard.Panel span={3}>\n           <DataTable sql="SELECT * FROM sales" pageSize={20} sortable />\n         </Dashboard.Panel>\n       </Dashboard>\n     </DuckUIProvider>\n

\nWhat's under the hood:

- DuckDB-WASM boots in the browser, data loads into in-memory tables\n - SQL queries run against real DuckDB (full SQL support, window functions, CTEs)\n - Parquet files use HTTP range requests — only fetches needed row groups\n - FilterBar auto-detects column types and injects WHERE clauses via subquery wrapping\n - Connection pool (max 4), LRU query cache (100 entries, 5min TTL)\n - ~95KB bundled (ESM), tree-shakeable

Components: Chart (line/bar/area/scatter/pie), DataTable (paginated, sortable, resizable columns), KPICard (with sparkline + comparison), FilterBar (auto or manual config), Dashboard (responsive grid layout), ExportButton (CSV/JSON).

For connecting to external databases (Postgres, MySQL, etc.), there's a "gateway pattern" — your backend runs the SQL and returns JSON, the embed renders it via a fetch callback.

Built with: React 18+, DuckDB-WASM, uPlot, @tanstack/react-table, Zustand.\n Apache-2.0 licensed.

Live playground: https://duckui.com/play\n Docs: https://duckui.com/embed/docs\n npm: https://www.npmjs.com/package/@duck_ui/embed

This is part of the Duck-UI project (https://github.com/ibero-data/duck-ui),\n a browser-based SQL IDE for DuckDB with 525+ stars. The embed SDK lets you\n take the same DuckDB-powered analytics and drop them into any React app.

Would love feedback on the API design and what components/features you'd want next.","url":"https://duckui.com/play/","domain":"duckui.com","comments":[],"comments_count":0}