{"id":32583919,"url":"https://github.com/tobilg/sql-workbench-embedded","last_synced_at":"2026-05-18T10:11:11.922Z","repository":{"id":320784214,"uuid":"1082778547","full_name":"tobilg/sql-workbench-embedded","owner":"tobilg","description":"Lightweight JavaScript library that transforms static SQL code blocks into interactive, browser-based SQL execution environments using DuckDB WASM","archived":false,"fork":false,"pushed_at":"2025-11-03T20:12:46.000Z","size":287,"stargazers_count":26,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-03T22:10:14.136Z","etag":null,"topics":["duckdb","duckdb-wasm","embedded-database","sql","sql-editor"],"latest_commit_sha":null,"homepage":"https://embedded.sql-workbench.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tobilg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-24T18:54:04.000Z","updated_at":"2025-11-03T20:12:50.000Z","dependencies_parsed_at":"2025-10-25T22:18:54.042Z","dependency_job_id":"41641b09-59e7-4814-83ed-23920ed3dd66","html_url":"https://github.com/tobilg/sql-workbench-embedded","commit_stats":null,"previous_names":["tobilg/sql-workbench-embedded"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tobilg/sql-workbench-embedded","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobilg%2Fsql-workbench-embedded","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobilg%2Fsql-workbench-embedded/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobilg%2Fsql-workbench-embedded/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobilg%2Fsql-workbench-embedded/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tobilg","download_url":"https://codeload.github.com/tobilg/sql-workbench-embedded/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobilg%2Fsql-workbench-embedded/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33174091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"ssl_error","status_checked_at":"2026-05-18T09:27:28.300Z","response_time":71,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["duckdb","duckdb-wasm","embedded-database","sql","sql-editor"],"created_at":"2025-10-29T18:58:36.691Z","updated_at":"2026-05-18T10:11:11.916Z","avatar_url":"https://github.com/tobilg.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# SQL Workbench Embedded\n\nA lightweight JavaScript library that transforms static SQL code blocks into interactive, browser-based SQL execution environments using DuckDB WASM.\n\n**Repository**: [https://github.com/tobilg/sql-workbench-embedded](https://github.com/tobilg/sql-workbench-embedded)\n\n## Features\n\n- **Zero Backend Required**: All SQL execution happens in the browser\n- **Lightweight**: 9.54 kB gzipped bundle (29.81 kB minified)\n- **Easy Integration**: Just add a CSS class to your code blocks\n- **Interactive Editing**: Edit SQL queries with real-time syntax highlighting\n- **Framework Agnostic**: Works with vanilla JS, React, Vue, and more\n- **Privacy-Focused**: No data transmission to external servers\n- **Lazy Loading**: DuckDB WASM loads only when needed\n- **Init Queries**: Execute initialization queries once for extension management\n- **Path Resolution**: Automatic resolution of relative file paths in SQL queries\n- **Flexible Theming**: Three-tier priority system (data-attribute \u003e config \u003e default)\n- **Custom Themes**: Create themes that extend built-ins or define new color schemes\n- **Typography Customization**: Customize fonts and sizes per theme\n\n## Quick Start\n\n### Via CDN\n\n#### unpkg\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eSQL Workbench Example\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cpre class=\"sql-workbench-embedded\"\u003e\n    \u003ccode\u003eSELECT 'Hello, World!' AS greeting;\u003c/code\u003e\n  \u003c/pre\u003e\n\n  \u003c!-- Latest version --\u003e\n  \u003cscript src=\"https://unpkg.com/sql-workbench-embedded@latest\"\u003e\u003c/script\u003e\n\n  \u003c!-- Specific version (recommended for production) --\u003e\n  \u003cscript src=\"https://unpkg.com/sql-workbench-embedded@0.1.4\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### jsDelivr\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eSQL Workbench Example\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cpre class=\"sql-workbench-embedded\"\u003e\n    \u003ccode\u003eSELECT 'Hello, World!' AS greeting;\u003c/code\u003e\n  \u003c/pre\u003e\n\n  \u003c!-- Latest version --\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/sql-workbench-embedded@latest\"\u003e\u003c/script\u003e\n\n  \u003c!-- Specific version (recommended for production) --\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/sql-workbench-embedded@0.1.4\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Development Setup\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server (http://localhost:5173/examples/index.html)\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Preview production build (http://localhost:4173/examples/index.html)\nnpm run preview:prod\n```\n\n### Examples\n\n- **Basic Example**: [examples/index.html](examples/index.html) - Vanilla JavaScript integration\n- **Init Queries Example**: [examples/init-queries.html](examples/init-queries.html) - DuckDB extension management with initQueries\n- **unpkg CDN (UMD)**: [examples/unpkg.html](examples/unpkg.html) - Loading from unpkg as UMD module\n- **unpkg CDN (ESM)**: [examples/unpkg-esm.html](examples/unpkg-esm.html) - Loading from unpkg as ES module\n- **Typography Example**: [examples/typography.html](examples/typography.html) - Font customization examples\n- **React Example**: [examples/react.html](examples/react.html) - React component integration\n- **Vue Example**: [examples/vue.html](examples/vue.html) - Vue 3 component integration\n\n## Usage\n\n### Automatic Initialization\n\nBy default, the library automatically scans for elements with the class `sql-workbench-embedded` and transforms them:\n\n```html\n\u003cpre class=\"sql-workbench-embedded\"\u003e\n  \u003ccode\u003e\n    SELECT * FROM generate_series(1, 10);\n  \u003c/code\u003e\n\u003c/pre\u003e\n\n\u003c!-- You can also set the theme directly on the element --\u003e\n\u003cpre class=\"sql-workbench-embedded\" data-theme=\"dark\"\u003e\n  \u003ccode\u003e\n    SELECT * FROM users WHERE active = true;\n  \u003c/code\u003e\n\u003c/pre\u003e\n```\n\n### Manual Initialization\n\n```javascript\nimport { SQLWorkbench } from 'sql-workbench-embedded';\n\n// Configure globally\nSQLWorkbench.config({\n  selector: '.my-sql-code',\n  theme: 'dark',\n  baseUrl: 'https://my-data-server.com',\n});\n\n// Initialize all embeds\nSQLWorkbench.init();\n\n// Or create a single embed programmatically\nconst embed = new SQLWorkbench.Embedded(element, {\n  editable: true,\n  theme: 'light',\n});\n```\n\n### Browser Usage (UMD)\n\n```html\n\u003c!-- Using unpkg --\u003e\n\u003cscript src=\"https://unpkg.com/sql-workbench-embedded@0.1.4\"\u003e\u003c/script\u003e\n\n\u003c!-- Or using jsDelivr --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/sql-workbench-embedded@0.1.4\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  // Configure globally\n  SQLWorkbench.config({\n    selector: '.my-sql-code',\n    theme: 'dark',\n    baseUrl: 'https://my-data-server.com',\n  });\n\n  // Initialize all embeds\n  SQLWorkbench.init();\n\n  // Or create a single embed programmatically\n  const embed = new SQLWorkbench.Embedded(element, {\n    editable: true,\n    theme: 'light',\n  });\n\u003c/script\u003e\n```\n\n## Configuration Options\n\n### Global Configuration\n\n```javascript\nSQLWorkbench.config({\n  selector: 'pre.sql-workbench-embedded, .sql-workbench-embedded pre',  // CSS selector for auto-discovery\n  baseUrl: 'https://data.sql-workbench.com',  // Base URL for file paths\n  theme: 'auto',  // 'light', 'dark', or 'auto'\n  autoInit: true,  // Auto-initialize on DOMContentLoaded\n  duckdbVersion: '1.31.1-dev1.0',  // DuckDB version\n  duckdbCDN: 'https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm',\n  editable: true,  // Allow code editing\n  showOpenButton: true,  // Show \"Open in SQL Workbench\" button\n  initQueries: [],  // Initialization queries to execute once before first user query\n});\n```\n\n### Per-Instance Options\n\n```javascript\nconst embed = new SQLWorkbench.Embedded(element, {\n  initialCode: 'SELECT 1;',\n  theme: 'dark',\n  editable: false,\n  showOpenButton: false,  // Hide \"Open in SQL Workbench\" button for this instance\n});\n```\n\n## Initialization Queries\n\nThe `initQueries` configuration allows you to execute SQL queries once before any user query runs. This is perfect for installing and loading DuckDB extensions, setting configuration options, or creating user-defined functions.\n\n### Key Features\n\n- ✅ Executes only once across all embeds on the page\n- ✅ Runs sequentially in array order\n- ✅ Lazy execution - only when the first \"Run\" button is pressed\n- ✅ All embeds share the same DuckDB instance and extensions\n\n### Installing Extensions\n\n```javascript\nSQLWorkbench.config({\n  initQueries: [\n    \"INSTALL spatial\",\n    \"LOAD spatial\",\n    \"INSTALL a5 FROM community\",\n    \"LOAD a5\"\n  ]\n});\n```\n\nNow all embeds can use spatial functions and community extensions:\n\n```html\n\u003cpre class=\"sql-workbench-embedded\"\u003e\n  SELECT ST_Distance(\n    ST_Point(-74.0060, 40.7128),\n    ST_Point(-118.2437, 34.0522)\n  ) / 1000 AS distance_km;\n\u003c/pre\u003e\n\n\u003cpre class=\"sql-workbench-embedded\"\u003e\n  -- Generate GeoJSON for A5 cell\n  SELECT ST_AsGeoJSON(\n    ST_MakePolygon(\n      ST_MakeLine(\n        list_transform(\n          a5_cell_to_boundary(a5_lonlat_to_cell(-3.7037, 40.41677, 10)),\n          x -\u003e ST_Point(x[1], x[2])\n        )\n      )\n    )\n  ) as geojson;\n\u003c/pre\u003e\n```\n\n### Setting Configuration Options\n\n```javascript\nSQLWorkbench.config({\n  initQueries: [\n    \"SET memory_limit='2GB'\",\n    \"SET threads=4\"\n  ]\n});\n```\n\n### Creating User-Defined Functions\n\n```javascript\nSQLWorkbench.config({\n  initQueries: [\n    \"CREATE MACRO add_tax(price, rate) AS price * (1 + rate)\",\n    \"CREATE MACRO full_name(first, last) AS first || ' ' || last\"\n  ]\n});\n```\n\n### Error Handling\n\nIf an initialization query fails:\n- The error is shown to the user\n- The user query is not executed\n- The init query state is reset, allowing retry on next run\n\n### Example\n\nSee [examples/init-queries.html](examples/init-queries.html) for a complete working example with the spatial and a5 community extensions.\n\n### Theme Priority\n\nThemes are resolved in the following priority order (highest to lowest):\n\n1. **HTML `data-theme` attribute** - `\u003cpre data-theme=\"ocean\"\u003e` (highest)\n2. **Per-instance options** - `new Embedded(element, { theme: 'dark' })`\n3. **Global configuration** - `SQLWorkbench.config({ theme: 'auto' })` (lowest)\n\n## Custom Themes\n\nYou can define custom themes that either extend existing light/dark themes or define completely new color schemes.\n\n### Defining Custom Themes\n\nCustom themes are automatically inherited by programmatic embeds, so you only need to define them once globally.\n\n```javascript\nSQLWorkbench.config({\n  customThemes: {\n    // Extend existing theme with custom colors\n    ocean: {\n      extends: 'dark',\n      config: {\n        primaryBg: '#0ea5e9',\n        primaryHover: '#0284c7',\n        editorBg: '#1e3a5f',\n        // Optionally customize syntax highlighting\n        syntaxKeyword: '#4fc3f7',\n        syntaxString: '#80cbc4'\n      }\n    },\n    // Standalone theme with all colors defined\n    sunset: {\n      config: {\n        bgColor: '#fef3c7',\n        textColor: '#92400e',\n        borderColor: '#f59e0b',\n        editorBg: '#fef7cd',\n        editorText: '#92400e',\n        editorFocusBg: '#fef3c7',\n        controlsBg: '#fef7cd',\n        primaryBg: '#f97316',\n        primaryText: '#ffffff',\n        primaryHover: '#ea580c',\n        secondaryBg: '#f59e0b',\n        secondaryText: '#92400e',\n        secondaryHover: '#d97706',\n        mutedText: '#a16207',\n        errorText: '#dc2626',\n        errorBg: '#fef2f2',\n        errorBorder: '#f87171',\n        tableHeaderBg: '#fef3c7',\n        tableHeaderText: '#92400e',\n        tableHover: '#fef7cd'\n      }\n    }\n  },\n  theme: 'ocean'  // Global default theme\n});\n\n// Use via data-attribute (highest priority)\n// \u003cpre class=\"sql-workbench-embedded\" data-theme=\"sunset\"\u003e\n\n// Or programmatically (inherits customThemes automatically)\nnew SQLWorkbench.Embedded(element, {\n  theme: 'ocean'  // Overrides global default\n});\n```\n\n### Available Theme Properties\n\nWhen defining custom themes, you can override any of these properties:\n\n**Color Properties:**\n\n- `bgColor` - Main background color\n- `textColor` - Primary text color\n- `borderColor` - Border color\n- `editorBg` - Editor background\n- `editorText` - Editor text color\n- `editorFocusBg` - Editor focus background\n- `controlsBg` - Controls background\n- `primaryBg` - Primary button background\n- `primaryText` - Primary button text\n- `primaryHover` - Primary button hover\n- `secondaryBg` - Secondary button background\n- `secondaryText` - Secondary button text\n- `secondaryHover` - Secondary button hover\n- `mutedText` - Muted text color\n- `errorText` - Error text color\n- `errorBg` - Error background\n- `errorBorder` - Error border color\n- `tableHeaderBg` - Table header background\n- `tableHeaderText` - Table header text\n- `tableHover` - Table row hover background\n\n**Syntax Highlighting Colors (Optional):**\n\n- `syntaxKeyword` - SQL keywords (SELECT, FROM, WHERE, etc.)\n- `syntaxString` - String literals\n- `syntaxNumber` - Numeric values\n- `syntaxComment` - SQL comments\n- `syntaxFunction` - Function names\n- `syntaxOperator` - Operators (+, -, =, etc.)\n\n**Typography Properties (Optional):**\n\n- `fontFamily` - Font family for container and UI elements\n- `editorFontFamily` - Font family for the SQL editor\n- `fontSize` - Base font size (e.g., '14px', '1rem')\n- `editorFontSize` - Font size for the SQL editor\n- `buttonFontSize` - Font size for buttons\n- `metadataFontSize` - Font size for metadata text\n\n### Typography Customization\n\nYou can customize font families and sizes in your themes:\n\n```javascript\nSQLWorkbench.config({\n  customThemes: {\n    // Large accessible theme for better readability\n    'large-accessible': {\n      extends: 'light',\n      config: {\n        fontSize: '18px',\n        editorFontSize: '16px',\n        buttonFontSize: '16px',\n        metadataFontSize: '14px',\n      }\n    },\n    // Custom editor font with ligatures\n    'fira-code': {\n      extends: 'dark',\n      config: {\n        editorFontFamily: '\"Fira Code\", \"JetBrains Mono\", monospace',\n        editorFontSize: '15px',\n      }\n    },\n    // Compact theme for dense displays\n    'compact': {\n      extends: 'dark',\n      config: {\n        fontSize: '12px',\n        editorFontSize: '12px',\n        buttonFontSize: '12px',\n        metadataFontSize: '10px',\n      }\n    }\n  }\n});\n```\n\nSee [examples/typography.html](examples/typography.html) for a complete demonstration of typography customization.\n\n### Theme Inheritance\n\n- **With `extends`**: Only define the properties you want to override. The base theme provides defaults for all others.\n- **Without `extends`**: You must define all required color properties. The library will throw an error if any are missing.\n\n## Using Pre-built Themes\n\nThe [sql-workbench-embedded-themes](https://github.com/tobilg/sql-workbench-embedded-themes) package provides 66 ready-to-use themes converted from popular CodeMirror 5 themes (50 dark + 16 light themes).\n\n### Installation\n\n```bash\nnpm install sql-workbench-embedded-themes\n```\n\n### Usage with Bundler (Tree-shakeable)\n\n```javascript\nimport { SQLWorkbench } from 'sql-workbench-embedded';\nimport { dracula, monokai, elegant } from 'sql-workbench-embedded-themes';\n\n// Configure with pre-built themes\nSQLWorkbench.config({\n  customThemes: {\n    dracula: {\n      config: dracula.config\n    },\n    monokai: {\n      config: monokai.config\n    }\n  },\n  theme: 'dracula'\n});\n```\n\n### Usage with CDN (UMD)\n\nFor browser usage without a bundler, load individual theme bundles (~1.4KB each):\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eSQL Workbench with Themes\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cpre class=\"sql-workbench-embedded\"\u003e\n    \u003ccode\u003eSELECT * FROM generate_series(1, 10);\u003c/code\u003e\n  \u003c/pre\u003e\n\n  \u003c!-- Load SQL Workbench --\u003e\n  \u003cscript src=\"https://unpkg.com/sql-workbench-embedded@latest\"\u003e\u003c/script\u003e\n\n  \u003c!-- Load specific themes from CDN --\u003e\n  \u003cscript src=\"https://unpkg.com/sql-workbench-embedded-themes/dist/umd/themes/dracula.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/sql-workbench-embedded-themes/dist/umd/themes/monokai.js\"\u003e\u003c/script\u003e\n\n  \u003cscript\u003e\n    // Themes are available on window.SQLWorkbenchThemes\n    SQLWorkbench.config({\n      customThemes: {\n        dracula: {\n          config: window.SQLWorkbenchThemes.dracula.config\n        },\n        monokai: {\n          config: window.SQLWorkbenchThemes.monokai.config\n        }\n      },\n      theme: 'dracula'\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Available Themes\n\nThe package includes 66 themes categorized as:\n\n- **Dark themes (50)**: dracula, monokai, material, nord, oceanic-next, and many more\n- **Light themes (16)**: elegant, idea, neat, paraiso-light, and more\n\nFor a complete list of available themes, visit the [sql-workbench-embedded-themes repository](https://github.com/tobilg/sql-workbench-embedded-themes).\n\n## Path Resolution\n\nThe library automatically resolves relative file paths in SQL queries:\n\n```sql\n-- Relative path\nSELECT * FROM 'data.parquet';\n-- Resolves to: https://data.sql-workbench.com/data.parquet\n\n-- Dot-relative path\nSELECT * FROM './path/to/data.parquet';\n-- Resolves to: https://data.sql-workbench.com/path/to/data.parquet\n\n-- Absolute path\nSELECT * FROM '/data.parquet';\n-- Resolves to: https://your-domain.com/data.parquet\n\n-- Already absolute URL (unchanged)\nSELECT * FROM 'https://example.com/data.parquet';\n```\n\nConfigure the base URL:\n\n```javascript\nSQLWorkbench.config({\n  baseUrl: 'https://my-data-cdn.com',\n});\n```\n\n## Open in SQL Workbench\n\nEach embed includes an \"Open in SQL Workbench\" button (enabled by default) that opens the current query in the full [SQL Workbench](https://sql-workbench.com) web application. The query is encoded in the URL hash using URL-safe Base64 encoding for sharing and persistence.\n\nTo disable this button globally:\n\n```javascript\nSQLWorkbench.config({\n  showOpenButton: false,\n});\n```\n\nOr for a specific instance:\n\n```javascript\nconst embed = new SQLWorkbench.Embedded(element, {\n  showOpenButton: false,\n});\n```\n\n## Keyboard Shortcuts\n\n- **Ctrl+Enter** (Mac: **Cmd+Enter**): Execute query\n- **Ctrl+Shift+Enter** (Mac: **Cmd+Shift+Enter**): Open in SQL Workbench\n- **Ctrl+Backspace** (Mac: **Cmd+Backspace**): Reset to original code\n- **Tab**: Navigate between buttons\n\n## API Reference\n\n### SQLWorkbench.init()\n\nInitialize all embeds matching the configured selector.\n\n### SQLWorkbench.destroy()\n\nDestroy all embeds and cleanup resources.\n\n### SQLWorkbench.config(options)\n\nSet global configuration options.\n\n### SQLWorkbench.Embedded\n\nClass for creating individual embeds.\n\n```javascript\nconst embed = new SQLWorkbench.Embedded(element, options);\n\n// Methods\nembed.run();  // Execute query\nembed.destroy();  // Cleanup\nembed.isDestroyed();  // Check if destroyed\nembed.getContainer();  // Get container element\n```\n\n## Framework Integration\n\n### React\n\n#### Installation\n\n**Option 1: CDN (Recommended for quick setup)**\n```html\n\u003c!-- Add to your HTML head --\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/sql-workbench-embedded@0.1.4/dist/sql-workbench-embedded.esm.js\"\u003e\u003c/script\u003e\n```\n\n**Option 2: npm**\n```bash\nnpm install sql-workbench-embedded\n```\n\n#### Usage\n\n```jsx\nimport { useRef, useEffect } from 'react';\n\nfunction SQLWorkbenchEmbedded({ code, options }) {\n  const containerRef = useRef(null);\n  const embedRef = useRef(null);\n\n  useEffect(() =\u003e {\n    if (containerRef.current \u0026\u0026 window.SQLWorkbench) {\n      // Create a pre element with the SQL code\n      const preElement = document.createElement('pre');\n      preElement.className = 'sql-workbench-embedded';\n      preElement.innerHTML = `\u003ccode\u003e${code}\u003c/code\u003e`;\n      containerRef.current.appendChild(preElement);\n\n      // Initialize the embed\n      embedRef.current = new window.SQLWorkbench.Embedded(preElement, options);\n    }\n\n    return () =\u003e {\n      embedRef.current?.destroy();\n    };\n  }, [code, options]);\n\n  return \u003cdiv ref={containerRef} /\u003e;\n}\n\n// Usage in your app\nfunction App() {\n  return (\n    \u003cSQLWorkbenchEmbedded \n      code=\"SELECT 'Hello, World!' AS greeting;\"\n      options={{ editable: true, theme: 'light' }}\n    /\u003e\n  );\n}\n```\n\n### Vue 3 (Composition API)\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv ref=\"container\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ref, onMounted, onUnmounted } from 'vue';\n\nexport default {\n  props: {\n    code: String,\n    options: Object\n  },\n  setup(props) {\n    const containerRef = ref(null);\n    const embedRef = ref(null);\n\n    onMounted(() =\u003e {\n      if (containerRef.value \u0026\u0026 window.SQLWorkbench) {\n        // Create a pre element with the SQL code\n        const preElement = document.createElement('pre');\n        preElement.className = 'sql-workbench-embedded';\n        preElement.innerHTML = `\u003ccode\u003e${props.code}\u003c/code\u003e`;\n        containerRef.value.appendChild(preElement);\n\n        // Initialize the embed\n        embedRef.value = new window.SQLWorkbench.Embedded(preElement, props.options);\n      }\n    });\n\n    onUnmounted(() =\u003e {\n      embedRef.value?.destroy();\n    });\n\n    return {\n      containerRef\n    };\n  }\n};\n\u003c/script\u003e\n```\n\n### Vue 2 (Options API)\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv ref=\"container\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  props: ['code', 'options'],\n  mounted() {\n    if (this.$refs.container \u0026\u0026 window.SQLWorkbench) {\n      const element = document.createElement('pre');\n      element.className = 'sql-workbench-embedded';\n      element.innerHTML = `\u003ccode\u003e${this.code}\u003c/code\u003e`;\n      this.$refs.container.appendChild(element);\n\n      this.embed = new window.SQLWorkbench.Embedded(element, this.options);\n    }\n  },\n  beforeUnmount() {\n    this.embed?.destroy();\n  },\n};\n\u003c/script\u003e\n```\n\n## Bundle Size\n\nThe library is optimized for production with minimal bundle size:\n\n- **UMD Bundle**: 29.81 kB minified, 9.54 kB gzipped\n- **ES Module**: 30.59 kB minified, 9.59 kB gzipped\n- **DuckDB WASM**: Loaded separately from CDN (~5MB on first use)\n\n### Size Breakdown\n\n- **SQL Workbench Embed**: ~20 kB (UI, syntax highlighting, path resolution, theming)\n- **DuckDB Client Library**: ~6 kB (minimal DuckDB bindings)\n- **Build Overhead**: ~3 kB (UMD wrapper, utilities)\n\n### Performance Impact\n\n- **Initial Load**: 9.54 kB gzipped (extremely lightweight)\n- **First Query**: Additional ~5MB for DuckDB WASM binary (cached thereafter)\n- **Subsequent Loads**: Only 9.54 kB (DuckDB cached)\n\nThe production build maintains a compact size while providing full functionality including flexible theming and typography customization.\n\n## Browser Support\n\n- Chrome/Edge 88+\n- Firefox 89+\n- Safari 15+\n\nRequires: WebAssembly, Web Workers, ES2018+\n\n## Development\n\n### Project Structure\n\n```\nsrc/\n├── index.ts              # Main entry point\n├── embedded.ts           # Core Embedded class\n├── types.ts              # TypeScript definitions\n├── duckdb-manager.ts     # DuckDB connection management\n├── path-resolver.ts      # File path resolution\n├── syntax-highlight.ts   # SQL syntax highlighting\n└── styles.ts             # CSS injection\n\nexamples/\n├── index.html            # Basic vanilla JS example\n├── init-queries.html     # Init queries / extension management example\n├── unpkg.html            # unpkg CDN example (UMD)\n├── unpkg-esm.html        # unpkg CDN example (ESM)\n├── typography.html       # Typography customization examples\n├── react.html            # React integration example\n└── vue.html              # Vue 3 integration example\n```\n\n## License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobilg%2Fsql-workbench-embedded","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftobilg%2Fsql-workbench-embedded","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobilg%2Fsql-workbench-embedded/lists"}