An interactive, gamified SQL learning desktop application — practice SQL right in your browser with zero setup.
English | 中文
- 🎯 Level-based Challenges — Progress through structured SQL levels from beginner to advanced
- 📖 Built-in Tutorials — Each level comes with a tutorial explaining the SQL concepts
- 🏗️ In-browser SQL Engine — Powered by sql.js (SQLite compiled to WebAssembly), no server required
- ✅ Instant Result Validation — Write queries, run them, and get immediate feedback
- 🛠️ SQL Playground — Free-form SQL practice area to experiment with any query
- 🤖 AI Assistant — Integrated AI chat sidebar supporting OpenAI, Anthropic, and Google Gemini APIs
- 🎨 Dark / Light Theme — Toggle between dark and light modes
- 📦 Desktop App — Built with Electron for a native experience on Windows, macOS, and Linux
Click to view screenshots
| Home Page | Light Theme |
|---|---|
 |  |
| Dark Theme | SQL Playground |
|---|---|
 |  |
| Layer | Technology |
|---|---|
| Framework | Vue 3 + TypeScript |
| Desktop | Electron |
| UI Components | Ant Design Vue |
| Code Editor | Monaco Editor |
| SQL Engine | sql.js (SQLite via WebAssembly) |
| Markdown | ByteMD |
| State Management | Pinia (with persisted state) |
| Build Tool | Vite |
| AI Integration | OpenAI / Anthropic / Google Generative AI SDKs |
# Install dependencies
yarn install
# Start the web dev server
yarn dev
# Start in Electron dev mode
yarn dev:electron# Build the Electron app (generates installers in the release/ directory)
yarn electron:packThe packaged application will be output to the release/ directory.
lite-sqlearner/
├── electron/ # Electron main & preload scripts
├── public/ # Static assets (logo, WASM binary)
├── src/
│ ├── components/ # Vue components (editor, AI sidebar, etc.)
│ ├── configs/ # App configuration
│ ├── core/ # Core logic (SQL engine, AI providers, etc.)
│ ├── levels/ # SQL level definitions and tutorials
│ ├── pages/ # Page views (Index, Levels, Playground)
│ └── main.ts # Vue app entry point
├── doc/ # Screenshot assets
├── scripts/ # Build helper scripts
└── package.json
Contributions are welcome! Feel free to open issues or submit pull requests.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request