A lightweight JavaScript library that turns SQL code blocks into browser-based database environments.
Powered by DuckDB WASM. No backend required.
Click on the run button of interactive SQL example below. All processing happens in your browser!
No backend - everything runs in your browser
Only 9.49 kB gzipped for fast loading
Real-time SQL editing with syntax highlighting
All data stays in your browser, period!
Works with React, Vue, vanilla JS, and more
Light and dark themes included
Optimized loading for better performance
Powered by DuckDB WebAssembly for fast queries
See how easy it is to integrate SQL Workbench Embedded into your frontend projects. There's a React component, as well as a Vue 3 component.
// Load from unpkg CDN for plain HTML usage
<!DOCTYPE html>
<html>
<head>
<title>SQL Workbench Example</title>
</head>
<body>
<pre class="sql-workbench-embedded">
<code>SELECT 'Hello, World!' AS greeting;</code>
</pre>
<script src="https://unpkg.com/sql-workbench-embedded@0.1.2"></script>
</body>
</html>// Use the provided SQLWorkbenchEmbedded component to embed the SQL Workbench in your React application
import { SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';
export default function App() {
return (
<div>
<h1>My SQL Workbench</h1>
<SQLWorkbenchEmbedded
initialCode="SELECT * FROM generate_series(1, 10);"
/>
</div>
);
}<script setup>
import { SQLWorkbenchEmbedded } from 'vue-sql-workbench-embedded';
const initialCode = `SELECT * FROM generate_series(1, 10);`;
</script>
<template>
<SQLWorkbenchEmbedded
:initialCode="initialCode"
theme="dark"
:editable="true"
/>
</template>