https://github.com/marimo-team/codemirror-sql
https://github.com/marimo-team/codemirror-sql
codemirror codemirror-extension sql
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/marimo-team/codemirror-sql
- Owner: marimo-team
- License: apache-2.0
- Created: 2025-07-31T02:26:19.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-08-08T08:08:20.000Z (8 months ago)
- Last Synced: 2025-08-08T10:07:45.512Z (8 months ago)
- Topics: codemirror, codemirror-extension, sql
- Language: TypeScript
- Homepage: https://marimo-team.github.io/codemirror-sql/
- Size: 207 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# codemirror-sql
A CodeMirror extension for SQL linting and visual gutter indicators.
## Features
- ⚡ **Real-time validation** - SQL syntax checking as you type with detailed error messages
- 🎨 **Visual gutter** - Color-coded statement indicators and error highlighting
- 💡 **Hover tooltips** - Schema info, keywords, and column details on hover
- 🔮 **CTE autocomplete** - Auto-complete support for CTEs
## Installation
```bash
npm install @marimo-team/codemirror-sql
# or
pnpm add @marimo-team/codemirror-sql
```
## Usage
### Basic Setup
```ts
import { sql, StandardSQL } from '@codemirror/lang-sql';
import { basicSetup, EditorView } from 'codemirror';
import { sqlExtension, cteCompletionSource } from '@marimo-team/codemirror-sql';
const schema = {
users: ["id", "name", "email", "active"],
posts: ["id", "title", "content", "user_id"]
};
const editor = new EditorView({
doc: "SELECT * FROM users WHERE active = true",
extensions: [
basicSetup,
sql({
dialect: StandardSQL,
schema: schema,
upperCaseKeywords: true
}),
StandardSQL.language.data.of({
autocomplete: cteCompletionSource,
}),
sqlExtension({
linterConfig: {
delay: 250 // Validation delay in ms
},
gutterConfig: {
backgroundColor: "#3b82f6", // Current statement color
errorBackgroundColor: "#ef4444", // Error highlight color
hideWhenNotFocused: true
},
enableHover: true,
hoverConfig: {
schema: schema,
hoverTime: 300,
enableKeywords: true,
enableTables: true,
enableColumns: true
}
})
],
parent: document.querySelector('#editor')
});
```
## Demo
See the [demo](https://marimo-team.github.io/codemirror-sql/) for a full example.
## Development
```bash
# Install dependencies
pnpm install
# Run tests
pnpm test
# Run demo
pnpm dev
```
## License
Apache 2.0