SQLite Explorer (vReact)

Look ma, no HTMX!

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

.
├── backend/
│   └── index.http.ts                 # Hono API server / Entry Point
├── frontend/
│   ├── components/
│   │   ├── AppHeader.tsx             # App header with title
│   │   ├── EditorSection.tsx         # SQL editor with controls
│   │   ├── ErrorBoundary.tsx         # Error boundary component
│   │   ├── Icons.tsx                 # Icon components
│   │   ├── PaginationBar.tsx         # Pagination controls
│   │   ├── Table.tsx                 # Data table with pagination
│   │   ├── TablesList.tsx            # Schema sidebar
│   │   └── ThemeToggle.tsx           # Dark mode toggle
│   ├── hooks/
│   │   ├── useCodeEditor.ts          # Editor state management
│   │   ├── useDownload.ts            # Export functionality
│   │   ├── useQueryExecution.ts      # Query execution logic
│   │   └── useTableSelection.ts      # Table selection logic
│   ├── App.tsx                       # Main React application
│   ├── index.html                    # HTML entry point
│   └── main.tsx                      # React entry point
└── shared/
    ├── exportHelpers.ts              # CSV/JSON export utilities
    ├── sqlHelpers.ts                 # SQL parsing utilities
    └── types.ts                      # Shared TypeScript types

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.

• 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.