{"id":32583925,"url":"https://github.com/tobilg/react-sql-workbench-embedded","last_synced_at":"2026-05-15T08:10:34.919Z","repository":{"id":321311834,"uuid":"1083662735","full_name":"tobilg/react-sql-workbench-embedded","owner":"tobilg","description":"A React wrapper component for sql-workbench-embedded, enabling interactive SQL execution environments powered by DuckDB WASM.","archived":false,"fork":false,"pushed_at":"2025-10-28T17:33:48.000Z","size":72,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-29T02:16:26.829Z","etag":null,"topics":["duckdb-wasm","react","sql"],"latest_commit_sha":null,"homepage":"","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":"CONTRIBUTING.md","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-26T13:36:32.000Z","updated_at":"2025-10-28T17:33:52.000Z","dependencies_parsed_at":"2025-10-29T02:16:43.910Z","dependency_job_id":"80e64dfa-ec8b-436a-a242-f5063f7915b6","html_url":"https://github.com/tobilg/react-sql-workbench-embedded","commit_stats":null,"previous_names":["tobilg/react-sql-workbench-embedded"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/tobilg/react-sql-workbench-embedded","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobilg%2Freact-sql-workbench-embedded","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobilg%2Freact-sql-workbench-embedded/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobilg%2Freact-sql-workbench-embedded/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobilg%2Freact-sql-workbench-embedded/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tobilg","download_url":"https://codeload.github.com/tobilg/react-sql-workbench-embedded/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobilg%2Freact-sql-workbench-embedded/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281584979,"owners_count":26526171,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-29T02:00:06.901Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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-wasm","react","sql"],"created_at":"2025-10-29T18:58:39.368Z","updated_at":"2025-10-29T18:58:42.581Z","avatar_url":"https://github.com/tobilg.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-sql-workbench-embedded\n\nA React wrapper component for [sql-workbench-embedded](https://github.com/tobilg/sql-workbench-embedded), enabling interactive SQL execution environments powered by DuckDB WASM directly in your React applications.\n\n## Features\n\n- **React 18 \u0026 19 Compatible**: Works with both React 18 and React 19\n- **Zero Backend Required**: All SQL execution happens in the browser via DuckDB WASM\n- **Type-Safe**: Full TypeScript support with comprehensive type definitions\n- **Flexible API**: Use as a simple component or with global configuration via Context Provider\n- **Customizable**: Support for themes (light/dark/auto), custom themes, and extensive configuration options\n- **Modern Development**: Built with Vite, tested with Vitest\n- **Privacy-Focused**: No data leaves the browser\n- **Multiple Distribution Formats**: Available as ESM and UMD builds for maximum compatibility\n- **CDN-Ready**: Can be used directly from CDN without build tools\n\n## Installation\n\n### Via npm\n\n```bash\nnpm install react-sql-workbench-embedded\n```\n\n### Via CDN (UMD)\n\n```html\n\u003c!-- React and ReactDOM (use React 18 for UMD compatibility) --\u003e\n\u003cscript crossorigin src=\"https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js\"\u003e\u003c/script\u003e\n\u003cscript crossorigin src=\"https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- React SQL Workbench Embedded --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/react-sql-workbench-embedded/dist/react-sql-workbench-embedded.umd.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  const { SQLWorkbenchEmbedded } = window.SQLWorkbenchEmbedded;\n  // Use the component...\n\u003c/script\u003e\n```\n\n### Via CDN (ESM with Import Maps)\n\n```html\n\u003cscript type=\"importmap\"\u003e\n{\n  \"imports\": {\n    \"react\": \"https://cdn.jsdelivr.net/npm/react@18/+esm\",\n    \"react-dom\": \"https://cdn.jsdelivr.net/npm/react-dom@18/+esm\",\n    \"@duckdb/duckdb-wasm\": \"https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.31.1-dev1.0/+esm\",\n    \"react-sql-workbench-embedded\": \"https://cdn.jsdelivr.net/npm/react-sql-workbench-embedded/dist/react-sql-workbench-embedded.esm.js\"\n  }\n}\n\u003c/script\u003e\n\n\u003cscript type=\"module\"\u003e\n  import { SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';\n  // Use the component...\n\u003c/script\u003e\n```\n\n## Quick Start\n\n### Basic Usage (npm)\n\n```tsx\nimport { SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';\n\nfunction App() {\n  return (\n    \u003cSQLWorkbenchEmbedded\n      initialCode=\"SELECT * FROM generate_series(1, 10);\"\n      theme=\"auto\"\n      editable={true}\n    /\u003e\n  );\n}\n```\n\n### With Provider (Global Configuration)\n\n```tsx\nimport { SQLWorkbenchProvider, SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';\n\nfunction App() {\n  return (\n    \u003cSQLWorkbenchProvider\n      config={{\n        theme: 'dark',\n        editable: true,\n        initQueries: [\n          'INSTALL spatial',\n          'LOAD spatial'\n        ]\n      }}\n    \u003e\n      \u003cSQLWorkbenchEmbedded\n        initialCode=\"SELECT ST_AsText(ST_Point(1, 2)) as point;\"\n      /\u003e\n    \u003c/SQLWorkbenchProvider\u003e\n  );\n}\n```\n\n## API Reference\n\n### `SQLWorkbenchEmbedded` Component\n\n#### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `initialCode` | `string` | `''` | Initial SQL code to display in the workbench |\n| `theme` | `'light' \\| 'dark' \\| 'auto' \\| string` | `'auto'` | Theme for the workbench |\n| `editable` | `boolean` | `true` | Whether the SQL editor is editable |\n| `showOpenButton` | `boolean` | `true` | Show \"Open in SQL Workbench\" button |\n| `className` | `string` | `''` | Custom className for the container element |\n| `style` | `React.CSSProperties` | - | Custom styles for the container element |\n| `onReady` | `(instance) =\u003e void` | - | Callback when workbench is ready |\n| `onError` | `(error) =\u003e void` | - | Callback when initialization fails |\n\n#### Ref API\n\n```tsx\nimport { useRef } from 'react';\nimport { SQLWorkbenchEmbedded, type SQLWorkbenchEmbeddedRef } from 'react-sql-workbench-embedded';\n\nfunction App() {\n  const ref = useRef\u003cSQLWorkbenchEmbeddedRef\u003e(null);\n\n  return (\n    \u003cSQLWorkbenchEmbedded\n      ref={ref}\n      initialCode=\"SELECT 1;\"\n    /\u003e\n  );\n}\n```\n\nMethods available via ref:\n- `getInstance()`: Get the underlying SQLWorkbench instance\n- `getElement()`: Get the container element\n\n### `SQLWorkbenchProvider` Component\n\nProvides global configuration for all SQLWorkbenchEmbedded components.\n\n#### Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `config` | `SQLWorkbenchConfig` | Global configuration options |\n| `children` | `ReactNode` | Child components |\n| `onReady` | `() =\u003e void` | Callback when SQL Workbench is ready |\n| `onError` | `(error) =\u003e void` | Callback when initialization fails |\n\n#### Configuration Options\n\n```typescript\ninterface SQLWorkbenchConfig {\n  selector?: string;\n  baseUrl?: string;\n  theme?: 'light' | 'dark' | 'auto' | string;\n  autoInit?: boolean;\n  duckdbVersion?: string;\n  duckdbCDN?: string;\n  editable?: boolean;\n  showOpenButton?: boolean;\n  initQueries?: string[];\n  customThemes?: Record\u003cstring, CustomThemeConfig\u003e;\n}\n```\n\n### `useSQLWorkbench` Hook\n\nHook to access SQL Workbench context status.\n\n```tsx\nimport { useSQLWorkbench } from 'react-sql-workbench-embedded';\n\nfunction MyComponent() {\n  const { isReady, error } = useSQLWorkbench();\n\n  if (error) return \u003cdiv\u003eError: {error.message}\u003c/div\u003e;\n  if (!isReady) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n\n  return \u003cSQLWorkbenchEmbedded initialCode=\"SELECT 1;\" /\u003e;\n}\n```\n\n## Usage Examples\n\n### 1. Simple Component\n\nThe simplest way to use the component:\n\n```tsx\nimport { SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';\n\nexport default function App() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eMy SQL Workbench\u003c/h1\u003e\n      \u003cSQLWorkbenchEmbedded\n        initialCode=\"SELECT * FROM generate_series(1, 10);\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### 2. With Callbacks\n\nHandle initialization events:\n\n```tsx\nimport { SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';\n\nexport default function App() {\n  return (\n    \u003cSQLWorkbenchEmbedded\n      initialCode=\"SELECT 1 + 1 as result;\"\n      onReady={(instance) =\u003e {\n        console.log('Workbench ready!', instance);\n      }}\n      onError={(error) =\u003e {\n        console.error('Failed to initialize:', error);\n      }}\n    /\u003e\n  );\n}\n```\n\n### 3. Theme Switching\n\nAllow users to switch themes:\n\n```tsx\nimport { useState } from 'react';\nimport { SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';\n\nexport default function App() {\n  const [theme, setTheme] = useState\u003c'light' | 'dark' | 'auto'\u003e('auto');\n\n  return (\n    \u003cdiv\u003e\n      \u003cselect value={theme} onChange={(e) =\u003e setTheme(e.target.value)}\u003e\n        \u003coption value=\"auto\"\u003eAuto\u003c/option\u003e\n        \u003coption value=\"light\"\u003eLight\u003c/option\u003e\n        \u003coption value=\"dark\"\u003eDark\u003c/option\u003e\n      \u003c/select\u003e\n\n      \u003cSQLWorkbenchEmbedded\n        key={theme} // Force remount on theme change\n        initialCode=\"SELECT 'Hello World' as message;\"\n        theme={theme}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### 4. Using Provider for Multiple Instances\n\nShare configuration across multiple workbenches:\n\n```tsx\nimport { SQLWorkbenchProvider, SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';\n\nexport default function App() {\n  return (\n    \u003cSQLWorkbenchProvider\n      config={{\n        theme: 'dark',\n        editable: true\n      }}\n    \u003e\n      \u003cdiv\u003e\n        \u003ch2\u003eQuery 1\u003c/h2\u003e\n        \u003cSQLWorkbenchEmbedded\n          initialCode=\"SELECT 'First Query' as title;\"\n        /\u003e\n\n        \u003ch2\u003eQuery 2\u003c/h2\u003e\n        \u003cSQLWorkbenchEmbedded\n          initialCode=\"SELECT 'Second Query' as title;\"\n        /\u003e\n      \u003c/div\u003e\n    \u003c/SQLWorkbenchProvider\u003e\n  );\n}\n```\n\n### 5. Loading DuckDB Extensions\n\nLoad extensions for spatial operations:\n\n```tsx\nimport { SQLWorkbenchProvider, SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';\n\nexport default function App() {\n  return (\n    \u003cSQLWorkbenchProvider\n      config={{\n        initQueries: [\n          'INSTALL spatial',\n          'LOAD spatial'\n        ]\n      }}\n    \u003e\n      \u003cSQLWorkbenchEmbedded\n        initialCode={`\n          SELECT\n            ST_AsText(ST_Point(1.5, 2.5)) as point,\n            ST_AsText(ST_MakePolygon(\n              'LINESTRING(0 0, 0 1, 1 1, 1 0, 0 0)'\n            )) as polygon;\n        `}\n      /\u003e\n    \u003c/SQLWorkbenchProvider\u003e\n  );\n}\n```\n\n### 6. Read-Only Mode\n\nCreate a read-only SQL display:\n\n```tsx\nimport { SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';\n\nexport default function App() {\n  return (\n    \u003cSQLWorkbenchEmbedded\n      initialCode=\"SELECT * FROM generate_series(1, 100);\"\n      editable={false}\n      showOpenButton={false}\n    /\u003e\n  );\n}\n```\n\n### 7. Using Refs\n\nAccess the underlying instance:\n\n```tsx\nimport { useRef } from 'react';\nimport { SQLWorkbenchEmbedded, SQLWorkbenchEmbeddedRef } from 'react-sql-workbench-embedded';\n\nexport default function App() {\n  const workbenchRef = useRef\u003cSQLWorkbenchEmbeddedRef\u003e(null);\n\n  const handleClick = () =\u003e {\n    const instance = workbenchRef.current?.getInstance();\n    console.log('Current instance:', instance);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={handleClick}\u003e\n        Get Instance\n      \u003c/button\u003e\n\n      \u003cSQLWorkbenchEmbedded\n        ref={workbenchRef}\n        initialCode=\"SELECT 1;\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### 8. Loading Data from URLs\n\nQuery CSV files from URLs using httpfs extension:\n\n```tsx\nimport { SQLWorkbenchProvider, SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';\n\nexport default function App() {\n  return (\n    \u003cSQLWorkbenchProvider\n      config={{\n        initQueries: [\n          'INSTALL httpfs',\n          'LOAD httpfs'\n        ]\n      }}\n    \u003e\n      \u003cSQLWorkbenchEmbedded\n        initialCode={`\n          SELECT *\n          FROM read_csv_auto('https://example.com/data.csv')\n          LIMIT 10;\n        `}\n      /\u003e\n    \u003c/SQLWorkbenchProvider\u003e\n  );\n}\n```\n\n### 9. Custom Styling\n\nAdd custom styles to the workbench:\n\n```tsx\nimport { SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';\n\nexport default function App() {\n  return (\n    \u003cSQLWorkbenchEmbedded\n      initialCode=\"SELECT * FROM generate_series(1, 5);\"\n      className=\"my-custom-workbench\"\n      style={{\n        border: '2px solid #3498db',\n        borderRadius: '8px',\n        padding: '1rem'\n      }}\n    /\u003e\n  );\n}\n```\n\n### 10. Conditional Rendering with Hook\n\nUse the `useSQLWorkbench` hook to handle loading states:\n\n```tsx\nimport { SQLWorkbenchProvider, SQLWorkbenchEmbedded, useSQLWorkbench } from 'react-sql-workbench-embedded';\n\nfunction WorkbenchContent() {\n  const { isReady, error } = useSQLWorkbench();\n\n  if (error) {\n    return \u003cdiv\u003eError: {error.message}\u003c/div\u003e;\n  }\n\n  if (!isReady) {\n    return \u003cdiv\u003eLoading SQL Workbench...\u003c/div\u003e;\n  }\n\n  return (\n    \u003cSQLWorkbenchEmbedded\n      initialCode=\"SELECT 'Ready!' as status;\"\n    /\u003e\n  );\n}\n\nexport default function App() {\n  return (\n    \u003cSQLWorkbenchProvider\u003e\n      \u003cWorkbenchContent /\u003e\n    \u003c/SQLWorkbenchProvider\u003e\n  );\n}\n```\n\n### 11. Custom Themes\n\n```tsx\n\u003cSQLWorkbenchProvider\n  config={{\n    theme: 'ocean',\n    customThemes: {\n      ocean: {\n        extends: 'dark',\n        config: {\n          primaryBg: '#0ea5e9',\n          editorBg: '#1e3a5f',\n          syntaxKeyword: '#4fc3f7'\n        }\n      }\n    }\n  }}\n\u003e\n  \u003cSQLWorkbenchEmbedded initialCode=\"SELECT 1;\" /\u003e\n\u003c/SQLWorkbenchProvider\u003e\n```\n\n### 12. Multiple Instances with Different Themes\n\n```tsx\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eLight Theme\u003c/h2\u003e\n      \u003cSQLWorkbenchEmbedded\n        initialCode=\"SELECT 'Hello' as greeting;\"\n        theme=\"light\"\n      /\u003e\n\n      \u003ch2\u003eDark Theme\u003c/h2\u003e\n      \u003cSQLWorkbenchEmbedded\n        initialCode=\"SELECT 'World' as subject;\"\n        theme=\"dark\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## TypeScript Usage\n\nThe library is fully typed. Here's how to use types:\n\n```tsx\nimport { useState, useRef } from 'react';\nimport type {\n  SQLWorkbenchEmbeddedRef,\n  SQLWorkbenchConfig,\n  Theme\n} from 'react-sql-workbench-embedded';\n\nconst config: SQLWorkbenchConfig = {\n  theme: 'dark',\n  editable: true,\n  initQueries: ['INSTALL spatial']\n};\n\nfunction MyComponent() {\n  const [theme, setTheme] = useState\u003cTheme\u003e('auto');\n  const ref = useRef\u003cSQLWorkbenchEmbeddedRef\u003e(null);\n\n  // ... rest of component\n}\n```\n\n## Common Patterns\n\n### Error Boundaries\n\nWrap the component in an error boundary:\n\n```tsx\nimport { Component, ReactNode } from 'react';\n\nclass ErrorBoundary extends Component\u003c\n  { children: ReactNode },\n  { hasError: boolean }\n\u003e {\n  constructor(props: { children: ReactNode }) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return \u003ch2\u003eSomething went wrong.\u003c/h2\u003e;\n    }\n    return this.props.children;\n  }\n}\n\nexport default function App() {\n  return (\n    \u003cErrorBoundary\u003e\n      \u003cSQLWorkbenchEmbedded initialCode=\"SELECT 1;\" /\u003e\n    \u003c/ErrorBoundary\u003e\n  );\n}\n```\n\n### Dynamic Code Updates\n\nUpdate SQL code dynamically:\n\n```tsx\nimport { useState } from 'react';\nimport { SQLWorkbenchEmbedded } from 'react-sql-workbench-embedded';\n\nexport default function App() {\n  const [code, setCode] = useState(\"SELECT 1;\");\n\n  const queries = [\n    \"SELECT * FROM generate_series(1, 10);\",\n    \"SELECT DATE '2024-01-01' + INTERVAL (n) DAY FROM generate_series(0, 6) t(n);\",\n    \"SELECT 'Hello', 'World';\"\n  ];\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003e\n        {queries.map((query, idx) =\u003e (\n          \u003cbutton key={idx} onClick={() =\u003e setCode(query)}\u003e\n            Query {idx + 1}\n          \u003c/button\u003e\n        ))}\n      \u003c/div\u003e\n\n      \u003cSQLWorkbenchEmbedded\n        key={code} // Force remount when code changes\n        initialCode={code}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Tips\n\n1. **Force Remount**: Use the `key` prop to force component remount when you want to reset the workbench completely.\n\n2. **Provider vs. Component Config**: Use Provider for shared configuration across multiple instances. Use component props for instance-specific overrides.\n\n3. **Init Queries**: Use `initQueries` to install and load DuckDB extensions. These run once before any user queries.\n\n4. **Theme Priority**: Component prop \u003e HTML attribute \u003e Provider config. Choose the level that makes sense for your use case.\n\n5. **Performance**: The DuckDB WASM runtime is lazy-loaded only when needed, so initial page load stays fast.\n\n## Development\n\n### Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/tobilg/react-sql-workbench-embedded.git\ncd react-sql-workbench-embedded\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Run tests\nnpm test\n\n# Run tests with UI\nnpm run test:ui\n\n# Build the library\nnpm run build\n```\n\n### Project Structure\n\n```\nreact-sql-workbench-embedded/\n├── src/\n│   ├── components/\n│   │   ├── SQLWorkbenchEmbedded.tsx    # Main component\n│   │   ├── SQLWorkbenchProvider.tsx    # Context provider\n│   │   └── __tests__/                  # Component tests\n│   ├── demo/                           # Demo application\n│   │   ├── App.tsx\n│   │   └── main.tsx\n│   ├── types.ts                        # TypeScript types\n│   └── index.ts                        # Main entry point\n├── vite.config.ts                      # Vite configuration\n├── vitest.config.ts                    # Vitest configuration\n└── package.json\n```\n\n## Requirements\n\n- React 18+ or React 19+\n- TypeScript 5.6+ (for development)\n- Modern browser with WebAssembly support\n\n## Browser Compatibility\n\nThis library requires a modern browser with support for:\n- ES Modules (for ESM builds)\n- WebAssembly\n- Import Maps (for ESM CDN usage)\n\nFor the UMD build, all major modern browsers are supported without additional configuration.\n\n## Distribution Formats\n\nThis library is distributed in two formats:\n\n### ESM (ES Module)\n- **File**: `dist/react-sql-workbench-embedded.esm.js` (~32 KB, ~10 KB gzipped)\n- **Use case**: Modern build tools (Vite, Webpack, etc.) or direct browser usage with import maps\n- **Dependencies**: Requires React, ReactDOM, and @duckdb/duckdb-wasm to be available\n\n### UMD (Universal Module Definition)\n- **File**: `dist/react-sql-workbench-embedded.umd.js` (~31 KB, ~10 KB gzipped)\n- **Use case**: Direct browser usage via `\u003cscript\u003e` tags or legacy module systems\n- **Global**: Exposed as `window.SQLWorkbenchEmbedded`\n- **Dependencies**: Requires React and ReactDOM to be loaded first (use React 18 for UMD compatibility)\n\nBoth formats:\n- Bundle `sql-workbench-embedded` internally (no manual installation needed)\n- Externalize React and ReactDOM (expected as peer dependencies)\n- Use classic JSX runtime for maximum compatibility\n- Include no polyfills (work directly in modern browsers)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobilg%2Freact-sql-workbench-embedded","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftobilg%2Freact-sql-workbench-embedded","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobilg%2Freact-sql-workbench-embedded/lists"}