A modern, web-based SQLite database browser and query tool built for Val Town. Execute SQL queries, browse database schema, and export results with a clean, intuitive interface.

• 🔍 Database Schema Browser - View all tables and views with visual icons
• ✨ SQL Code Editor - Syntax highlighting with CodeMirror
• ⚡ Query Execution - Execute SQL queries with real-time results
• 📊 Paginated Results - Handle large datasets (100 rows per page)
• 💾 Export Data - Download results as CSV or JSON
• 🎨 Dark Mode - Automatic theme switching with warm color palette
• 💬 Query Persistence - Saves queries per table in localStorage
• ⌨️ Keyboard Shortcuts - Cmd/Ctrl+Enter to run queries
• 🔒 OAuth Authentication - Secure Val Town authentication
• 🛡️ Error Boundaries - Graceful error handling and recovery

• React 18.2.0 - UI framework
• CodeMirror 6 - SQL editor with syntax highlighting
• TailwindCSS - Styling (via Play CDN)
• TypeScript - Type safety with strict mode

• Hono 4 - Lightweight web framework
• Turso/libSQL - SQLite database (via Val Town)
• Deno - Runtime environment

• Biome - Linting and formatting
• TypeScript Strict Mode - Enhanced type safety

project-sqlite/
├── backend/
│   └── index.http.ts          # Main Hono server (API routes)
├── frontend/
│   ├── components/            # React components
│   │   ├── EditorSection.tsx  # SQL editor with controls
│   │   ├── ErrorBoundary.tsx  # Error boundary wrapper
│   │   ├── Table.tsx          # Paginated results table
│   │   ├── TablesList.tsx     # Schema sidebar
│   │   └── ThemeToggle.tsx    # Dark mode toggle
│   ├── hooks/                 # Custom React hooks
│   │   ├── useCodeEditor.ts   # Editor state management
│   │   ├── useDownload.ts     # Export functionality
│   │   ├── useQueryExecution.ts # Query execution
│   │   └── useTableSelection.ts # Table selection
│   ├── App.tsx                # Main application component
│   ├── index.html             # HTML template
│   └── main.tsx               # React entry point
├── shared/
│   ├── types.ts               # Shared TypeScript types
│   ├── exportHelpers.ts       # CSV/JSON export utilities
│   └── sqlHelpers.ts          # SQL parsing utilities
├── deno.json                  # Deno configuration
├── biome.json                 # Biome configuration
└── README.md                  # This file

1. Select a table from the sidebar to auto-populate the editor with SELECT * FROM [table]
2. Write or edit your SQL query in the editor
3. Press Cmd/Ctrl+Enter or click the "Run Query" button
4. View results in the paginated table below

The editor supports multiple SQL statements. It will execute the statement at your cursor position when you press Cmd/Ctrl+Enter.

1. Execute a query to get results
2. Click "Download CSV" or "Download JSON"
3. File downloads automatically with the results

• Cmd/Ctrl+Enter - Execute query at cursor
• Click table name - Auto-populate SELECT query

Returns all tables and views in the database.

Response:

{
   "tables": [{ "name": "users", "type": "table" }],
   "views": [{ "name": "active_users", "type": "view" }]
}

Executes a SQL query.

Request:

{
   "query": "SELECT * FROM users LIMIT 10"
}

Response:

{
   "success": true,
   "data": {
      "columns": ["id", "name", "email"],
      "rows": [[1, "Alice", "alice@example.com"]]
   }
}

Downloads query results as CSV.

Downloads query results as JSON.

• Strict TypeScript - noImplicitAny and strict enabled
• No any types - All values properly typed
• Type guards - Safe error handling with getErrorMessage()
• Shared types - Common types in /shared/types.ts

• Admin tool only - Not designed for public-facing applications
• Single database - Works with Val Town's SQLite instance
• No query history - Future enhancement planned
• 100 row pagination - Configurable in Table.tsx

This project was migrated from HTMX to React on November 14, 2024. See MIGRATION_GUIDE.md for details on the migration process.