📖 ETL Studio — README

📘 Docs ← Back to App

ETL Studio

A browser-based ETL (Extract, Transform, Load) designer powered by DuckDB-WASM. Build data pipelines visually with a step-based editor, preview results in real-time, and export to CSV, Parquet, Excel, JSON, or JSONL — all in your browser, no server required.

Live demo → pyaek.com/data

Features

🧩 Step-Based Pipeline Editor

Build ETL workflows by adding, configuring, and reordering steps visually.

🔧 30+ Transform Steps

Filter, sort, aggregate, pivot, join, change types, formula columns, and more.

👁️ Live Preview

See results instantly as you build your pipeline — no manual refresh needed.

📝 SQL Editor

Write custom SQL with syntax highlighting and AI assistance.

🤖 AI-Powered Generation

Describe what you want in natural language and let AI write the SQL.

🔌 Multiple AI Providers

Ollama (local), Claude, OpenAI, Gemini, Groq, OpenRouter.

📦 Export

Download results as CSV, Parquet, Excel, JSON, or JSONL.

🔗 Connections

Link local folders or connect to databases (PostgreSQL, MySQL, SQLite, etc.).

🔀 Cross-Query References

One query can reference another's output for complex workflows.

📲 PWA

Install as a desktop app, works offline after initial load.

🌙 Dark Theme

Easy on the eyes, built for extended use.

Tech Stack

LayerTechnology
FrameworkReact 18 + TypeScript
BundlerVite 6
DatabaseDuckDB-WASM (in-browser)
StateZustand 5
PersistenceFile System Access API + IndexedDB
UIHand-built with CSS custom properties
AIOllama, Claude, OpenAI, Gemini, Groq, OpenRouter
PWAvite-plugin-pwa (Workbox)

Getting Started

Prerequisites

Development

# Install dependencies
npm install

# Start dev server
npm run dev

The app runs at http://localhost:5173 (or the next available port).

Build

npm run build

Output goes to dist/. Serve with any static file server.

AI Setup (Optional)

  1. Ollama (local): Install Ollama, pull a model (ollama pull gemma3:4b), start with OLLAMA_ORIGINS=* ollama serve
  2. Cloud providers: Get API keys from Anthropic, OpenAI, Google AI Studio, Groq, or OpenRouter, then configure in the AI panel

Project Structure

src/
  main.tsx                    # App entry point
  App.tsx                     # Root component (layout + modals)
  components/
    layout/                   # App shell (Header, LeftPanel, CenterPanel, etc.)
    steps/                    # Step config dialogs
    modals/                   # Modal overlays (AI, Connections, etc.)
    icons/                    # SVG icon components
  steps/                      # Step definitions (buildSql per kind)
  engine/                     # CTE builder, SQL executor, references
  store/                      # Zustand stores
  lib/                        # Utilities (DuckDB, AI, export, file access)
  types/                      # TypeScript type definitions
  styles/                     # CSS (theme + layout)

Contact

Email: hello@pyaek.com

License

MIT