SQLite Viewer for VSCode
A powerful VSCode extension for viewing and editing SQLite databases directly in your editor.
Features
- Custom Editor Integration: Opens SQLite files (
.sqlite, .db, .db3) as native VSCode documents
- Data View: Browse and edit table data with a clean spreadsheet-like interface
- Query Editor: Execute custom SQL queries with syntax highlighting and autocomplete (powered by CodeMirror)
- Schema Viewer: Visualize database schema with an interactive diagram featuring zoom and pan controls
- Inline Editing: Click any cell to edit values directly, with support for NULL values
- Row Management: Delete rows with confirmation dialogs
- Change Tracking: Visual indicators for unsaved changes with Apply/Discard functionality
- Foreign Key Support: View foreign key relationships in schema view
Installation
From VSCode Marketplace
Search for SQLite Viewer in the VSCode Extensions view, or install directly from the Marketplace.
From Source
- Clone this repository:
git clone https://github.com/ngupuk/sqlite-viewer.git
cd sqlite-viewer
- Install dependencies:
npm install
- Compile the extension:
npm run compile
- Press
F5 in VSCode to open a new window with the extension loaded
Requirements
- VSCode 1.90.0 or higher
- Node.js 20.x
Usage
- Open any SQLite database file (
.sqlite, .db, or .db3)
- The SQLite Viewer will open automatically with three tabs:
- Data: Browse tables and edit data inline
- Query: Write and execute SQL queries
- Schema: View database structure and relationships
Data View
- Click on any table in the sidebar to view its data
- Click any cell to edit its value
- Press
Enter to save or Escape to cancel
- Use the NULL button to set a cell to NULL
- Delete rows using the ✕ button
- Apply Changes or Discard Changes using the toolbar buttons
Query Editor
- Write SQL queries with syntax highlighting
- Press
Ctrl+Enter or F5 to execute
- Results are displayed in a clean table below
- Autocomplete support for table names and column names
Schema View
- View all tables and their columns
- See column types, nullability, and primary keys
- Navigate using zoom and pan controls
- Visual representation of foreign key relationships
Screenshots
Data View
View and edit your table data with a familiar spreadsheet interface.
Query Editor
Write and execute SQL queries with full syntax highlighting.
Schema View
Visualize your entire database schema with interactive diagrams.
Development
Scripts
| Command |
Description |
npm run compile |
Compile TypeScript and bundle webview |
npm run watch |
Watch for changes and recompile |
npm run lint |
Run ESLint |
npm run bundle-webview |
Bundle webview code with esbuild |
npm run copy-files |
Copy CSS files to output directory |
Project Structure
sqlite-viewer/
├── src/
│ ├── extension.ts # Extension activation
│ ├── sqliteDocument.ts # SQLite document model
│ ├── sqliteEditorProvider.ts # Custom editor provider
│ ├── database/
│ │ └── handler.ts # Database operations wrapper
│ └── webview/
│ ├── index.ts # Webview main logic
│ ├── styles.css # Webview styles
│ └── components/
│ ├── MonacoQueryEditor.ts # SQL query editor component
│ └── SchemaView.ts # Schema viewer component
├── media/
│ └── sql-wasm.wasm # SQL.js WASM file
└── out/ # Compiled output
Technologies
- VSCode API - Extension host integration
- sql.js - SQLite compiled to WebAssembly
- CodeMirror 6 - SQL editor with autocomplete
- TypeScript - Type-safe development
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- 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
Issues
If you find a bug or have a feature request, please open an issue.
License
MIT © ngupuk
Note: This extension uses sql.js which runs SQLite in-memory. Changes are persisted when you click "Apply Changes".
